关闭

CSS网站元素设计-纵向导航

880人阅读 评论(0) 收藏 举报

使用纵向导航的目的主要是让用户方便找到网站中的文章,应该有一个二级分类及其下属的内容。

如下代码所示

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

这里采用的标签是div +h1 + h2的形式。

CSS代码中

       #category {

              width:100px;

              border-right:1px solid #c5c6c4;

              border-bottom:1px solid #c5c6c4;

              border-left:1px solid #c5c6c4;

       }

       #category h1{

              margin:0px;

              padding:4px;

              font-size:12px;

              font-weight:bold;

              border-top:1px solid #c5c6c4;

              background-color:#f4f4f4;

       }

       #category h2{

              margin:0px;

              padding:4px;

              font-size:12px;

              font-weight:normal;

       }

上述的代码有不少重复的地方,可以再优化

       #category {

              width:100px;

              border-right:1px solid #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 #c4c5c6;

              background-color:#f4f4f4;

       }

       #category h2{

              font-weight:normal;

       }

 

 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:129180次
    • 积分:2146
    • 等级:
    • 排名:第17793名
    • 原创:84篇
    • 转载:5篇
    • 译文:0篇
    • 评论:26条
    文章分类