当需要展示列表数据,首先考虑使用列表元素,虽然div+css也能实现。
list-style
简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image
将图象设置为列表项标志。(常用背景图替代它)
list-style-position
设置列表中列表项标志的位置。
list-style-type
设置列表项标志的类型。
注意:以上三个属性,是作用于ul/ol的。
可以改变项目符号样式或用图片定义项目符号
这种形式对图像控制不是很灵活,所以实际应用当中一般用背景图片来实现,在上例基础上将项目符号设置为list-style: none;
<style type="text/css">
#layout ul { list-style: none; }
#layout ul li { background: url(images/2010-08/17/icon.gif) no-repeat 0px 4px; padding-left: 20px; }
</style>
列表盒子模型分析:
<style type="text/css">
#layout{border:1px solid black;}
ol{border:thin solid red;list-style:none;}
</style>
<div id="layout">
<ol>
<li><span>窗外赏雪</span></li>
<li><span>窗外赏雪</span></li>
<li><span>窗外赏雪</span></li>
<li><span>窗外赏雪</span></li>
<li><span>窗外赏雪</span></li>
</ol>
</div>
ul/ol默认有margin-top,margin-left,padding-left。
li元素是块元素,需要对其进行设置,以便用于展示列表数据。
#layout{border:1px solid black;}
ul{list-style:none; margin-bottom:0; margin-top:0; padding-left:0}
li{border:thin solid red; padding:2px; margin:2px}
<div id="layout">
<ul>
<li><span>窗外赏雪</span></li>
<li><span>窗外赏雪</span></li>
<li><span>窗外赏雪</span></li>
<li><span>窗外赏雪</span></li>
<li><span>窗外赏雪</span></li>
</ul>
</div>
横向图文列表
要横向列表,则li需要float。
当一个容器内元素都浮动后,它将高度将不会随着内部元素高度的增加而增加,所以造成内容元素的显示超出了容器。
div{ border:thin solid gray;overflow:auto; }
ul { list-style:none; margin:0; padding:0px; border:thin solid red;}
img { border:0px;}
#layout ul li { width:70px; float:left; margin:20px 0 0 20px;text-align:center;}
#layout ul li a img { padding:1px; width:68px; height:54px}
<ul>
<li><a href="#"><img src="images/liebiao.jpg" />列表</a></li>
<li><a href="#"><img src="images/liebiao.jpg" />列表</a></li>
<li><a href="#"><img src="images/liebiao.jpg" />列表</a></li>
<li><a href="#"><img src="images/liebiao.jpg" />列表</a></li>
<li><a href="#"><img src="images/liebiao.jpg" />列表</a></li>
<li><a href="#"><img src="images/liebiao.jpg" />列表</a></li>
<li><a href="#"><img src="images/liebiao.jpg" />列表</a></li>
</ul>
列表要解决这个问题,需要给ul/ol使用以下样式
overflow:auto;是让高度自适应。
ul里面不能直接放div去clean,所以列表最好的解决方法是overflow:auto
接下来讲一下另一种列表:dl dt dd
dl{border:thin solid red;}
#layout{border:solid thin green}
<div id="layout">
<dl>
<dt>标题title</dt>
<dd>详情一detail</dd>
<dd>详情二detail</dd>
<dd>详情三detail</dd>
</dl>
</div>
注意:dt(title)是不能重复的,而dd(detail)是可以的。
dl dt dd这个组合最容易出错的地方莫过于,dt里面只能放行级元素,也就是只能放一些<img><span>等等的元素。而dd则可以放一些块级元素,例如<p><div>等等。
一般我们用dl dt dd实现如下列表效果:
dl {
border:thin solid red;
overflow:auto; #和ul/ol一样,用于内部元素浮动后高度自适应
}
dt {
width:200px;
height:300px;
background:url(2.JPG);
float:left;
}
dd {
border:thin solid gray;
margin:10px;
float:left;
}
#layout {
border:solid thin green
}
<div id="layout">
<dl>
<dt></dt>
<dd><span>绿芜墙绕青苔院,中庭日淡芭蕉卷。</span><br />
<span>蝴蝶上阶飞,烘帘自在垂。 </span><br />
<span>玉钩双语燕,宝甃杨花转。</span><br />
<span>几处簸钱声,绿窗春睡轻。</span> </dd>
</dl>
</div>
相关推荐
最近总结手上下到的电子书,一看还真是多,全是精品,虽知大家都有了,仍不敢独食
网上相关论坛资料集中贴索引。 ARP协议实现原理.txt NE2000网卡芯片驱动程序.doc uCOS51移植心得.htm 在Keil_C51_v7上移植UcOS_IIV251.doc
[Trial version] Win32调试API学习心得(一).htm [Trial version] Win32调试API学习心得(二).htm [Trial version] win32调试API学习心得(三).htm [Trial version] 用调试函数跟踪API.htm [Trial version] 3.2 ...
5.如果要从电脑上传送文件到手机的话,使用adb push命令。格式:adb push 本地路径 手机路径 ;举例:把c盘根目录下的456.txt传送到system。则:adb push c:\456.txt /system/ 传送文件到system文件夹的话。需要先...
11.1 使用const提高函数的健壮性... 82 11.2 提高程序的效率... 84 11.3 一些有益的建议... 85 参考文献... 87 附录A :C++/C代码审查表... 88 附录B :C++/C试题... 93 附录C :C++/C试题的答案与评分标准......
纯javascript技术打印农行缴款单,也可以自行修改成其它打印模式。欢迎交流打印心得!
卷 data 的文件夹 PATH 列表 卷序列号为 64ED-8C1D D:\我的酷盘\FTP\学员面试资料 │ 164个完整Java代码.zip │ J2EE综合--Struts常见错误的全面汇总.txt │ java程序员面试资料.zip │ JAVA笔试题(上海释锐)....
卷 data 的文件夹 PATH 列表 卷序列号为 64ED-8C1D D:\我的酷盘\FTP\学员面试资料 │ 164个完整Java代码.zip │ J2EE综合--Struts常见错误的全面汇总.txt │ java程序员面试资料.zip │ JAVA笔试题(上海释锐)....
卷 data 的文件夹 PATH 列表 卷序列号为 64ED-8C1D D:\我的酷盘\FTP\学员面试资料 │ 164个完整Java代码.zip │ J2EE综合--Struts常见错误的全面汇总.txt │ java程序员面试资料.zip │ JAVA笔试题(上海释锐)....
卷 data 的文件夹 PATH 列表 卷序列号为 64ED-8C1D D:\我的酷盘\FTP\学员面试资料 │ 164个完整Java代码.zip │ J2EE综合--Struts常见错误的全面汇总.txt │ java程序员面试资料.zip │ JAVA笔试题(上海释锐)....
卷 data 的文件夹 PATH 列表 卷序列号为 64ED-8C1D D:\我的酷盘\FTP\学员面试资料 │ 164个完整Java代码.zip │ J2EE综合--Struts常见错误的全面汇总.txt │ java程序员面试资料.zip │ JAVA笔试题(上海释锐)....
实验内容 1、页面总体布局设计,可以通过对选择"插入记录 布局对象 DIV标签"命令的方法进行布局,也可以通过在代码视图中直接编写源代码的方进行 布局,布局页面的HTM框架的代码。 2 、连接页面的CSS文件,先建一个...
https://www.jb51.net/w3school/htmldom/prop_style_verticalalign.htm(W3C标准,概念不清的看手册很重要哦) ——————————————————————————– 首先,依旧是概念。介绍一下行内元素和块级...
.Net 中IE使用WinForm控件的使用心得。 动态加载用户控件的组件!(终结MasterPages技术) 在ASP.NET 1.1下实现模板化站点的新思路 在ASP.Net中两种利用CSS实现多界面的方法 用于弹出ModalDialog进行数据选择的控件 ...
前言: 今天的主角其实是好多朋友都应该已经熟悉的8位米字VFD显示屏,由YLEEE老板一年前“隆重”推出,期间很多朋友都做过...实物购买链接:https://item.taobao.com/item.htm?spm=2013.1.0.0.lJN4W6&id=15071361340
在网上我们经常能看到一些咖啡的规则设置文章,里面所提及的所谓什么高级技巧,以现在的角度来看,那些设置方法已经十分落后了。但是这样的文章还在被到处转载,继续误导...以下分享一下我的心得,希望对各位有所帮助。
欢迎大家到本社区是交流心得,和做友情连接,由于本站是新建站点,所以需要你们的支持。 连接方式:QQ:34366643 记住QQ不回答关于不会修改论坛的任何事,如还有不明白的请到论坛,我会在第一时间答复你!谢谢! E-...
PCB1.PcbDoc.htm PCB1.PcbDocPreview SPI协议的简单实例说明.pdf SPI总线协议及时序.pdf White_Paper-Interfacing_a_nRF24L01_to_a_Philips_Twin-Eye_Laser_Sensor_27022006.pdf Wireless_keyboard_using_nRF24Ex....
我想就我个人学习过程的心得和经验,写一篇比较全面的介绍文章。首先有两点是需要肯定的: 第一:XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解,等待只会让你失去机会; ...
这里和大家分享一下心得:打样了3次才做成,第一次发现灯的密度高一点好, 分辨率也高,第二次发现灯的中心不够靠近又改了一次,第三次改了595的控制方法,使得控制不受影响。断续搞了2个多月,一直在解决旋转的时候...