云计算第二次作业模仿小米商城页面

于 2024-04-01 13:12:50 发布
阅读量291 收藏
点赞数 3
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LwjIs666/article/details/137228929
版权
这篇文章详细解析了小米商城网站的HTML代码，展示了页面的头部(header)、顶部导航(top-nav)和主要内容(mid)的布局结构，包括左侧商品分类和右侧功能区的链接。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./8-index.css">
</head>
<body>
    <div class="header">
        <div class="content">
            <div class="header-left">
                <a href="#">小米商城</a>
                <span class="sep">|</span>
    
                <a href="#">小米澎拜OS</a>
                <span class="sep">|</span>
    
                <a href="#">IoT</a>
                <span class="sep">|</span>
    
                <a href="#">云服务</a>
                <span class="sep">|</span>
    
                <a href="#">天星数科</a>
                <span class="sep">|</span>
    
                <a href="#">有品</a>
                <span class="sep">|</span>
    
                <a href="#">小爱开放平台</a>            
                <span class="sep">|</span>
    
                <a href="#">资质证照</a>
                <span class="sep">|</span>
    
                <a href="#">协议规则</a>
                <span class="sep">|</span>
    
                <a href="#">下载APP</a>
            </div>
            <div class="header-right">
                <a href="#">登录</a>
                <span class="sep">|</span>
                <a href="#">注册</a> 
                <span class="sep">|</span>
                <a href="#">消息通知</a> 
                <span class="sep">|</span>
                <span class="shopping"><a href="#">购物车</a></span>
            </div>
        </div>
    </div>
    <div class="top-nav">
        <div class="content">
            <div class="top-nav-left"></div>
            <div class="top-nav-mid">
                <ul>
                    <li><a href="#">Xiaomi手机</a></li>
                    <li><a href="#">Redmi手机</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">平板</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">服务中心</a></li>
                    <li><a href="#">社区</a></li>                
                </ul>
            </div>
            <div class="top-nav-right">
                <from action="#">
                    <input type="text">
                    <span>搜索</span>
                </from>
            </div>
        </div>
    </div>
    <div class="mid">
        <div class="content">
            <div class="left">
                <ul>
                    <li><a rel="nofollow" href="#">手机</a></li>
                    <li><a rel="nofollow" href="#">电视</a></li>
                    <li><a rel="nofollow" href="#">家电</a></li>
                    <li><a rel="nofollow" href="#">笔记本平板</a></li>
                    <li><a rel="nofollow" href="#">出行穿戴</a></li>
                    <li><a rel="nofollow" href="#">耳机音响</a></li>
                    <li><a rel="nofollow" href="#">健康儿童</a></li>
                    <li><a rel="nofollow" href="#">生活箱包</a></li>
                    <li><a rel="nofollow" href="#">智能路由器</a></li>
                    <li><a rel="nofollow" href="#">电源配件</a></li>
                </ul>
            </div>
            <div class="right">
                <div class="e"><span class="iconfont icon-zuo"></div>
                <div class="f"><span class="iconfont icon-you"></div>
                <div class="g">
                    <ul>
                        <li><a rel="nofollow" href="#">&ensp;</a></li>
                        <li><a rel="nofollow" href="#">&ensp;</a></li>
                        <li><a rel="nofollow" href="#">&ensp;</a></li>
                        <li><a rel="nofollow" href="#">&ensp;</a></li>
                        <li><a rel="nofollow" href="#">&ensp;</a></li>
                        <li><a rel="nofollow" href="#">&ensp;</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>  
    <div class="zxia">
        <div class="content">
            <div class="xuanzhe">
                <ul>
                    <li><a rel="nofollow" href="#"><span class="iconfont icon-icon-test1"></span>保障范围</a></li>
                    <li><a rel="nofollow" href="#"><span class="iconfont icon-qiyetuangou-copy"></span>企业团购</a></li>
                    <li><a rel="nofollow" href="#"><span class="iconfont icon-Fnum"></span>F码通道</a></li>
                    <li><a rel="nofollow" href="#"><span class="iconfont icon-mifenka"></span>米粉卡</a></li>
                    <li><a rel="nofollow" href="#"><span class="iconfont icon-yijiuhuanxin"></span>以旧换新</a></li>
                    <li><a rel="nofollow" href="#"><span class="iconfont icon-huafeichongzhi"></span>话费充值</a></li>
                </ul>
            </div>
            <div class="zhanshi">
                <ul>
                    <li><a rel="nofollow" href="#"><img src="../小米/微信截图_20240401123856.png" alt=""></a></li>
                    <li><a rel="nofollow" href="#"><img src="../小米/微信截图_20240401123905.png" alt=""></a></li>
                    <li><a rel="nofollow" href="#"><img src="../小米/微信截图_20240401123915.png" alt=""></a></li>
                </ul>
            </div>
        </div>
    </div>
    </div>
    <div class="you">
        <a rel="nofollow" href="#"><span class="iconfont icon-shoujiapp"></span></a>
        <a rel="nofollow" href="#"><span class="iconfont icon-gerenzhongxin
            "></span></a>
        <a rel="nofollow" href="#"><span class="iconfont icon-shouhoufuwu"></span></a>
        <a rel="nofollow" href="#"><span class="iconfont icon-rengongkefu
            "></span></a>
        <a rel="nofollow" href="#"><span class="iconfont icon-gouwuche"></span></a>
    </div>
