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 商品分类 ...

CSS3 网站元素输出

  • 2015-06-15 07:37
  • 9.30MB
  • 下载

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

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

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

IndexStoreMaciPodiPhoneiPadiTunesSupport

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

立体感超强css精品网站导航条 演示图如下: 详细代码如下: 桔黄与蓝色搭配的横向导航栏代码--免费模板 ...

css +html实现网站二级导航

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

利用html5和css3制作简单精美的网站导航

由于是学生一枚,接触前端技术刚刚一年,正式开始学习不久。简单总结一下我的学习经验,首先要明白自己将来打算坐哪一方面的开发者,是想做一枚前端还是后端,亦或是移动端还是数据库?嵌入式?明白了这一项之后就该...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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