前端——小米商城静态实现
目标:
实现小米商城的静态实现
效果:
原版:
代码:
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;
}
很多细节没有做,刚开始正式接触前端这款,属实还非常菜.