大腿绕道,给小白学习用,上代码
<div class="list">
<div class="infor">
<ul class="left">
<li><a href="">限时特价</a></li>
<li><a href="">热门推荐</a></li>
</ul>
<ul class="right">
<li><a href="" class="selected">推荐</a></li>
<li><a href="">折扣</a></li>
<li><a href="">价格</a></li>
</ul>
</div>
</div>
css样式
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
.list {
width: 910px;
float: left;
margin-left: 10px;
margin-top: 10px;
}
.infor {
height: 45px;
line-height: 45px;
background-color: #eee;
}
.left {
display: inline-block;
float: left;
}
.left li {
display: inline-block;
width: 150px;
height: 43px;
line-height: 43px;
text-align: center;
}
.left li:first-child,.left li:hover {
background-color: #fff;
border-top: 2px solid #458b00;
position: relative;
left: 1px;
}
.left a {
color: #666;
}
.right {
display: inline-block;
padding: 0 20px 0 0;
float: right;
}
.right li {
display: inline-block;
width: 60px;
height: 45px;
line-height: 45px;
text-align: center;
}
.right li a {
padding: 3px 8px;
color: #666;
}
.right li a.selected,.right li a:hover {
background-color: #458b00;
color: #fff;
}
妥了,十分钟搞定,下班咯