css-纵向导航

最新推荐文章于 2024-09-11 12:01:27 发布

weixin_34122548

最新推荐文章于 2024-09-11 12:01:27 发布

阅读量63

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/lianzi/archive/2011/08/07/2130274.html

版权

<!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" />
<link type="text/css" href="verticalNav.css" rel="stylesheet"/>
<title>纵向导航</title>
</head>

<body>

<div id="category">
<h1>CSS</h1>
<h2>CSS入门</h2>
<h2>进阶</h2>
<h2>高级技巧</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>

@charset "utf-8";
/* CSS Document */
#category{
    width:100px;/*定义了div的宽度*/ 
    border-right:1px solid #CCCCCC;/*给div三边加上了border但是没加top因为h1处添加了top*/
    border-bottom:1px solid #CCCCCC;
    border-left:1px solid #CCCCCC;
}
#category h1{
    margin:0px;/*因为h1与h2有默认的大的内、外边距以及字体的问题，所以这里要重新定义*/
    padding:4px;
    font-size:12px;
    font-weight:bold;
    border-top:1px solid #CCCCCC;/*设置了h1的上边距*/
    background-color:#999999;
}
#category h2{
    margin:0px;
    padding:4px;
    font-size:12px;
    font-weight:normal;
}