小米官网header部分解析"/>
小米官网header部分解析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--购物车部分重点代码分析
.cart-list{/*默认跟父元素左左对齐*//*然后设置right0像素*/
width: 316px;
height: 0px;
box-shadow: 0 2px 10px rgba(0,0,0,.15);
position: absolute;
right: 0px;/*相对于已定位的父元素定位*/
top: 40px;
text-align: center;
line-height: 100px;
color: #424242;
overflow: hidden;
}
.cart:hover>.cart-list{/*鼠标悬停的时候把高度给出来，没悬停的时候是0*/
height: 108px;
transition: all .3s linear;
}
-->
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}
.header{/*头部是父元素*/
width: 100%;
height: 40px;
background-color: #333;
line-height: 40px;/*给父元素设置高度*/
font-size: 12px;/*父元素给所有字体的大小为12像素*/
}
.header a{
color: #b0b0b0;
}
.header a:hover{
color: #fff;
}
.wrap{
width: 1226px;
height: 40px;
font-size: 12px;
margin: 0 auto;
}
.header-left{
float: left;
}
.header-right{
float: right;
}
.header-right .cart{
width: 120px;
height: 40px;
background-color: #424242;
text-align: center;
margin-left: 15px;
}
.header li{/**/
float: left;
position: relative; /*相对于li定位，这里是父元素*/
}
.header span{
color: #424242;
padding: 0 3.6px;
}
.download{
width: 124px;
height: 0px;
overflow: hidden;
box-shadow: 0 1px 5px #aaa;
text-align: center;
font-size: 14px;
color: #333;
position: absolute;
top: 40px;
right: -55%;
}
.download img{/*溢出部分的图片*/
width: 90px;
margin: 18px 16px;
}
.download p{/*溢出部分的文字*/
color: #333;
line-height: 0.1px;
font-size: 16px; font-family: 幼圆;
font-weight: bold;text-align: center;
}
.cart{
position: relative;
}
.cart a:hover{
color: #FF6700;
}
.header-left>li:hover>.download{/*当鼠标悬停到header-left上时，download的高度为158px，从上到下图片，文字，还有高度撑开，.3s秒匀速撑开*/
height: 158px;
transition: all .3s linear;
}
.cart-list{/*默认跟父元素左左对齐*//*然后设置right0像素*/
width: 316px;
height: 0px;
box-shadow: 0 2px 10px rgba(0,0,0,.15);
position: absolute;
right: 0px;/*相对于已定位的父元素定位*/
top: 40px;
text-align: center;
line-height: 100px;
color: #424242;
overflow: hidden;
}
.cart:hover>.cart-list{/*鼠标悬停的时候把高度给出来，没悬停的时候是0*/
height: 108px;
transition: all .3s linear;
}
.cart:hover{
background-color: #fff;
}
.cart:hover a{/*实现了共用*/
color: #FF6700;
}
</style>
</head>
<body>
<div class="header">
<div class="wrap">
<ul class="header-left">
<li><a href="#">小米商场</a><span>|</span></li>
<li><a href="#">MIUI</a><span>|</span></li>
<li><a href="#">LOT</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>
<!--首先我们找到下载app的列表项目，定义一个div用来装二维码图片，然后发现文档流偏移，父元素被撑开，找到主元素，和子元素，
设置高度，left，和margin，download里面来一个a，再来一个图和p,然后设置图片的宽高-->
<li>
<a href="#">下载app</a><span>|</span>
<div class="download">
<a href="#">
<img data-lazy-src="img/二维码.png" />
<p>小米商城app</p>
</a>
</div>
</li>
<li><a href="#">智能生活</a><span>|</span></li>
<li><a href="#">select location</a><span>|</span></li>
</ul>
<ul class="header-right">
<li><a href="#">登录</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">消息通知</a></li>
<!--然后我们发现购物车部分距离不一样，现在开始设置li为cart-->
<li class="cart">
<a href="#">购物车(0)</a>
<div class="cart-list">
<p>购物车中还没有商品，赶紧选购吧！</p>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
更多推荐
小米官网header部分解析
发布评论