最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css+div 图片排列布局
时间:2008-10-17 编辑:简简单单 来源:一聚教程网
好了,我们来看如下图这种css div网页布局吧,分析一下是由一个大层,里面由多个li标签组成了,
下面就是我们的上面这段图片显示方式的div布局哦.
样式很简洁的就用了div ul li就完成了如此漂亮又有规则的网页图片布局哦,那我们来看看css是怎么写的吧.
#face{
border:1px solid #b4b4b4;
margin:0 0 0 50px;
background:#ffffff;
}
#face input{
background:url(images/faceclose.gif) no-repeat center;
margin:0 0 0 140px;
float:left;
border:none;
cursor:pointer;
}
#facetitle{
font-weight:bold;
margin:3px 0 0 3px;
background:url(images/faceback.gif) repeat-x top left;
}
#facetitle span{
float:left;
color:#ffffff;
display:block;
line-
margin:0 0 0 10px;
}
#faceul{
margin:0 0 0 2px;
}
#faceul li{
float:left;
border:1px solid #b4b4b4;
margin:5px 0 0 4px;
}
#faceul li a{
display:block;
}
#faceul img{
margin:5px 0 0 5px;
border:none;
}
上面我们定义了face然后再给它的子类进行了定义,li,a ,img ul 等
最后申明:本站原创转载请注明www.111com.net/cssdiv/css.html
-
上一个: css dl dt dd使用实例教程
-
下一个: div+css 列表菜单实例教程
相关文章
- 用CSS实现各种图片滤镜效果演示 12-26
- CSS 阴影效果(无需图片即可实现) 02-08
- CSS去掉图片img边框及如何防止图片撑破DIV 01-05
- CSS Sprites图片不清晰的问题(2倍的 CSS Sprites 如何缩放) 12-16
- css中input标签与图片按钮对不齐解决方法 06-10
- css实现圆角三角形例子(无图片) 03-26