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

时间：2008-09-19 编辑：简简单单来源：一聚教程网

css样式教程:图文混排[图上文字下],标题不知道怎么写所以就搞得很乱,很多的,下我们先看看混文混排的效果图片你就会知道是怎么的效果了哦.

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

看css 布局代码.

代码如下	复制代码
圈子名称圈子名称圈子名称圈子名称圈子名称圈子名称

样式代码是不是很简洁啊,下面我们就看看在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.111com.net

上一个： css图文混排样式代码
下一个： css div 定位

css实现文字发光效果方法汇总 08-05
css控制竖排文字方法 12-09
css 文字间距控制word-spacing,letter-spacing 05-15
css滤镜文字效果 05-23
基本的几种 CSS 文字滤镜效果 04-29
css 文字环绕 04-10

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程