⽤CSS设计纵向导航菜单（div+h1+h2）
⽤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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/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>  <h2>XHTML实战训练</h2> </div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。