用CSS设计纵向导航菜单（div+h1+h2）

来源：互联网发布：用友软件的售后编辑：程序博客网时间：2024/06/09 17:31

用CSS设计纵向导航菜单（div+h1+h2）：在XHTML的语法意义中，h1,h2,h3,h4,h5,h6本身就具有对文本进行层级划分的意义。因此使用div+h1+h2来进行纵向布局是一种比较好的方式，注意使用margin:0px消除h1~h6的默认外边距。举例如下：

<!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=utf-8" /><title>用CSS设计纵向导航菜单（div+h1+h2） </title><style type="text/css">#category{width:100px;border-color:#c5c6c4;border-style:solid;border-width:0px 1px 1px 1px;}#category h1,#category h2{margin:0px;padding:4px;font-size:12px;} #category h1{border-top:1px solid #c5c6c4;background-color:#f4f4f4;}#category h2{font-weight:normal;}/*h1,h2中都使用了margin:0px这是为了消除h1,h2元素默认的外边距。h1,h2在不加任何样式的情况下，拥有自己的默认样式。*/</style></head><body><div id="category"><h1>CSS</h1>   <h2>CSS入门</h2>   <h2>CSS进阶</h2>   <h2>CSS高级技巧</h2><h1>WebUI</h1>   <h2>理论知识</h2>   <h2>实战应用</h2>   <h2>高级技巧</h2><h1>DOM</h1>   <h2>DOM入门</h2>   <h2>DOM应用</h2>   <h2>DOM与浏览器</h2><h1>XHTML</h1>   <h2>XHTML参考手册</h2>   <h2>XHTML实战训练</h2></div></body></html>