html代码
<div class="root">
<div class="warp">
<div class="header">
<div class="header-content">
<a href="https://youpin.mi.com/app/shop/login?followup=https%3A%2F%2Fyoupin.mi.com%2F">登录</a>
<a href="https://account.xiaomi.com/pass/register?followup=https%3A%2F%2Fyoupin.mi.com%2F">注册</a>
<p id="header-line"></p>
<span class="moblie-icon"></span>
<a href="">下载APP</a>
</div>
</div>
</div>
<div class="container">
<div class="logo"> </div>
<div class="search-form">
<a class="search-icon"></a>
<div class="search-text">
<input type="text" value placeholder="冬日里不能错过的美食">
</div>
</div>
<div class="list">
<ul class="nav-list ">
<li data-src="/goodsbycategory?firstId=446&secondId=446&title=%E6%9C%89%E5%93%81%E6%8E%A8%E8%8D%90" data-index="0" class="first" style="width: 63px;">
<span class="item">有品推荐</span>
</li>
<li data-src="/goodsbycategory?firstId=115&secondId=115&title=%E5%AE%B6%E7%94%B5" data-index="1" class="" style="width: 63px;">
<span class="item">家电</span>
</li>
<li data-src="/goodsbycategory?firstId=140&secondId=140&title=%E9%A4%90%E5%8E%A8" data-index="3" class="" style="width: 63px;">
<span class="item">影音</span>
</li>
<li data-src="/goodsbycategory?firstId=140&secondId=140&title=%E9%A4%90%E5%8E%A8" data-index="3" class="" style="width: 63px;">
<span class="item">餐厨</span>
</li>
<li data-src="/goodsbycategory?firstId=93&secondId=93&title=%E6%9C%8D%E9%A5%B0" data-index="4" class="" style="width: 63px;">
<span class="item">服饰</span>
</li>
<li data-src="/goodsbycategory?firstId=116&secondId=116&title=%E6%99%BA%E8%83%BD" data-index="5" class="" style="width: 63px;">
<span class="item">智能</span>
</li>
<li data-src="/goodsbycategory?firstId=389&secondId=389&title=%E5%81%A5%E5%BA%B7" data-index="6" class="" style="width: 63px;">
<span class="item">健康</span>
</li>
<li data-src="/goodsbycategory?firstId=341&secondId=341&title=%E6%B4%97%E6%8A%A4" data-index="7" class="" style="width: 63px;">
<span class="item">洗护</span>
</li>
<li data-src="/goodsbycategory?firstId=91&secondId=91&title=%E6%97%A5%E6%9D%82" data-index="8" class="" style="width: 63px;">
<span class="item">日杂</span>
</li>
<li data-src="/goodsbycategory?firstId=310&secondId=310&title=%E9%A5%AE%E9%A3%9F" data-index="9" class="" style="width: 63px;">
<span class="item">饮食</span>
</li>
<li data-src="/goodsbycategory?firstId=88&secondId=88&title=%E5%B1%85%E5%AE%B6" data-index="10" class="" style="width: 63px;">
<span class="item">居家</span>
</li>
<li data-src="/goodsbycategory?firstId=288&secondId=288&title=%E6%89%8B%E6%9C%BA" data-index="11" class="" style="width: 63px;">
<span class="item">手机</span>
</li>
<li data-src="/goodsbycategory?firstId=335&secondId=335&title=%E7%AE%B1%E5%8C%85" data-index="12" class="" style="width: 63px;">
<span class="item">箱包</span>
</li>
<li data-src="/goodsbycategory?firstId=89&secondId=89&title=%E9%85%8D%E4%BB%B6" data-index="13" class="" style="width: 63px;">
<span class="item">配件</span>
</li>
<li data-src="/goodsbycategory?firstId=155&secondId=155&title=%E5%A9%B4%E7%AB%A5" data-index="14" class="" style="width: 63px;">
<span class="item">婴童</span>
</li>
<li data-src="/goodsbycategory?firstId=114&secondId=114&title=%E5%87%BA%E8%A1%8C" data-index="15" class="" style="width: 63px;">
<span class="item">出行</span>
</li>
<li data-src="/brands?id=83&title=%E5%93%81%E7%89%8C" data-index="16" class="" style="width: 63px;">
<span class="item">品牌</span>
</li>
</ul>
</div>
</div>
<a class="cart"></a>
css代码
.root{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 48px;
background: #333;
font-size: 14px;
position: relative;
z-index: 5;
}
.header-content{
display: block;
width: 340px;
float: right;
line-height: 48px;
}
.header,.header-content a, .header-content p,#header-line,.mobile-icon{
display: inline-block;
text-decoration: none;
color: #e7e7e7;
margin-left: 5px;
}
#header-line {
vertical-align: middle;
border-right: 1px solid #e7e7e7;
border-color: #666;
margin: 17px 3px 17px 6px;
height: 16px;
}
.moblie-icon{
display: inline-block;
width: 25px;
height: 25px;
background:url(../img/mobile.png);
background-size: 25px 25px;
position: relative;
top:7px;
}
.container {
width: 1080px;
margin: 0 auto;
height:130px;
text-align: center;
font-size: 12px;
margin-top: 15px;
}
.logo{
background: url(../img/logo.png) 50% no-repeat;
float: left;
width: 123px;
height: 45px;
background-size: 100%;
}
.search-form {
float: right;
position: relative;
right: 10px;
width: 246px;
padding-left: 35px;
padding-top: 18px;
height: 32px;
border-bottom: 1px solid #e7e7e7;
transition: all .3s;
}
.search-form .search-icon {
position: absolute;
left: -5px;
top: 23px;
display: block;
z-index: 2;
text-align: center;
outline: 0;
font-size: 14px;
background: url(../img/search.png) 40%;
width: 20px;
height: 20px;
background-size: 100%;
}
.search-text{
z-index: 1;
width: 245px;
height: 32px;
line-height: 32px;
}
.search-text input{
width: 100%;
border: none;
font-size: 14px;
outline: 0;
}
.cart{
float:right;
background: url(../img/cart.png);
width: 20px;
height: 20px;
background-size: 100%;
display: inline-block;
position: relative;
right:120px;
bottom: 108px;
}
.nav-list{
padding: 0;
height: 50px;
position: relative;
top: 30px;
}
.nav-list li {
margin-left: -3px;
height: 46px;
cursor: pointer;
display: inline-block;
}
ul,li {
list-style: none;
display: inline-block;
}
.nav-list li .item {
display: inline-block;
float: left;
margin-left: 0;
padding-bottom: 5px;
cursor: pointer;
color: #333;
font-size: 14px;
border-bottom: 2px solid #fff;
transition: all .6s;
padding-right: -50px;
}
.list{
display: block;
height: 50px;
position: relative;
margin-top: 0px;
z-index: 8;
}
效果图