html列表.pptVIP

Html列表 主要内容 ul无序和ol有序列表 改变项目符号样式或用图片定义项目符号 横向图文列表 浮动后父容器高度自适应 无序列表，是以ul包含li的形式，默认每行前的符号是圆点，可以通过样式表改为无、方块，空心圆等。 有序列表是以ol包含li的形式，是以数字为项目符号的 改变项目符号样式或用图片定义项目符号 这种形式对图像控制不是很灵活，所以实际应用当中一般用背景图片来实现 源码图片 横向图文列表 1）插入内容 横向图文列表 1）加入css样式 注意：overflow:auto; zoom:1; overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6而写 display:inline; IE6的双倍边距bug * body div id=layout ul lia href=#img src=pic/lpic.jpg width=68 height=54 /三亚/a/li lia href=#img src=pic/lpic.jpg width=68 height=54 /三亚/a/li lia href=#img src=pic/lpic.jpg width=68 height=54 /三亚/a/li lia href=#img src=pic/lpic.jpg width=68 height=54 /三亚/a/li lia href=#img src=pic/lpic.jpg width=68 height=54 /三亚/a/li lia href=#img src=pic/lpic.jpg width=68 height=54 /三亚/a/li lia href=#img src=pic/lpic.jpg width=68 height=54 /三亚/a/li lia href=#img src=pic/lpic.jpg width=68 height=54 /三亚/a/li lia href=#img src=pic/lpic.jpg width=68 height=54 /三亚/a/li lia href=#img src=pic/lpic.jpg width=68 height=54 /三亚/a/li lia href=#img src=pic/lpic.jpg width=68 height=54 /三亚/a/li lia href=#img src=pic/lpic.jpg width=68 height=54 /三亚/a/li /ul /div /body style type=text/css body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;} ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;} ul { list-style:none;} img { border:0px;} a { color:#05a; text-decoration:none;} a:hover { color:#f00;} #layout { width:390px; border:2px solid #ccc; padding-bottom:20px; overflow:auto; zoom:1;} #layout ul li { width:72px; float:left; margin:20px 0 0px 20px; display:inline; text-align:center;} #layout ul li a { display:block;} #layout ul li a img { padding:1px; border:1px solid #e1e1e1; margin-bottom:3px; display:block;} #layout ul li a:hover img { padding:0px; border:2px solid #f98510;} /style *