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实现了一个精致的纵向导航菜单

纵向导航菜单  #course { border-width:0px 1px 1px 1px; border-style:solid; border-color:#f3c3f3; width:120p...
  • zhangxiaoxiang
  • zhangxiaoxiang
  • 2007年10月12日 07:50
  • 13500

DIV+CSS制作二级导航菜单(纵向)

html> html lang="en"> head> meta charset="UTF-8"> title>制作二级导航菜单(纵向)title> style type="t...
  • pangqiandou
  • pangqiandou
  • 2017年10月24日 12:38
  • 564

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

CSS之定位、居中、浮动及利用浮动设计网页布局和导航

一:定位: 1.相对定位:如果对一个元素进行相对定位,它将出现在它所在的位置上。然后利用属性position:relative,接着可以通过选择设置left、right、top 、bottom的值,...
  • pleasecallme_522
  • pleasecallme_522
  • 2016年07月21日 23:44
  • 879

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

网站导航是网站中最重要的元素,是网站提供给用户的最直接最方便的访问网站内容的工具。网站导航从形式上主要由横向导航、纵向导航、下拉及多级菜单导航等3中常见形式.1.       横向导航使用CSS布局的...
  • ccp5780199
  • ccp5780199
  • 2007年09月20日 17:01
  • 1954

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

网站导航是网站中最重要的元素,是网站提供给用户的最直接最方便的访问网站内容的工具。网站导航从形式上主要由横向导航、纵向导航、下拉及多级菜单导航等3中常见形式.1.       横向导航使用CSS布局的...
  • andylaufzf
  • andylaufzf
  • 2007年09月21日 09:54
  • 345

用CSS设计纵向导航菜单(div+h1+h2)

用CSS设计纵向导航菜单(div+h1+h2):在XHTML的语法意义中,h1,h2,h3,h4,h5,h6本身就具有对文本进行层级划分的意义。因此使用div+h1+h2来进行纵向布局是一种比较好的方...
  • codeshark
  • codeshark
  • 2008年07月12日 16:28
  • 2730

十天学会web标准(DIV+CSS)系列(四)纵向导航菜单及二级弹出菜单

一、纵向列表 纵向列表或称为纵向导航,在网站的产品列表中应用比较广泛,如淘宝网左侧的淘宝服务,今天我们就学习一下纵向导航的制作 先新建一个页面,然后插入一个ID为menu的div,然后在设计视图中...
  • jarniyy
  • jarniyy
  • 2016年03月21日 11:24
  • 734

div +css 纵向导航

以下代码实现纵向导航功能,并为导航添加了超链接(用#不可用的超链接代替),如下图所示 无标题文档 body{font-family:Verdana;font-size:18px...
  • mingtian369
  • mingtian369
  • 2013年08月13日 16:53
  • 391

超实用!网站导航栏设计方法总结

导航对于一个网站来说,起到重要的引导作用。一个优秀的导航设计可以让用户快速的找到所需 ,让用户清晰明了的了解到网站的结构框架,起到重要的指引作用。下面跟大家分享下常用的几种网页导航形式: 1、顶...
  • qq_40543535
  • qq_40543535
  • 2017年12月28日 15:20
  • 144
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS网站元素设计-纵向导航
举报原因:
原因补充:

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