H5+css : 360商城的首页布局模拟

最新推荐文章于 2023-04-06 20:47:53 发布

给我晕车药

最新推荐文章于 2023-04-06 20:47:53 发布

阅读量386

点赞数

分类专栏：功能实现技术分享日常相关文章标签： css html5

本文链接：https://blog.csdn.net/GeiWo_YunCheYao/article/details/111405485

版权

本文使用H5和CSS模拟了360商城的首页布局，包括基本的布局和鼠标悬停效果。文章指出模拟过程中的不足：搜索框文字样式未完善，中间轮播图仅用背景图片实现，以及热门活动图片的悬浮效果处理方式。提出了针对搜索框的改进方案，并指出了轮播图和活动图片效果的优化空间。

摘要由CSDN通过智能技术生成

H5+css : 360商城的首页布局模拟

因为360商城页面过长，商品分类页面只选择了一个页面做一下实现。且只做了基本的布局和鼠标悬停效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>360商城</title>
    </head>
    <style>
        body{
   
            margin: 0 auto;/*去掉body外边框的距离*/
        }
        /*div{*/
        /*    border: 1px solid blue;*/
        /*}*/
        a{
   
            text-decoration: none;/*去掉a标签的下划线*/
        }
        .box{
   
            width: 100%;
            height: 1890px;
        }

        .box .top{
   
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: black;
            color: white;
        }
        .box .top .left{
   
            float: left;
            margin-left: 220px;
        }
        .box .top .left .al{
   
            margin-right: 25px;
        }
        .box .top .left .al:hover{
   
            cursor: pointer;
        }
        .box .top .bao{
   
             width: 40px;
             height: 40px;
             background:url("img/3.png") no-repeat -100px -40px;
             float: right;
             margin-right: 220px;
        }
        .box .top .bao:hover{
   
            cursor: pointer;
        }
        .box .top .right{
   
            float: right;
            margin-right: 25px;
        }
        .box .top .right .ar{
   
            margin-left: 25px;
        }
        .box .top .right .ar:hover{
   
            cursor: pointer;
        }

        .box .menu .shang{
   
            width: 100%;
            height: 80px;
        }
        .box .menu .shang .zuo1{
   
            height: 80px;
            width: 250px;
            float: left;
            margin-left: 220px;
        }
        .box .menu .shang .zuo2{
   
            height: 80px;
            width: 250px;
            float: left;
        }
        .box .menu .shang .zuo1 img{
   
            height: 40px;
            margin-top: 40px;
        }
        .box .menu .shang .zuo1 img:hover{
   
            cursor: pointer;
        }
        .box .menu .shang .zuo2 a{
   
            text-align: center;
            line-height: 120px;
            margin-right: 40px;
            font-size: 20px;
            font-weight: 500;
        }
        .box .menu .shang .zuo2 a:hover{
   
            cursor: pointer;
        }
        .box .menu .shang .you{
   
            height: 80px;
            width: 550px;
            float: right;
            margin-right: 220px;
            position: relative;
        }
        .box .menu .shang .you .fangdajing{
   
            width: 40px;
            height: 40px;
            background:url("img/3.png") no-repeat -163px -40px;
            float: right;
            margin-top: 20px;
            position: absolute;

            left:500px;
        }
        .box .menu .shang .you .sousuokuang{
   
            width: 500px;
            height: 40px;
            float: right;
            margin-top: 20px;

        }
        .box .menu .shang .you .sousuokuang .sousuo{
   
            width: 500px;
            height: 40px;
            float: right;
            border-radius

最低0.47元/天解锁文章