</body>
</html>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li{
    list-style: none;
}

a{
    text-decoration: none;
}
.content{
    width: 1226px;
    margin: 0 auto;
}

/*header开始*/
.header{
    height: 40px;
    background-color: #333;
}
.header .content{
    display: flex;
    justify-content: space-between;
}
.header-left{
    width: 769px;
    
}
.header-right{
    width: 200px;
    
    height: 40px;
}

.header .content a{
    font-size: 12px;
    color:#b0b0b0;
    line-height: 40px;
}
.header-left .sep{
    margin:0 3.6px;
}
.header .shopping{
    margin-left: 25px;
}
/*header结束*/
/*top-nav 开始*/
.top-nav{
    display: flex;
    height: 100px;
    background-color: #b0b0b0;
    overflow: hidden;
    line-height: 100px;
}
.top-nav .content{
    display: flex;
    justify-content: space-between;
}
.top-nav-left{
    width: 56px;
    height: 56px;
    background: url("https://tse2-mm.cn.bing.net/th/id/OIP-C.UJQB35Eju2-zSsIHGxndfgAAAA?rs=1&pid=ImgDetMain")no-repeat;
    background-size: 56px;
    margin-top: 20px;
}
.top-nav-mid ul{
    display: flex;
    justify-content: space-between;
    width: 700px;
    height: 100px ;
    line-height: 100px;
}

.top-nav-mid ul a{
    color:#333;
}
.top-nav-right{
    padding-top:25px;
    width: 296px;
    height: 100px;
    line-height: 100px;

}
.top-nav-right from{
    position: relative;
    width:296px;
    height: 50px;
}
.top-nav-right input{
    position: absolute;
    left:0;
    top: 0;
    width: 245px;
    height: 50px;
    vertical-align: middle;
    outline: none;
}
.top-nav-right span{
    display:inline-block;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    line-height: 50;
    border: 1px soild black;
    text-align: center;
    font-size: 24px;
}
/*top-nav结束*/
/*mid开始*/
.mid{
    width: 1226px;
    height: 460px;
    background: url("../小米/微信截图_20240330004214.png") no-repeat;
    background-size: 1226px 460px;
    margin: 0 auto;
   
  }
  .mid .content{
    position: relative;
  }
  .mid .content .left ul{
    width: 234px;
    height: 460px;
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    padding: 20px 0px;
    
  }
  .mid .content .left ul li{
   
    display: list-item;
    text-align: left;
  }
  .mid ul li a{
    width: 234px;
    height: 42px;
    display: block;
    height: 42px;
    line-height: 42px;
    position: relative;
    padding-left: 30px;
    float: left;
  }
  a{
    font-size: 12px; 
    text-decoration: none;
    color: inherit;
  }
  .mid .content .e{
    left: 234px;
    top: 230px;
    position: absolute;
  }
  .mid .content .f{
    right:0px;
    top: 230px;
    position: absolute;
  }
  .mid .content .g{
    box-sizing:inherit;
    right:30px;
    bottom: 20px;
    position: absolute;
  }
  .mid .content .g ul{
    display: flex;
    flex-direction: row;
  }
  .mid .content .g a{
    width: 10px;
    height: 10px;
  }
  .mid .content .g ul li{
    list-style: disc;
  }
  .mid .content .g ul li::marker {
    font-size: 15px;
  }
   
/*mid结束*/
   
/*zuoxia开始*/
  .zxia{
    margin-top: 15px;
  }
  .zxia .content .xuanzhe{
    background-color: rgb(95, 87, 80);
    float: left;
    line-height: 21px;
    font-size: 12px;
  }
   
  .zxia .content .xuanzhe ul{
    width: 234px;
    height: 170px;
    line-height: 18px;
    text-align: center;
  }
   
  .zxia .content .xuanzhe ul li{
    display: list-item;
    float: left;
    width: 70px;
    height: 82px;
    padding: 0px 3px;
    position: relative;
    text-align: center;
  }
  .zxia .content .xuanzhe li a{
    width: 70px;
    height: 64px;
    color: #ffff;
    display: block;
    font-size: 12px;
    line-height: 18px;
    padding-top: 18px;
    text-align: center;
  }
  .zxia .zhanshi{
    width: 978px;
    height: 170px;
    float: right;
  }
  .zxia .zhanshi ul{
    width: 978px;
    height: 170px;
    padding: 0;
    margin: 0;
  }
  .zxia .zhanshi ul li{
    float: left;
    margin-left: 15px;
  }
  .zxia .zhanshi ul li:nth-child(1) {
    margin-left: 0px;
  }
  .zxia .zhanshi ul li a{
    display: block;
    box-sizing: border-box;
  }
  .zxia .zhanshi ul li a img{
    height: 170px;
    width: 315px;
    text-align: left;
    position: relative;
  }
/*zxia结束*/
   
/*you开始*/
  .you{
    color: rgb(51, 51, 51);
    display: flex;
    position:fixed;
    right: 57px;
    bottom: 40px;
    z-index: 99;
    line-height: 21px;
    z-index: 99;
    flex-direction: column;
    flex-direction: row-reverse;
    flex-direction: column-reverse;
  }
  .you a{
    display: block;
    font-size: 14px;
    text-align: center;
    height: 42px;
    width: 27px;
    text-decoration-style: solid;
    position: relative;
  }
 /*结束*/

效果图

LwjIs666
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值