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

原创 2007年09月20日 17:01:00

网站导航是网站中最重要的元素,是网站提供给用户的最直接最方便的访问网站内容的工具。网站导航从形式上主要由横向导航、纵向导航、下拉及多级菜单导航等3中常见形式.

1.       横向导航

使用CSS布局的形式制作导航与Tbale布局有很大的区别,网站除了页面布局之外,最重要的就是导航部分,在这一步应该先制作出个简单明快的导航系统,然后一步一步的完成具有设计效果的最终导航。

如下代码所示例

<ul id="nav">

<li><a href="#">首页</a></li>

<li><a href="#">文章</a></li>

<li><a href="#">参考</a></li>

<li><a href="#">BLOG</a></li>

<li><a href="#">论坛</a></li>

<li><a href="#">联系</a></li>

</ul>

元素ulCSS布局中使用得很广泛的一种元素,主要用来描述列表内容,每一个<ul></ul>表示其中的内容为一个列表块,块中的每一条列表数据用<li></li>来描述.

如上代码运行后所示,ul默认样式就加上了圆点状序号,而且默认为从上至下排列.

对于简单的 只有文字导航来说,相对于DIV的复杂实现,ul更为灵活.

加入如下样式

       #nav li{

       float:left;       

       }

       #nav li a{

       color:#000000;

       text-decoration:none;

       padding-top:4px;

       display:block;

       width:97px;

       height:22px;

       text-align:center;

       background-color:#ececec;

       margin-left:2px;           

       }

 

可以看到显示效果如下

在样式代码中,指定了float:left;属性,使得下一个对象贴进该对象的右边。

导航的关键在于a连接对象的样式控制,在这里使用#nav li a{} li下的每一个a链接对象编写了样式.

display:block 使得a链接对象的显示方式由一段文本改为一个块状对象,和div的特性相同,div默认状态下就是一个块状对象,而默认状态下a链接对象只是显示为一个普通文本,这样就没有办法使得a链接对象能够象一个方块状按钮一样去运作,使用display:block之后,就可以用CSS的外边距,内边距、边框等属性给a链接.

再给样式表中加上

       #nav li a:hover{

              background-color:#bbbbbb;

              color:#FFFFFF;

       }

可以看到,鼠标移的时候,就会出现响应而改变颜色了。

为了让某一个频道成为一个当前所属的频道,这个频道必须有一个和其他频道不一样的背景颜色。

<li><a href="#" id="current">首页</a></li>

 

       #nav li a#current{

              background-color:#2788da;

              color:#FFFFFF;

       }

       #nav {

              height:26px;

              border-bottom:2px solid #2788da;           

       }

修改后即可实现,每当切换一个频道页面时,只需将id=”current“移到当前频道所在a元素即可。

感冒了 人都没力气了,头也晕晕的,今天就先到这了。...

 

div+css 制作横向导航菜单

好,开始上课!                前三节课,我们知道了什么是“块状元素和内联元素”,以及xHTML+CSS布局的核心概念“盒子模型”,同时又学习了一下页面布局中两种方法中的一种方法“浮...

如何应用ul、li标签 创建css横向导航菜单?

我们制作导航条按照传统的方法由放在一行表格单元里的图形图像构成,或者由单元格内的文字所组成,由于人们不再推荐用表格来定位任何非表格的页面内容,所以很多制作Web的人正在寻找新的方法,用结构化的XHTM...

用ul、li标签创建css横向导航菜单示例

创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以,为了避免所有的...

如何应用ul、li标签 创建css横向导航菜单?

我们制作导航条按照传统的方法由放在一行表格单元里的图形图像构成,或者由单元格内的文字所组成,由于人们不再推荐用表格来定位任何非表格的页面内容,所以很多制作Web的人正在寻找新的方法,用结构化的XHTM...

十天学会web标准(DIV+CSS)系列(七)横向导航菜单

一、横向列表菜单 前边学习过纵向导航菜单,又学习了float属性,那么要实现横向导航菜单是不是很简单了,只需要把li横向排列就可实现了。把第四节的代码拿过来直接用,修改后的代码如下: ...
  • jarniyy
  • jarniyy
  • 2016年03月21日 12:48
  • 498

横向经典的div+css导航菜单

横条的导航菜单
  • wind428
  • wind428
  • 2014年05月10日 16:26
  • 583

css横向导航菜单代码

  • 2009年09月19日 13:18
  • 47KB
  • 下载

CSS+DIV简单的横向导航

  • 2009年09月18日 22:55
  • 13KB
  • 下载

用ul、li标签 创建css横向导航菜单?

创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以,为了避免所有的...

二级css横向导航条

  • 2009年10月28日 11:32
  • 20KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS网站元素设计-横向导航
举报原因:
原因补充:

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