目标:
实现小米商城的静态实现
效果:
原版:
代码:
html
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><title>小米商城 - 小米9 Pro、Redmi K30、小米MIX Alpha，小米电视官方网站</title><meta name="description" content="小米商城直营小米公司旗下所有产品，包括小米手机系列小米CC9 美图手机定制版、小米9、小米MIX Alpha，Redmi 红米系列Redmi K30、Redmi Note 8，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持"><meta name="keywords" content="小米,RedmiNote8Pro,小米cc9,Redmi K30,美图手机,小米MIX Alpha,小米商城"><link rel="stylesheet" href="CSS/index.css"><link rel="stylesheet" href="CSS/style.css">
</head>
<body><!--导航--><nav id="header"><div class="header-main"><div class="header-main-left"><ul><li><a href="">小米商城</a><span>|</span></li><li><a href="">MIUI</a><span>|</span></li><li><a href="">IoT</a><span>|</span></li><li><a href="">云服务</a><span>|</span></li><li><a href="">金融</a><span>|</span></li><li><a href="">有品</a><span>|</span></li><li><a href="">小爱开放平台</a><span>|</span></li><li><a href="">企业团购</a><span>|</span></li><li><a href="">资质证照</a><span>|</span></li><li><a href="">协议规则</a><span>|</span></li><li><a href="">下载app</a><span>|</span></li><li><a href="">Select Location</a></li></ul></div><div class="header-main-right"><ul><li><a href="">登录<span>|</span></a></li><li><a href="">注册<span>|</span></a></li><li><a href="">消息通知</a></li><li><img src="images/shopping.png" alt=""><a href="">购物车(0)</a></li></ul></div></div></nav><!--主体--><section id="main"><div class="main-top"><div class="main-top-header"><div class="main"><ul><li><a href="">小米手机</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="left"><div class="left-logo"><img src="images/logo.jpg" alt=""></div></div><div class="right"><form action="https://blog.csdn.net/KaiSarH"><label><input name="goods" type="text"><input type="submit" value="查询"></label></form></div></div><div class="main-top-body"><div class="main-top-body-left"><ul><li><a href="">手机 电话卡<span class="icon-uniE901"></span></a></li><li><a href="">电视 盒子<span class="icon-uniE901"></span></a></li><li><a href="">笔记本 显示屏 平板<span class="icon-uniE901"></span></a></li><li><a href="">家电 插线板<span class="icon-uniE901"></span></a></li><li><a href="">出行 穿戴<span class="icon-uniE901"></span></a></li><li><a href="">智能 路由器<span class="icon-uniE901"></span></a></li><li><a href="">电源 配件<span class="icon-uniE901"></span></a></li><li><a href="">健康 儿童<span class="icon-uniE901"></span></a></li><li><a href="">耳机 音响<span class="icon-uniE901"></span></a></li><li><a href="">生活 箱包<span class="icon-uniE901"></span></a></li></ul></div><div class="main-top-body-right"><div class="header-main-right-img"><img src="images/商品1.jpg" alt=""></div></div></div><div class="main-top-footer"><div><a href=""><span>小米秒杀</span></a><a href=""><span>企业团购</span></a><a href=""><span>F码通道</span></a><a href=""><span>米粉卡</span></a><a href=""><span>以旧换新</span></a><a href=""><span>话费充值</span></a></div><div><img src="images/商品①.jpg" alt=""></div><div><img src="images/商品②.jpg" alt=""></div><div><img src="images/商品③.jpg" alt=""></div></div></div><div class="main-content"><div class="main-content-cell1"><div class="main-content-cell1-top"><span>手机</span><a href="">查看全部</a></div><div class="main-content-cell1-left"><img src="images/手机.jpg" alt=""></div><div class="main-content-cell1-right"><div><img src="images/手机1.jpg" alt=""><span>Redmi K30</span><br><span>120Hz流速屏,全速热爱</span><br><span>1599元起</span></div><div><img src="images/手机2.jpg" alt=""><span>Redmi K30 5G</span><br><span>双模5G,120Hz流速屏</span><br><span>1999元起</span></div><div><img src="images/手机3.jpg" alt=""><span>小米CC9 Pro</span><br><span>1亿像素 五摄四闪</span><br><span>2799元起</span></div><div><img src="images/手机4.jpg" alt=""><span>小米9 Pro 5G</span><br><span>5G双卡全网通,骁龙855Plus</span><br><span>3699元起</span></div><div><img src="images/手机5.jpg" alt=""><span>Redmi 8</span><br><span>5000mAh超长续航</span><br><span>749元起</span><span>799元</span></div><div><img src="images/手机6.jpg" alt=""><span>Redmi 8A</span><br><span>5000mAh超长续航</span><br><span>699元起</span></div><div><img src="images/手机7.jpg" alt=""><span>Redmi Note 8Pro</span><br><span>6400万全场景四摄</span><br><span>1299元起</span><span>1399元</span></div><div><img src="images/手机8.jpg" alt=""><span>Redmi Note8</span><br><span>千元4800万四摄</span><br><span>999元起</span></div></div></div></div></section><!--尾部--><footer id="footer"><div class="footer-content"><div class="footer-content-top"><div class="footer-content-top-1"><div><img src="images/维修.png" alt=""><a href="">预约维修服务</a>></div><div><img src="images/7天退换.png" alt=""><a href="">7天无理由退货</a></div><div><img src="images/15天无理由退货.png" alt=""><a href="">15天免费换货</a></div><div><img src="images/礼物.png" alt=""><a href="">满150元包邮</a></div><div><img src="images/定位.png" alt=""><a href="">520余家售后网点</a></div></div><hr><div class="footer-content-top-2"><div class="footer-content-top-2-left"><div><ul><li>帮助中心</li><li><a href="">账户管理</a></li><li><a href="">购物指南</a></li><li><a href="">订单操作</a></li></ul></div><div><ul><li>服务支持</li><li><a href="">售后政策</a></li><li><a href="">自助服务</a></li><li><a href="">相关下载</a></li></ul></div><div><ul><li>线下门店</li><li><a href="">小米之家</a></li><li><a href="">服务网点</a></li><li><a href="">授权体验店</a></li></ul></div><div><ul><li>关于小米</li><li><a href="">了解小米</a></li><li><a href="">加入小米</a></li><li><a href="">投资者关系</a></li></ul></div><div><ul><li>关注我们</li><li><a href="">新浪微博</a></li><li><a href="">官方微信</a></li><li><a href="">联系我们</a></li></ul></div><div><ul><li>特色服务</li><li><a href="">F码查询</a></li><li><a href="">礼物码</a></li><li><a href="">防伪查询</a></li></ul></div></div><div class="footer-content-top-2-right"><span>400-100-5678</span><br><span>周一至周日 8:00-18:00</span><br><span>（仅收市话费)</span><br></div></div></div><div class="footer-content-middle"></div><div class="footer-content-bottom"><span>探索黑科技,小米为发烧而生!</span></div></div></footer>
</body>
</html>
CSS
/*公共样式---start*/
*{margin: 0;padding: 0;text-decoration: none;list-style: none;box-sizing: border-box;
}html{font-size: 10px;
}
body{font-size: 1.6rem;
}
/*公共样式---end*//*导航---start*/
nav{width: 100%;height: 4rem;background-color: #333;
}nav .header-main{height: 4rem;width: 122.6rem;/*background-color: red;*/margin: 0 auto;display: flex;font-size: 1.2rem;
}nav .header-main .header-main-left{/*background-color: yellow;*/flex:7.5;vertical-align: top;}
nav .header-main .header-main-left ul{display: flex;
}
nav .header-main .header-main-left ul li{margin: 1.2rem 0;
}
nav .header-main .header-main-left ul li span{margin: 1.2rem 0.5rem;color: #424242;
}
nav .header-main .header-main-left ul li a{color: #b0b0b0;
}nav .header-main .header-main-left ul li a:hover{color: white;
}nav .header-main .header-main-right{/*background-color: green;*/flex:2.5;
}
nav .header-main .header-main-right ul{display: flex;
}
nav .header-main .header-main-right ul li{margin: 1.2rem 0;
}nav .header-main .header-main-right ul li:last-child{margin: 0 auto;line-height: 4rem;padding: 0 2rem;background-color: #424242;
}
nav .header-main .header-main-right ul li:last-child img{height: 1.8rem;width: 1.8rem;
}nav .header-main .header-main-right ul li:last-child a{vertical-align: top;
}
nav .header-main .header-main-right ul li:last-child a:hover{color: darkorange;
}
nav .header-main .header-main-right ul li a{color: #b0b0b0;
}
nav .header-main .header-main-right ul li a:hover{color: white;
}
nav .header-main .header-main-right ul li span{margin: 1.2rem 0.5rem;color: #424242;
}/*导航---end*//*主题---start*/section{height: 100%;width: 100%;/*background-color: red;*/background: #f5f5f5;
}section .main-top{height: 75rem;width: 100%;
}section .main-top .main-top-header{height: 10rem;width: 122.6rem;min-width: 122.6rem;/*background-color: yellow;*/padding: 0 40rem 0 20rem;margin: 0 auto;
}section .main-top .main-top-header .main{width: 100%;height: 10rem;/*background-color: red;*/float: left;
}section .main-top .main-top-header .main ul li{float: left;
}
section .main-top .main-top-header .main ul li a{line-height: 10rem;margin: 0 1rem;color: #333;
}
section .main-top .main-top-header .main ul li a:hover{color: #ff6700;
}
section .main-top .main-top-header .left{width: 20rem;height: 10rem;/*background-color: green;*/float: left;margin-left: -100%;position: relative;left: -20rem;}section .main-top .main-top-header .left .left-logo{height: 100%;width: 100%;/*background-color: red;*/
}section .main-top .main-top-header .left .left-logo img{height: 6rem;width: 6rem;margin: 2rem 1rem;
}section .main-top .main-top-header .right{width: 40rem;height: 10rem;/*background-color: green;*/float: left;margin-left: -40rem;position: relative;right: -40rem;
}section .main-top .main-top-header .right form{height: 10rem;width: 50rem;/*background-color: red;*/
}
section .main-top .main-top-header .right form input:first-child{margin: 3rem 0 3rem 2rem;height: 5rem;width: 29rem;/*background-color: red;*/border: 1px solid #b0b0b0;
}
section .main-top .main-top-header .right form input:last-child{height: 5rem;width: 4rem;margin: 0;background-color: white;border: 1px solid #b0b0b0;
}section .main-top .main-top-header .right form input:first-child:hover,
section .main-top .main-top-header .right form input:last-child:hover{border: 1px solid #696969;
}section .main-top .main-top-body{height: 46rem;width: 122.6rem;/*background-color: red;*/margin: 0 auto;
}
section .main-top .main-top-body .main-top-body-left{height: 46rem;width: 23.6rem;padding: 2rem 0;background-color: rgba(105,101,101,.6);font-size: 14px;float: left;
}
section .main-top .main-top-body .main-top-body-left:hover{cursor: pointer;
}section .main-top .main-top-body .main-top-body-left ul{width: 100%;
}
section .main-top .main-top-body .main-top-body-left ul li{width: 100%;height: 4.2rem;line-height: 4.2rem;position: relative;
}
section .main-top .main-top-body .main-top-body-left ul li:hover{background-color: #ff6700;
}
section .main-top .main-top-body .main-top-body-left ul li a{color: white;padding-left: 3rem;
}
section .main-top .main-top-body .main-top-body-left ul li span{position: absolute;right: 1rem;top: 30%;
}
section .main-top .main-top-body .main-top-body-right{height: 46rem;width: 99rem;/*background-color: red;*/font-size: 14px;float: left;
}
section .main-top .main-top-body .main-top-body-right img{height: 46rem;width: 100%;top: 0;
}
section .main-top .main-top-footer{height: 17rem;width: 122.6rem;display: flex;margin: 0 auto;/*background-color: red;*/padding: 2rem 0 0 0 ;justify-content: space-between;
}
section .main-top .main-top-footer div{height: 15rem;width: 20rem;background-color: yellow;
}
section .main-top .main-top-footer div:nth-child(n+2){display: inline-block;height: 15rem;width: 31.6rem;
}section .main-top .main-top-footer div:nth-child(1){height: 15rem;width: 23.6rem;background-color: #5f5750;font-size: 1.2rem;
}section .main-top .main-top-footer div:nth-child(1) span{display: inline-block;height: 8.2rem;width: 7.6rem;color: #fff;padding-top: 2.5em;padding-left: 1rem;
}section .main-top .main-top-footer div:nth-child(n+2) img{height: 100%;width: 100%;
}section .main-content{height: 75rem;width: 122.6rem;/*background: red;*/margin: 0 auto;
}
section .main-content .main-content-cell1-top{height: 5.733rem;width: 100%;/*background-color: yellow;*/line-height: 5.733rem;position: relative;
}
section .main-content .main-content-cell1-top a{position: absolute;right: 0;color: #333;font-size: 1rem;
}
section .main-content .main-content-cell1-top a:hover{color: #ff6700;
}section .main-content .main-content-cell1-left{height: 61.4rem;width: 23.4rem;float: left;
}
section .main-content .main-content-cell1-left img{height: 100%;width: 100%;
}section .main-content .main-content-cell1-right{height: 61.4rem;width: 99.2rem;/*background-color: red;*/float: left;display: flex;flex-wrap: wrap;
}
section .main-content .main-content-cell1-right div{height: 30rem;width: 23.4rem;margin: 0 0 1.4rem 1.4rem;/*background-color: yellow;*/text-align: center;
}
section .main-content .main-content-cell1-right div img{height: 16rem;width: 16rem;margin: 3rem 3.7rem 3rem 3.7rem;
}
section .main-content .main-content-cell1-right div span:nth-of-type(1){font-size: 1.4rem;color: #333
}
section .main-content .main-content-cell1-right div span:nth-of-type(2){font-size: 1.2rem;color: #b0b0b0;/*color: red;*/
}
section .main-content .main-content-cell1-right div span:nth-of-type(3){font-size: 1.2rem;color: #ff6700;
}
section .main-content .main-content-cell1-right div span:nth-of-type(4){font-size: 1.2rem;color: #b0b0b0;text-decoration: line-through
}footer{height: 100%;width: 100%;
}
footer .footer-content{height: 100rem;width: 122.6rem;margin: 0 auto;/*background-color: red;*/
}
footer .footer-content .footer-content-top{height: 27.2rem;width: 100%;/*background-color: yellow;*/
}
footer .footer-content .footer-content-top .footer-content-top-1{height: 8rem;width: 100%;/*background-color: green;*/display: flex;justify-content:space-around
}
footer .footer-content .footer-content-top .footer-content-top-1 div{height: 8rem;line-height: 8rem;
}footer .footer-content .footer-content-top .footer-content-top-1 div a{color: #616161;font-size: 1.3rem;
}
footer .footer-content .footer-content-top .footer-content-top-1 div img{height: 2rem;width: 2rem;
}
footer .footer-content .footer-content-top hr{color: #616161;
}
footer .footer-content .footer-content-top .footer-content-top-2{height: 19.2rem;width: 70%;position: relative;/*background-color: red;*/
}
footer .footer-content .footer-content-top .footer-content-top-2-left{display: flex;justify-content: space-between;
}
footer .footer-content .footer-content-top .footer-content-top-2-left ul li:nth-child(1){height: 8rem;line-height: 8rem;font-size: 1.4rem;color: #424242;margin-left: 0.5rem;
}
footer .footer-content .footer-content-top .footer-content-top-2-left ul li:nth-child(2),
footer .footer-content .footer-content-top .footer-content-top-2-left ul li:nth-child(3),
footer .footer-content .footer-content-top .footer-content-top-2-left ul li:nth-child(4){height: 3rem;font-size: 1rem;line-height: 3rem;margin-left: 0.5rem;
}
footer .footer-content .footer-content-top .footer-content-top-2-left ul li a{color:#757575;
}
footer .footer-content .footer-content-top .footer-content-top-2-right{text-align: center;position: absolute;width: 100%;left : 67rem;top: 7rem;
}
footer .footer-content .footer-content-top .footer-content-top-2-right span:first-child{font-size: 1.8rem;color: #ff6700;
}
footer .footer-content .footer-content-top .footer-content-top-2-right span:nth-child(3),
footer .footer-content .footer-content-top .footer-content-top-2-right span:nth-child(5){font-size: 1.2rem;color:#757575;
}.footer-content-bottom{text-align: center;
}
.footer-content-bottom span{color: #cdcdcd;font-size: 2rem;
}
很多细节没有做,刚开始正式接触前端这款,属实还非常菜.
