css-纵向导航 

<!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;
}

posted on 2011-08-07 21:22  帘  阅读(844)  评论(0)  编辑  收藏  举报

导航