第六章：html列表

敖游

2015-12-23

来源：遨游建站

　　代码如下：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　#layout ul { list-style: none; }

　　#layout ul li { background: url(/upload/2010-08/17/icon.gif) no-repeat 0px 4px; padding-left: 20px; }

　　</style>

　　</head>

　　<body>

　　<ul>

　　<li><a title="第五天超链接伪类" href="/div_css/906.shtml" target="_blank">第五天超链接伪类</a></li>

　　<li><a title="第四天纵向导航菜单" href="/div_css/905.shtml" target="_blank">第四天纵向导航菜单</a></li>

　　<li><a title="第三天二列和三列布局" href="/div_css/904.shtml" target="_blank">第三天二列和三列布局</a></li>

　　<li><a title="第二天一列布局" href="/div_css/903.shtml" target="_blank">第二天一列布局</a></li>

　　<li><a title="第一天 XHTML CSS基础知识" href="/div_css/902.shtml" target="_blank">第一天 XHTML CSS基础知识</a></li>

　　</ul>

　　</div>

　　</body>

　　</html>

　　三、横向图文列表

　　横向图文列表是在上一步的基础上增加图片并让列表横向排列，最终实现效果如下：

　　先插入如下的html代码，插入过程就不再截图了，如果不会的话请学习前边章节

　　<ul>

　　</ul>

　　</div>

　　接下来添加css样式，这里用到一个很重要的css属性：float，这个属性在第三天的教程当中已详细讲解过，这里不太赘述。先添加如下全局样式：

　　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;}

　　然后让每个li元素浮动起来，这样就实现了横向排列

2 / 4

阅读327

写评论...