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

原创 2007年09月22日 10:52:00

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

如下代码所示

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

       }

 

 

css纵向商城分类导航菜单

css纵向商城分类导航菜单 展示图: 详细代码: 纯CSS京东商城分类导航菜单代码-www.mianfeimoban.com 商品分类 ...

css纵向导航菜单及二级弹出菜单

  • 2012年12月23日 15:36
  • 1014B
  • 下载

利用div+css实现简单的纵向导航栏

利用div+css实现简单的纵向导航栏 简单的纵向导航
  • fanpeii
  • fanpeii
  • 2013年03月13日 22:58
  • 1696

div+css 纵向导航菜单及二级菜单弹出

1) 纵向导航菜单 body { font-family: Verdana;font-size: 12px; line-height: 1.5; } a { color: #000;text-...
  • janefir
  • janefir
  • 2013年11月26日 11:58
  • 2483

CSS3 网站元素输出

  • 2015年06月15日 07:37
  • 9.3MB
  • 下载

网站点击导航栏标题,对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效

之前看w3cshool上面,看到了a,name配合可以设置锚点,很多看书的网站上都用到,可以根据点击对应的目录章节,自动跳到具体的文字内容。 不过用锚点做的特效感觉很粗糙,不够平滑,总是一下子就跳到下...

css +html实现网站二级导航

做了好几个小时,也算有点模样,学到了很多东西,看过的东西还是要多练才能理解的透彻,连接处的白边可以用小白块覆盖,真的很有创意(这是’剽窃’老师的思想了),做的练习还是不太够的感觉,以后应该可以做的快一...

CSS3模拟apple苹果官方网站导航

IndexStoreMaciPodiPhoneiPadiTunesSupport

立体感超强css精品网站导航条

立体感超强css精品网站导航条 演示图如下: 详细代码如下: 桔黄与蓝色搭配的横向导航栏代码--免费模板 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS网站元素设计-纵向导航
举报原因:
原因补充:

(最多只允许输入30个字)