练习记录-6
#6.8 小米主页完
主页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿小米主页</title>
<link rel="icon" href="images/favicon.ico">
<link rel="stylesheet" href="CSS/Reset.css">
<link rel="stylesheet" href="CSS/iconfont.css">
<link rel="stylesheet" href="CSS/XiaomiCSS.css">
</head>
<body>
<!--黑色导航条-->
<div class="nav-black">
<!--导航条内容-->
<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 style="margin-right: 7px"><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="nav-white">
<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></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>
<ul class="hdm">
<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>
<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><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>
<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_15500580021576_iymFx.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><img src="images/sj.png" alt=""></div>
<div><img src="images/sj.png" alt=""></div>
<div><img src="images/sj.png" alt=""></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>
</div>
</div>
</body>
</html>
CSS
/*<!--黑色导航条-->*//*<!--黑色导航条-->*//*<!--黑色导航条-->*/
.nav-black{
width: 100%;
height: 40px;
line-height: 40px; /*全体居中*/
background-color: #333;
color: #424242;
}
/*<!--导航条内容-->*/
.wrap{
width: 1226px;
height: 40px;
margin: 0 auto;
/*background-color: #333;*/
}
/*导航左侧块与左右侧列表左浮动*/
.left-ul,.left-ul>li,.right-ul>li{
float: left;
}
/*左侧右侧超链接左浮动*/
.left-ul a,.right-ul a{
color: #b0b0b0;
font-size: 12px;
font-family: "Arial Black";
}
/*左右侧列表超链接悬停*/
.left-ul a:hover,.right-ul a:hover{
color: #ffffff;
font-family: "Arial Black";
}
/*右侧列表块右浮动*/
.right-ul{
float: right;
}
/*购物车 字符图标*/
.cart i{
margin-right: 10px;
}
/*购物车*/
.cart{
width: 120px;
height: 40px;
background-color: #424242;
position: relative;
}
/*悬停购物车*/
.cart:hover{
background-color: #ffffff;
}
/*悬停购物车的字体*/
.cart:hover a{
color: orange;
}
/*购物车隐藏框*/
.hidden-cart{
width: 320px;
height:0;
/*height: 100px;*/
background-color: #ffffff;
position: absolute;
right: 0;
top:40px;
overflow: hidden; /*溢出部分隐藏*/
transition: 0.5s;
/*line-height: 100px;*/
z-index: 99;
}
/*购物车悬停时的隐藏框的显示*/
.cart:hover .hidden-cart{
height: 100px;
line-height: 100px;
box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
/*<!--白色导航条-->*//*<!--白色导航条-->*//*<!--白色导航条-->*/
.nav-white{
clear: both;
width: 100%;
height: 100px;
background-color: #ffffff;
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;
font-family: 'Arial Black';
}
/*列表内容的超链接悬停*/
.mi-nav>li>a:hover{
color: #ff6700;
}
/*列表*/
.mi-nav{
width: 980px;
}
/*搜索框*/
.mi-nav>.search{
float: right;
}
/*搜索框*/
.search{
margin-top:25px;
}
/*搜索框的框*/
.search>input{
width: 243px;
height: 48px;
border: 1px solid #e0e0e0;
float: left;
border-right: hidden;
outline: none; /*外部线条*/
transition:all .3s;
}
/*搜索框按钮*/
.search>button{
width: 50px;
height: 50px;
border: 1px solid #e0e0e0;
float: left;
background-color: #ffffff;
font-weight: bold;
font-size: 20px;
outline: none; /*外部线条*/
transition:all .3s;
}
/*搜索框按钮的悬停*/
.search>button:hover{
background-color:#ff6700;
color: #ffffff;
border-color:#ff6700;
}
/*搜索框的悬停全体变橙*/
.search>input:focus,.search>input:focus+button{
border-color:#ff6700;
}
/*小米手机li隐藏部分*/
.mi-nav-hidden{
width: 100%;
height: 0;
background-color: #fffdef;
position: absolute;
left:0;
top:100px;
transition: all 0.5s;
line-height: 230px;
font-size: 30px;
font-weight: bold;
color: #55a532;
overflow: hidden;
z-index: 88;
}
.mi-nav-hidden{
font-family: 'Arial Black';
}
/*小米手机li隐藏部分悬停时显示*/
.mi-nav>li:hover>.mi-nav-hidden{
height: 230px;
display: block;
box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
/*<!--轮播图与滑动门-->*//*<!--轮播图与滑动门-->*//*<!--轮播图与滑动门-->*/
/*这一总大块*/
.carousel{
width: 1226px;
height: 460px;
background-image: 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_15489036241498_XVwut.jpg");
} 50%{
background-image:url("../images/xmad_15488151829917_hENZU.jpg");
} 75%{
background-image:url("../images/xmad_15500560064953_Bgumq.jpg");
}100%{
background-image:url("../images/xmad_15481253648514_fHtzd.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; /*添加左内边距*/
/* 此处如果用margin则hover的时候高亮块会不全*/
}
.hdm li a{
color: #ffffff;
}
.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: 0px;
height: 460px;
/*background-color: #ffffff;*/
background-color: rgba(0,255,255,.5);
position: absolute;
top: 0;
left: 234px;
box-shadow: 5px 5px 10px rgba(0,0,0,.2);/*水平 垂直 模糊*/
display: none;
line-height: 460px;
font-size: 40px;
font-family: "Arial Black";
font-weight: bold;
text-align: center;
color: red;
overflow: hidden;
}
.hdm li:hover>.hdm-hidden{
width: 992px;
display: block;
}
/*两个轮播图的小三角*/
.prev,.next{
width: 41px;
height: 69px;
background-image: 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;
}
.ad>ul,.ad>img{
float: left;
}
.ad>img{
width: 316px;
height: 170px;
/*overflow: hidden;*/
}
.ad>ul{
width: 234px;
height: 170px;
background-color: #5f5750;
}
.ad>ul>li{
float: left;
width: 70px;
color: rgba(255,255,255,.7);
padding: 25px 0;
font-size: 12px;
margin-left: 4px ;
border-right:3px solid #665e57;
}
.ad>ul>li:nth-child(3),.ad>ul>li:nth-child(6){
border-right:0;
}
.ad .before{
border-right:3px solid #665e57;
}
.ad>img{
margin-left: 14.6px;
}
/*<!--小米闪购--><!--小米闪购--><!--小米闪购-->*/
/*闪购总*/
.sg{
margin-top: 160px;
}
.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;
font-weight: bolder;
float: left;
color: #e0e0e0;
}
.sg-box{
padding-top: 20px;
clear: both; /*浮动的清除!*/
}
.sg-box>div{
width: 234px;
height: 339px;
background-color: #fafafa;
/*background-color: #55a532;*/
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 #b3d4fc;
}
.sg-box>div:nth-child(4){
border-top:1px solid #990055;
}
.sg-box>div:nth-child(5){
border-top:1px solid #0077aa;
}
/*四个物品里面的那个图片*/
.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;
margin-left: 10px;
}
/*底下的长条图片*/
.ad-img{ /*复用*/
width: 100%;
margin: 40px 0;
}
/*<!--小木手机--><!--小木手机--><!--小木手机-->*/
.phone-container{
background-color: #f5f5f5;
/*background-color: #63a35c;*/
width: 100%;
padding-top: 20px;
margin-top: 550px;
overflow: hidden;
}
.phone-box>h2 {
margin-top: 6px;
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;
vertical-align: middle;
}
.item-left,.item-right{
height: 614px;
float: left;
}
.item-left{
width: 234px;
/*background-color: #0077aa;*/
transition: all .5s;
}
.item-left>img{
width: 100%;
}
.phone-item{
margin-top: 20px;
}
.item-right{
width: 992px;
/*background-color: #ff6700;*/
}
.item-right>div{
width: 234px;
height: 300px;
/*background-color: chartreuse;*/
float: left;
background-color: #fff;
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;
line-height: 20px;
font-size: 12px;
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);
}
字符图标
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1591277751034'); /* IE9 */
src: url('iconfont.eot?t=1591277751034#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPkAAsAAAAACBQAAAOYAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqDRIMOATYCJAMQCwoABCAFhG0HUhsKB1GUDkqK7EeBu6cI0BYDQ2nTLiAsJtsYP/k3/DuC7/d73XPf/YgqiQKUYIFlWEWFC0aTap1oNRvVqWbd2r+1lnlA9UJm/AMVFaFCv7+XpeNcrjC+TlepCsm+86+Xyf1USQoQG8DppFKTMEKYhLfr4JjpUjzPZnPJSCsc4ChaBxaRX0Ev9i+MP4xdeRGnCdTNGGvsnd3cQ19mTArEc28V9FMKuSY9VIVyycos3kIl1fSasAO88f8+/loGP0mpYMw8vj+N4OAH9mMd1P3XuXIREHM8Hdg6CqwCmXgsNVxrhYFVLXWlf9sGUFWVGKur+7j+/49YexFUzX95hEIiyozUJlhDwYIfmE0m+CHCKBNawhQJXsiKKhp4gfcMydQ4tyTllTiOSMOwAIyryqWfnUWdn0efnkaenCRZvIiAlrz77Kw8Sj+ykA7TWVJZtOkRrmRmBqVutFM6W5ouDZej0bzx+rGOkRS0jjnYOcyGWdxbOraFCnmL6kYx4c7BUa5MBGMexSn6csHOc+Xo7rOE+jEUT+ras0JbILBZkonUQUyQPr6v0Q+uroATPXB12Y8MIHQGGAD9V1cDD1Swvk6gmlSYRQU0sLYOqJAK31083exqIeZqHjoOUCoIHIv2uAmZQG4t1M21bzWXNW8ivNXVNSBLlLWR+TP+M7F/PEjaRvilS6nrRZjv0+SzejbgToMg4qHiIUIQ+0oIdfF4TeeXjH7wUPYQjjbyttz2fCVi7oNaIh4i07MFve0mlu2+zxLH7VZb7I0E9789HFIATE7AO2AASN/TfyZTGSlOfuUoX32P/pI7Dv+qjWup+PYvO+uzsBD+B7M188flZIjJT86cbShzljk2Q3Nmp/7MtIS6OibA0vc1hmjUOpVQNYohqZiGQtUsMmNXoaRhDcqqNqFuxfn6hgHWErmGZW8AQtc7JG0foND1gczYTygZ+4eybgCouwzxHRvmI3fozqSEIty8otd5Ziy1DIP0W7J1ojjJ9nGPxJV348LIJBs+p4x4jDnVk12KGDScp3gGzqMkybHgPJCWqRMp9mfGWWWfNNV5CkO7GFEEiaCNV8jTchnjlhfD3O/fIlYtoXBNUYXyEWEV3ztamJq3QJ4LslZF1/KcyhNrSQgDGSyXQmdARxIzkENF+bCAaGLK9fAV9s1QKdNWMJ1flD7hBqgzdsmRoogcJfV7ldlIBe+KR1dATWSpTPJ6q5/txD/X2hEA') format('woff2'),
url('iconfont.woff?t=1591277751034') format('woff'),
url('iconfont.ttf?t=1591277751034') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1591277751034#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-fangdajing:before {
content: "\e60b";
}
.icon-iconfontjiantou5:before {
content: "\e635";
}
.icon-gouwuche:before {
content: "\e610";
}
重制ResetCSS
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;}
效果图(新节)
其他部分见前几篇