实战项目 仿写小米商城 网页框架
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>小米商城 - 小米MIX 3、红米Note 7、小米8、小米电视官方网站</title>
<link rel="icon" href="images/favicon.ico"/>
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/xiaomiStyle.css"/>
<link rel="stylesheet" href="css/iconfont.css"/>
</head>
<body>
<!--黑手导航条开始-->
<div class="black_nav">
<div class="wrap">
<ul class="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 Region</a><span></span>|</li>
</ul>
<ul class="right_ul">
<li><a href="#">登陆</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">消息通知</a></li>
<li class="cart">
<a href="#"><i class="iconfont"></i>购物车(0)</a>
<div class="hidden_cart">购物车中还没有商品，赶紧选购吧！</div>
</li>
</ul>
</div>
</div>
<!--黑手导航条结束-->
<!--白色导航栏开始-->
<div class="white_nav">
<div class="wrap">
<img src="images/logo-footer.png" alt="" class="logo"/>
<ul class="mi_nav">
<li>
<a href="#">小米手机</a>
<div class="mi_nav_hidden"></div>
</li>
<li><a href="#">红米</a> <div class="mi_nav_hidden"></div></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>
<li><a href="#">社区</a></li>
<li class="search">
<input type="text"/>
<button class="iconfont"></button>
</li>
</ul>
</div>
</div>
<!--白色导航栏结束-->
<!--轮播图和滑动门开始-->
<div class="wrap carousel">
<div class="hdm">
<ul>
<li>
<a href="#">手机 电话卡</a><i class="iconfont"></i>
<div class="hdm_hidden"></div>
</li>
<li>
<a href="#">电视 盒子</a><i class="iconfont"></i>
<div class="hdm_hidden"></div>
</li>
<li><a href="#">笔记本 平板</a><i class="iconfont"></i></li>
<li><a href="#">家电 插线板</a><i class="iconfont"></i></li>
<li><a href="#">家电 插线板</a><i class="iconfont"></i></li>
<li><a href="#">家电 插线板</a><i class="iconfont"></i></li>
<li><a href="#">家电 插线板</a><i class="iconfont"></i></li>
<li><a href="#">家电 插线板</a><i class="iconfont"></i></li>
<li><a href="#">家电 插线板</a><i class="iconfont"></i></li>
<li><a href="#">家电 插线板</a><i class="iconfont"></i></li>
</ul>
</div>
<div class="prev"></div>
<div class="next"></div>
</div>
<!--轮播图和滑动门结束->
<!--小米小广告位开始-->
<div class="wrap ad">
<ul>
<li class="before"><i class="iconfont"></i><br/>选购手机</li>
<li class="before"><i class="iconfont"></i><br/>选购手机</li>
<li class="before"><i class="iconfont"></i><br/>选购手机</li>
<li><i class="iconfont"></i><br/>选购手机</li>
<li><i class="iconfont"></i><br/>选购手机</li>
<li><i class="iconfont"></i><br/>选购手机</li>
</ul>
<img src="images/xmad_15500580021576_iymFx.jpg" alt=""/>
<img src="images/xmad_15410029988871_TdzPQ.jpg" alt=""/>
<img src="images/xmad_1550022313197_PMtDb.jpg" alt=""/>
</div>
<!--小米小广告位结束-->
<!--小米闪购开始-->
<div class="wrap sg">
<div>
<h2>小米闪购</h2>
<div class="sg_arrow">
<span><</span>
<span>></span>
</div>
</div>
<div class="sg_box">
<div><img src="images/sj.png" alt=""/> </div>
<div class="sg_item">
<img src="images/pms_1538031692.35815325!220x220.jpg" alt=""/>
<h4>米家只能家庭家居看护套装</h4>
<p>智能家庭家具</p>
<span>259元<s>296元</s></span>
</div>
<div class="sg_item"><img src="images/pms_1538031692.35815325!220x220.jpg" alt=""/>
<h4>米家只能家庭家居看护套装</h4>
<p>智能家庭家具</p>
<span>259元<s>296元</s></span></div>
<div class="sg_item"><img src="images/pms_1538031692.35815325!220x220.jpg" alt=""/>
<h4>米家只能家庭家居看护套装</h4>
<p>智能家庭家具</p>
<span>259元<s>296元</s></span></div>
<div class="sg_item"><img src="images/pms_1538031692.35815325!220x220.jpg" alt=""/>
<h4>米家只能家庭家居看护套装</h4>
<p>智能家庭家具</p>
<span>259元<s>296元</s></span></div>
</div>
<img src="images/xmad_15500232485691_uYPkv.jpg" alt="" class="ad_img"/>
</div>
<!--小米闪购结束-->
<!--手机开始-->
<div class="phone_container">
<div class="wrap">
<div class="phone_box">
<h2>手机 <a href="#">查看全部 <i class="iconfont"></i></a></h2>
</div>
<div class="phone_item">
<div class="item_left"><img src="images/xmad_1544580545953_UvEXK.jpg" alt=""/></div>
<div class="item_right">
<div>
<b>新品</b>
<img src="images/pms_1545457703.71734471!220x220.png" alt=""/>
<h4>米家只能家庭家居看护套装</h4>
<p>智能家庭家具</p>
<span>259元<s>296元</s></span>
</div>
<div> <b>新品</b>
<img src="images/pms_1545457703.71734471!220x220.png" alt=""/>
<h4>米家只能家庭家居看护套装</h4>
<p>智能家庭家具</p>
<span>259元<s>296元</s></span></div>
<div> <b>新品</b>
<img src="images/pms_1545457703.71734471!220x220.png" alt=""/>
<h4>米家只能家庭家居看护套装</h4>
<p>智能家庭家具</p>
<span>259元<s>296元</s></span></div>
<div> <b>新品</b>
<img src="images/pms_1545457703.71734471!220x220.png" alt=""/>
<h4>米家只能家庭家居看护套装</h4>
<p>智能家庭家具</p>
<span>259元<s>296元</s></span></div>
<div> <b>新品</b>
<img src="images/pms_1545457703.71734471!220x220.png" alt=""/>
<h4>米家只能家庭家居看护套装</h4>
<p>智能家庭家具</p>
<span>259元<s>296元</s></span></div>
<div> <b>新品</b>
<img src="images/pms_1545457703.71734471!220x220.png" alt=""/>
<h4>米家只能家庭家居看护套装</h4>
<p>智能家庭家具</p>
<span>259元<s>296元</s></span></div>
<div> <b>新品</b>
<img src="images/pms_1545457703.71734471!220x220.png" alt=""/>
<h4>米家只能家庭家居看护套装</h4>
<p>智能家庭家具</p>
<span>259元<s>296元</s></span></div>
<div> <b>新品</b>
<img src="images/pms_1545457703.71734471!220x220.png" alt=""/>
<h4>米家只能家庭家居看护套装</h4>
<p>智能家庭家具</p>
<span>259元<s>296元</s></span></div>
</div>
</div>
<img src="images/xmad_15486596829568_opVwS.jpg" alt="" class="ad_img"/>
</div>
</div>
<!--手机结束-->
</body>
</html>
CSS样式表
reset
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td{margin: 0;padding: 0;}
body {padding:0;margin:0;text-align:center;color:#333;font-size:14px;font-family:"宋体", arial;}
li{list-style-type:none;}
a{text-decoration: none;}
img,input{border:none;vertical-align:middle;}
iconfont
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1550044414267'); /* IE9 */
src: url('iconfont.eot?t=1550044414267#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAW0AAsAAAAACmAAAAVoAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHgqHeIZqATYCJAMUCwwABCAFhG0HYRv7CBEVpPGR/RxwN4PLn5OikqJl24I+W5mhkR5JmZm5g+f/136/zz13hHmIN7XoSVQbnkS7WaQ0CAlCYpHEo3wL9c8QnnaDks1JR7Ed1A5iOuihgXrIwQvY2hT9hxERiiWxXX56Rn6s0JDvEFo2AA6OmS6aNrA82mwuFbfIxtLNBjjBAUW01Rf+2/M/2aP+Up7FhKNS4bf5MAQISKcUafTwCwM+FqSXvGw5PZUFfM+OreEIvskFFlqRC8CDbw45L1BxLn9f/jAIPxgcBU3snXVPArVfRf9Dxf5jxHACUI7nBXbLQIFSwIJMg/5RVOtKJQYQ2nqdux8lmK+1ZxX/Q0o7rFO+Rx3jn+eCMDqn1hYsfK1RMRS+dkSwxMm2F0Tide4HmBKd/YIAiAdpB8gNQObcMf9Kg+IliBlwm2lxyPDKCwoGUYmKiRt2zgxg/dPrbbtmB9lDc7tZwWbxGyZ6upGw/j2Q8JDIBoBNawi3zaan0BgkA2qb7O3lYM+pw/UeVLqDVMln59CzKzcQiIHhnSHoiAZ1zrLn4A2oJNVSOYNN6tpAL0bvGEXWN0tbJDnYyWuTMfwKDrWd09GbPnJEax6Xm5djDBkuUa5zx4/rOi7Wf9x1agNxlSiPh6BhBhQWJgi6hiLaO+BE1oYuyajwcHZnXmKCEJNVONnXRRkcwpH1XtkhMgzHETIFJQg6QYVTZBJOMigldb04HgWx20e0s47HybDxBU7TnJrBpsPbOzv7ujo6uhOH7MhBPSJt7VgHTD0gvHPULhxB2rsBNoNKdmEfQV/xpbso3DEl26q7X5qEfvcjzUc9BloKPbKmW/4Qh4R9z8OI5aD5mR72yB92l/tH+tZ+d2/UyssIRfMa6yAOy9LIqt6ogeE/8VSpGn+RgJOeELqPmYpuvKrtJKlgz+iMwjhU99AAmQOVMcPupaVuQ3uIVEjNhjFCvL08D1tUSsW580Gkvc6SybKq21FYmMxc254fFM+0rOuQc00TEm8WE+Qf8UHjzKM73VZzj46iT4qPkq4q3r4iwWyEOnSDPlp+TeN6PWNlmcSKen5EFdxX6yh6p/oo0HNtqpoEqmpjg3gzd+r4Fj2gpT8Q3yOAZ990uzqdr06ENovO8iWUmtOHWpxM+ZQOBpj/VjTaCX1IsQVf5Z2mIeIu1x7VqybryFRrWLoy5VN0NvdqWQULpymjjXfTSnmq+P9PFalayXGxBUFlXEOJnEGcgUNZZbxl3MMMfQfO4OGyLs1cVLk5gmP5s7tqrUIgw2ZbP8HCNQ6HbKM07rgv5stVK/35VGVUfR+67XPpTpPsJHwv9R4cDAlNesFvPYNpL95jdWuPhUTdPqyMjH2rkDN0p/M6adjoKDiLHrFVA/mX9f2gDAh/hjP6Vt3yLKZHtFLyGvSBuVEc1x9m+Zs7iP/ftYXxInZf+eFPc+r58O2/Qtbfh1nQz4n/XgYEvqcJyx3+P51NQDnHAjUKqaKKFgKHbbysAQKcghCgcCKf4xhTWiv/BsYUCwaPNFB8comWWgoOEcrAxacGAkpoWR4hiRUUsVFAMbsZCPFcgSGWW1DiuSNa6gc4pPIPXOKFCwKGRWLDCPkicerAOAmuMP/ALZQ1cYlS5Vc0JU7sqiX3iby7FPRNF5YumJHHmLK/zSCiQTMlOGfHYYwEG5PHRRorso1tq6EnNQulSnFgnARXmH/gFsqatxYV/fwVTYkT19S9SD6Rd9c+9E3XgnjB3KruWrrvbzOI6HKYZkpwzr0YcZ5gg/t5XKSxPbLb2BbNdFts5jemx1j5e2mILnLEiIoVR1zqOSqfslgMlE0tyHp9S/6gm0m9XnG1d1Ouvy5HgQayVRU=') format('woff2'),
url('iconfont.woff?t=1550044414267') format('woff'),
url('iconfont.ttf?t=1550044414267') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1550044414267#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-gouwuchekong:before {
content: "\f0179";
}
.icon-tengxunweibo:before {
content: "\f01b0";
}
.icon-qqkongjian:before {
content: "\e674";
}
.icon-xinlangweibo:before {
content: "\e67a";
}
xiaomiStyle
/*黑色导航条开始*/
.black_nav{
width: 100%;
height: 40px;
line-height: 40px;
background-color: #333;
color: #424242;
}
.wrap{
width: 1226px;
margin: 0 auto;
}
.left_ul,.left_ul>li,.right_ul>li{
float: left;
}
.left_ul a,.right_ul a{
color: #b0b0b0;
font-size: 12px;
margin: 0 5px;
}
.left_ul a:hover,.right_ul a:hover{
color: #fff;
}
.right_ul{
float: right;
}
.cart i{
margin-right: 5px;
}
.cart{
width: 120px;
height: 40px;
background-color: #424242;
position: relative;
}
.cart:hover{
background-color: #fff;
}
.cart:hover a{
color:orange;
}
.hidden_cart{
width: 320px;
height: 0;
background-color: #fff;
position: absolute;
right: 0;
top:40px;
overflow: hidden;
transition: all .5s;
z-index: 88;
/*line-height: 100px;*/
}
.cart:hover .hidden_cart{
height: 100px;
line-height: 100px;
box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
/*黑色导航条结束*/
/*白色导航栏开始*/
.white_nav{
clear: both;
width: 100%;
height: 100px;
line-height: 100px;
position:relative;
}
.logo,.mi_nav{
float: left;
}
.mi_nav>li{
float: left;
}
.logo{
margin-top: 21.5px;
margin-right: 190px;
}
.mi_nav>li>a{
color: #757575;
font-size: 16px;
margin-right: 20px;
}
.mi_nav>li>a:hover{
color: #ff6700;
}
.mi_nav{
width: 980px;
}
.mi_nav>.search{
float: right;
}
.search>input{
width: 243px;
height: 48px;
border: 1px solid #e0e0e0;
float: left;
border-right: none;
outline: none;
transition: all .3s;
}
.search{
margin-top: 25px;
}
.search>button{
width: 50px;
height: 50px;
border: 1px solid #e0e0e0;
float: left;
background-color: #fff;
font-weight: bold;
outline: none;
font-size: 20px;
transition: all .3s;
}
.search>button:hover{
background-color: #ff6700;
color: #fff;
border-color: #ff6700;
}
.search>input:focus,.search>input:focus+button{
border-color: #ff6700;
}
.mi_nav_hidden{
width: 100%;
height: 230px;
background-color: red;
position: absolute;
left: 0;
top: 100px;
display: none;
}
.mi_nav>li:hover>.mi_nav_hidden{
display: block;
}
/*白色导航栏结束*/
/*轮播图和滑动门开始*/
.carousel{
width: 1226px;
height: 460px;
background: url("../images/xmad_15481253648514_fHtzd.jpg");
background-size: cover;
-webkit-animation:carousel 10s infinite ;
position: relative;
}
@-webkit-keyframes carousel {
0%{
background-image: url("../images/xmad_15481253648514_fHtzd.jpg");
} 25%{
background-image: url("../images/xmad_15486597522208_HOEjJ.jpg");
} 50%{
background-image: url("../images/xmad_15489036241498_XVwut.jpg");
} 75%{
background-image: url("../images/xmad_15500560064953_Bgumq.jpg");
}100%{
background-image: url("../images/xmad_15488151829917_hENZU.jpg");
}
}
.hdm{
width: 234px;
height: 460px;
background-color: rgba(0,0,0,.5);
padding: 20px 0;
box-sizing: border-box;
position: relative;
}
.hdm li{
height: 42px;
line-height: 42px;
text-align: left;
padding-left: 30px;
}
.hdm li a{
color: #fff;
}
.hdm li:hover{
background-color: #ff6700;
}
.hdm i{
float: right;
margin-right: 30px;
color: rgba(255,255,255,.5);
font-weight: bold;
font-size: 20px;
}
.hdm_hidden{
width: 992px;
height: 460px;
background-color: #fff;
position: absolute;
top: 0;
left: 234px;
box-shadow: 5px 5px 10px rgba(0,0,0,.2);
display: none;
z-index: 66;
}
.hdm li:hover>.hdm_hidden{
display: block;
}
.prev,.next{
width: 41px;
height: 69px;
background: url("../images/icon-slides.png");
position: absolute;
top:50%;
margin-top: -34.5px;
cursor: pointer;
}
.prev{
left: 234px;
background-position: -83px 0;
}
.next{
right: 0;
background-position: -124px 0;
}
.prev:hover{
background-position: 0 0;
}
.next:hover{
background-position: -42px 0;
}
/*轮播图和滑动门结束*/
/*小米小广告位开始*/
.ad{
margin-top: 15px;
overflow: hidden;
}
.ad>ul,.ad>img{
float: left;
}
.ad>img{
width: 316px;
height: 170px;
}
.ad>ul{
width: 234px;
height: 170px;
background-color: #5f5750;;
}
.ad>ul>li{
float: left;
width: 70px;
color: rgba(255,255,255,0.7);
padding: 25px 0;
font-size: 12px;
border-right: 3px solid #665e57;
}
.ad>ul>li:nth-child(3),.ad>ul>li:nth-child(6){
border-right:0;
}
.ad .before{
border-bottom:3px solid #665e57;
}
.ad>img{
margin-left: 14.6px;
}
/*小米小广告位结束*/
/*小米闪购开始*/
.sg{
margin-top: 40px;
}
.sg h2{
text-align: left;
float: left;
font-weight: normal;
}
.sg_arrow{
float: right;
}
.sg_arrow>span{
width: 36px;
height: 24px;
border: 1px solid #e0e0e0;
display: inline-block;
line-height: 24px;
float: left;
font-weight: bold;
color:#e0e0e0;
}
.sg_box{
clear: both;
padding-top: 20px;
}
.sg_box>div{
width: 234px;
height: 339px;
background-color: #fafafa;
float: left;
margin-right: 14px;
}
.sg_box>div:last-child{
margin-right: 0;
}
.sg_box>div:first-child{
border-top:1px solid #e53935;
}
.sg_box>div:nth-child(2){
border-top:1px solid #ffac13;
}
.sg_box>div:nth-child(3){
border-top:1px solid #83c44e;
}.sg_box>div:nth-child(4){
border-top:1px solid #2196f3;
}.sg_box>div:nth-child(5){
border-top:1px solid #83c44e;
}
.sg_item>img,.item_right img{
width: 160px;
margin: 30px 0 25px 0;
}
.sg_item>h4,.item_right h4{
font-weight: normal;
margin-bottom: 10px;
}
.sg_item>p,.item_right p{
font-size: 12px;
color: #b0b0b0;
margin-bottom: 20px;
}
.sg_item>span,.item_right span{
color: #ff6700;
}
.sg_item>span>s,.item_right s{
color: #b0b0b0;
display: inline-block;
margin-left: 10px;
}
.ad_img{
width: 100%;
margin: 40px 0;
}
/*小米闪购结束*/
/*手机开始*/
.phone_container{
width: 100%;
background-color: #f5f5f5;
padding-top: 40px;
overflow: hidden;
}
.phone_box>h2{
text-align: left;
font-weight: normal;
}
.phone_box>h2>a{
float: right;
font-size: 16px;
color: #333333;
}
.phone_box>h2>a:hover{
color: #ff6700;
}
.phone_box>h2 i{
font-size: 20px;
}
.item_left,.item_right{
height: 614px;
float: left;
}
.item_left{
width: 234px;
transition: all .5s;
}
.item_left>img{
width: 100%;
}
.phone_item{
margin-top: 20px;
}
.item_right{
width: 992px;
}
.item_right>div{
width: 234px;
height: 300px;
background-color: #fff;
float: left;
margin-left: 14px;
margin-bottom: 14px;
position:relative;
transition: all .5s;
}
.item_right b{
width: 64px;
height: 20px;
background-color: #83c44e;;
display: inline-block;
color: #fff;
font-weight: normal;
font-size: 12px;
line-height: 20px;
position: absolute;
top: 0;
left: 50%;
margin-left: -32px;
}
.item_left:hover,.item_right>div:hover{
transform: translate(0,-5px);
box-shadow: 0 15px 30px rgba(0,0,0,.2);
}
/*手机结束*/