css+div 图片排列布局
来源:互联网 发布:腾讯文件管理器源码 编辑:程序博客网 时间:2024/06/16 06:00
我们来看如下图这种css div网页布局吧,分析一下是由一个大层,里面由多个li标签组成了,
下面就是我们的上面这段图片显示方式的div布局哦.
<div id="face">
<div id="facetitle">
<span>头像列表</span>
<input id="faceclose" type="submit" value="" />
</div>
<ul id="faceul">
<li><a href="#"><img src="images/1.bmp"></img></a></li>
<li><a href="#"><img src="images/11.bmp"></img></a></li>
<li><a href="#"><img src="images/2.bmp"></img></a></li>
<li><a href="#"><img src="images/13.bmp"></img></a></li>
<li><a href="#"><img src="images/19.bmp"></img></a></li>
<li><a href="#"><img src="images/26.bmp"></img></a></li>
<li><a href="#"><img src="images/31.bmp"></img></a></li>
<li><a href="#"><img src="images/43.bmp"></img></a></li>
<li><a href="#"><img src="images/48.bmp"></img></a></li>
<li><a href="#"><img src="images/63.bmp"></img></a></li>
<li><a href="#"><img src="images/68.bmp"></img></a></li>
<li><a href="#"><img src="images/64.bmp"></img></a></li>
<li><a href="#"><img src="images/65.bmp"></img></a></li>
<li><a href="#"><img src="images/66.bmp"></img></a></li>
<li><a href="#"><img src="images/71.bmp"></img></a></li>
<li><a href="#"><img src="images/88.bmp"></img></a></li>
<li><a href="#"><img src="images/93.bmp"></img></a></li>
<li><a href="#"><img src="images/99.bmp"></img></a></li>
<li><a href="#"><img src="images/112.bmp"></img></a></li>
<li><a href="#"><img src="images/114.bmp"></img></a></li>
</ul>
</div>
样式很简洁的就用了div ul li就完成了如此漂亮又有规则的网页图片布局哦,那我们来看看css是怎么写的吧.
#face{
width:300px;
border:1px solid #b4b4b4;
height:280px;
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;
width:30px;
height:30px;
}
#facetitle{
font-weight:bold;
height:30px;
width:292px;
margin:3px 0 0 3px;
background:url(images/faceback.gif) repeat-x top left;
}
#facetitle span{
float:left;
color:#ffffff;
display:block;
height:30px;
line-height:30px;
width:100px;
margin:0 0 0 10px;
}
#faceul{
margin:0 0 0 2px;
width:290px;
}
#faceul li{
float:left;
border:1px solid #b4b4b4;
margin:5px 0 0 4px;
height:52px;
width:50px;
}
#faceul li a{
display:block;
height:52px;
width:50px;
}
#faceul img{
margin:5px 0 0 5px;
border:none;
height:40px;
width:40px;
}
上面我们定义了face然后再给它的子类进行了定义,li,a ,img ul 等
- css+div 图片排列布局
- css+div 图片排列布局
- div+css图片横向排列
- 精通CSS+DIV网页样式与布局--图片效果
- css 图片排列
- css 图片排列
- DIV+CSS DIV居中布局
- div+css布局入门
- div+css布局漫谈
- div+css布局漫谈
- Div+CSS布局入门教程
- div+css布局
- Div+Css布局漫谈
- div+css布局漫谈
- div+css布局实例
- div+css布局漫谈
- div+css布局漫谈
- CSS+DIV布局教程
- 【网络知识】——交换机上不了网问题
- CSS基础知识
- Python 的defaultdict用法
- 使用Android Studio导出JavaDoc时中文乱码问题解决
- 使用线程的一个例子程序
- css+div 图片排列布局
- Codeforces Round #362 (Div. 2)(A~D))
- CSS布局欣赏:淘宝首页布局效果
- 9.支持向量机(SVM)的算法
- 使用angularjs1.x构建前台开发框架(一)——构建基础架构
- HashMap实现原理分析
- 机器学习与数据挖掘算法 1.编程实现ID3算法,针对下表数据,生成决策树。
- 单片机==串口(17)
- Codevs 3012 线段覆盖 4