抽屉新热榜头部实现
Posted startl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了抽屉新热榜头部实现相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>chouti</title>
</head>
<style>
* body{
margin:0;
padding: 0;
}
.head-box{
background-color:#2459a2;
height: 44px;
width: 100%;
position:fixed;
top:0;
left:0;
}
.head-content{
background-color: #2459a2;
margin:0 auto;/*居中*/
width: 1194px;
height:44px;
line-height: 44px;
}
.logo{
background: url(‘logo.png‘) no-repeat 0 0;
float:left;
height: 23px;
width:280px;
margin-top: 11px;
}
a{
text-decoration:none;
}
.action-menu{
float:left;
margin-left: 28px;
}
/*action-menu下的tb下的a标签*/
.action-menu a.tb{
color:#4b4c4d;
margin-left: -8px;
padding:0 13px 0 13px;
display:inline-block;
}/*没有效果*/
.action-menu a.tb:hover{
color: #ffffff;
}/*没有效果*/
.action-menu a.tb,.action-menu a.tb:hover{
color:#2459a2;
}/*没有效果*/
</style>
<body>
<div class="head-box">
<div class="head-content">
<a href="#" class="logo"></a>
<div class="action-menu">
<a href="#" clss="tb active">全部</a>
<a href="#" clss="tb">42区</a>
<a href="#" clss="tb">段子</a>
<a href="#" clss="tb">图片</a>
<a href="#" clss="tb">it1997</a>
<a href="#" clss="tb">你问我答</a>
</div>
</div>
</div>
</body>
</html>
以上是关于抽屉新热榜头部实现的主要内容，如果未能解决你的问题，请参考以下文章
IOS模仿"抽屉新热榜"动态启动页YFSplashScreen