为了和文章分类部分的样式进行区分,我决定自己动手写一个具有其他样式的分类标签集。刚好看到豆瓣读书板块的首页中的图书分类标签还不错,于是决定自己写一个类似的样式。首先是HTML代码部分: 可以看到图书分
导读热词
正文
<div class="col-md-4">
<h5 style="margin-top:0px;">
图书分类
</h5>
<div class="row" id="bookclass">
<a href="图书分类页面" class="col-md-3">分类名</a>
<!--其他分类-->
</div>
</div>
//a标签样式
#bookclass a
{
display:block;//区块显示
background-color:#f5f5f5;//背景色(跟豆瓣相同)
text-align:center;//文字居中
padding:2px 5px;//内边距,上下2px,左右5px
float:left;//左浮动,从而可以实现水平排列
margin:2px 2px;//外边距,上下2px,左右2px
}
//当鼠标悬停时改变背景色
#bookclass a:hover
{
background-color:#e8e8e8;//同豆瓣颜色
}
总结