htm列表使用心得

当需要展示列表数据，首先考虑使用列表元素，虽然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>