css样式教程:图文混排[图上文字下],标题不知道怎么写所以就搞得很乱,很多的,下我们先看看混文混排的效果图片你就会知道是怎么的效果了哦.
看css 布局代码.
代码如下
复制代码
<ul class="hotGroup">
<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>
</ul>
样式代码是不是很简洁啊,下面我们就看看在css 样式是怎么控制的吧.
代码如下
复制代码
ul.hotGroup,ul.livelyGroup {
padding-top: 12px;
}
ul.hotGroup li,ul.livelyGroup li {
float: left;
width: 65px;
text-align: center;
}
ul.hotGroup li a,ul.livelyGroup li a {
display: block;
height: 50px;
width: 50px;
background-color: #CCCCCC;
margin-right: auto;
margin-left: auto;
white-space: nowrap;
overflow: hidden;
}
ul.hotGroup li img, ul.livelyGroup li img {
height: 50px;
width: 50px;
}
ul.hotGroup li span,ul.livelyGroup li span {
line-height: 22px;
display: block;
height: 22px;
width: 50px;
margin-right: auto;
margin-left: auto;
white-space: nowrap;
overflow: hidden;
}
最后就完了,申明站原创转载请注明:www.111cn.net
