导航条制作:使用列表元素制作导航条来源: 发布时间:星期五, 2008年9月26日 浏览:651次 评论:0
在HTML的学习中，读者了解了部分列表元素的知识，其结构为ul标签（无序列表）包含多个li标签所组成。在传统的HTML页面制作中，列表元素使用并不多，而在CSS的帮助下，列表元素变得空前强大，甚至用于小区域布局。 列表元素的li是块状元素，所以有宽度和高度设置，并且可以通过浮动属性的设置使多个li元素并排。这种结构非常适合于网页的导航条布局。由于在页面布局时列表元素不需要编号，所以列表元素更多使用ul标签。在D:\web\目录下创建网页文件（XHTML1.0），命名为nav_ul.htm，编写nav_ul.htm文件代码如代码11.14所示。 代码11.14 导航条布局：nav_ul.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>导航条制作</title> <style type="text/css"> * {margin:0px; padding:0px; } #nav{width:400px; height:20px; margin:0px auto; background-color:#ddd;} li{width:98px; height:20px; border:1px solid #d00; text-align:center; float:left;} </style> </head> <body> <ul id="nav"> <li>首页</li> <li>产品</li> <li>企业文化</li> <li>留言区</li> </ul> </body> </html> 为了更方便看到导航条的表现，笔者给ul设置了浅灰色背景色，并给li设置了红色边框，在浏览器地址栏输入http://localhost/nav_ul.htm，浏览效果如图11.15所示。
图11.15 导航条布局 4
相关文章读者评论发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
