黑色空间

搭建T字.net

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

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

如下代码所示

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

       }

 

 
阅读更多
个人分类: Web相关
上一篇UpdatePanel使用脚本
下一篇下拉及多级弹出式菜单
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