css样式教程:图文混排[图上文字下]

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;
}

最后就完了,申明站原创转载请注明: