用CSS设计纵向导航菜单（div+h1+h2）_纵向导航菜单样式大全-CSDN博客

本文链接：https://blog.csdn.net/codeshark/article/details/2644348

用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>