收藏
下载资源下载资源 加入VIP,免费下载

制作网页2级导航.docx

上传人：b****5 文档编号：8527800 上传时间：2023-01-31 格式：DOCX 页数：21 大小：220.60KB
下载 相关 举报
制作网页2级导航.docx_第1页
第1页 / 共21页
制作网页2级导航.docx_第2页
第2页 / 共21页
制作网页2级导航.docx_第3页
第3页 / 共21页
制作网页2级导航.docx_第4页
第4页 / 共21页
制作网页2级导航.docx_第5页
第5页 / 共21页
点击查看更多>>
下载资源
资源描述

制作网页2级导航.docx

《制作网页2级导航.docx》由会员分享，可在线阅读，更多相关《制作网页2级导航.docx（21页珍藏版）》请在冰豆网上搜索。

制作网页2级导航.docx

制作网页2级导航

CSS网页布局入门教程：

纵向导航菜单

核心提示：

纵向导航菜单也是网站应用中的一种重要形式，所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式。

先看一下效果吧！

纵向导航菜单也是网站应用中的一种重要形式，所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式。

先看一下效果吧！

 

 如图所示的效果，我们先看一下代码结构：

 

   

CSS

       

css入门

       

css进阶

       

css高级

   

webUI

       

理论知识

       

实战应用

       

高级技巧

   

DOM

       

DOM入门

       

DOM应用

       

DOM与浏览器

   

XHTML

       

参考手册

       

交流论坛

 

从以上可以看出，这次的XHTML部分的代码横向代码略有不同，我们没有继续使用ul和li标签，其实继续使用ul元素也能完好的实现纵向导航系统，但是在这风景点我们希望更多的提供不同途径来展现css而已设计的灵活与方便性以便于抛砖引玉，开拓更多的设计思想。

这一次采用的是div+h1+h2的形式。

我们使用div标签设定了一个导航的结构区域。

在这个区域中我们使用了h1来作二级分类的标题，h2来做二级分类下面的细节内容。

在XHTML的讲法意义中，h1,h2,h3这些标签本身就具有用于对文本进行层级划分的意义，直接使用h1,h2来表示层级关系，相对于在标签中加入id或class来做层级的标记更为简单和直观，在这里使用h1,h2来标记不同级别的分类名称也实在是再合适不过了。

我们来看一看css代码的设计：

 

#nav{width:

100px;border-color:

#c5c6c4;border-style:

solid;border-width:

0px1px1px1px;}

#navh1{margin:

0px;padding:

4px;font-size:

12px;font-weight:

bold;font-family:

Verdana;border-top:

1pxsolid#c5c6c4;background-color:

#CCCCCC;}

#navh2{margin:

0px;padding:

4px;font-size:

12px;font-family:

Verdana;font-weight:

normal;}

#navh2a{color:

#666666;text-decoration:

none;}

#navh2a:

hover{color:

#999999;text-decoration:

underline;}

 

本css代码部分采用了简化写法，如果哪句意思看不懂，您可以在Dreamweaver中打开选择编辑样式表即可查看具体是哪一项了，相信经过这样几次练习，这些代码您已经能完全看懂了，说明您离高手又近了一步了。

大家可能已经注意到了，#nav的边框本例中只设置了左右下和一像素，而没有上，而在h1的样式里设置了上部的上像素？

这是为什么呢？

因为h1的样式上部都有一条横线，如果nav上部再有一条横线的话成长两条了，结果显示出来就是两像素的高度了。

CSS实例教程:

制作网页2级导航

除非你的网站只有一页,不然你一定会用的导航的.事实上,导航在网页设计中是最重要部分之一.你要用很多时间去考虑如何让浏览者更容易访问你的网站.

在以前做网站导航时,往往依赖于图像,表格,和javascript.而这些都严重的影响了网站的可访问性和可使用性.如果在一个缺乏支持javascript的用户,那么你的网站导航将无算正常的显示.比如说一个用户把浏览器的javascript关闭掉,或者在一个只能读纯文字的手持设备--它们将无算从你的网站读到所有的数据.如果你的委拖人不注重这方面,那么告诉他繁杂的菜单会阻止搜索引擎的排名.（木木:

像禅意花园就是一个不错的CSS网站.）

使用CSS可以创建一个更有吸引力的导航,因为CSS没有和文本混合在一起,所以确保了导航的可访问性和使那些手持设备也可以读出.在这个教程里我们将看到一个基于CSS的导航.基于CSS的网站会加快网页加载的时间,这样基于图像的导航将渐渐的被淘汰掉.

导航的结构

先看效果图:

导航的本质是让浏览者更好的访问你的网站,所以要建立有意义的语义.使CSS和语义相符合,为了以后方便维护.注意要避免现有浏览器的不兼容.

解决方案

下面是导航的HTML和CSS的代码,效果如图.

这是创建导航的HTML代码

=========================

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" 

  "http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml"lang="en-US">

 

  Listsasnavigation

  

      charset=utf-8"/>

  

 

 

  

    

  

 

============================

使用CSS给上面代码添加效果

=====================

#navigation{

 width:

200px;

}

#navigationul{

 list-style:

none;

 margin:

0;

 padding:

0;

}

#navigationli{

 border-bottom:

1pxsolid#ED9F9F;

}

#navigationlia:

link,#navigationlia:

visited {

 font-size:

90%;

 display:

block;

 padding:

0.4em00.4em0.5em;

 border-left:

11pxsolid#711515;

 border-right:

1pxsolid#711515;

 background-color:

#B51032;

 color:

#FFFFFF;

 text-decoration:

none;

}

======================

分析:

先创建一个无序列表的导航条,并做好导航链接.

========================

========================

然后用一个div把这个无序列表包含起来.

===========================

 

==============================

在浏览器中显示默认的样式.

接下来我们要做的第一件事是给这个div定义宽度.

===================

#navigation{

 width:

200px;

}

=====================

给列表添加样式,去掉默认的圆点和清除填充.

========================

#navigationul{

 list-style:

none;

 margin:

0;

 padding:

0;

}

========================

在浏览器中显示:

给li标签添加一个下划线

==========================

#navigationli{

 border-bottom:

1pxsolid#ED9F9F;

}

==============================

给链接添加样式:

===============================

#navigationlia:

link,#navigationlia:

visited {

 font-size:

90%; 

 display:

block;

 padding:

0.4em00.4em0.5em;

 border-left:

11pxsolid#711515;

 border-right:

1pxsolid#711515;

 background-color:

#B51032;

 color:

#FFFFFF;

 text-decoration:

none;

}

=============================

在上面可以看到这个CSS是添加了左右边框,并且使对象块状,这样做的效果使链接看起来像一个按扭.这种效果看起来像是给导航添加一个图片似的.

使用CSS创建一个没有图像和javascript的导航.

导航功能常常具有翻转的效果:

比如说一个浏览者把鼠标放在按扭上,按扭就会显示出另一张图片,来突出效果.要实现这个效果,则要两张图像和javascript.

解决方案:

使用CSS来创建上面的那个效果比用图像来创建要简单的多.在CSS要现实翻转这个效果用到hover伪类选择器.

我们给上面的事例加个翻转的效果:

=============================

#navigationlia:

hover{

 background-color:

#711515;

 color:

#FFFFFF;

}

=============================

效果如图:

我们可以看到使用CSS来实现这个效果是非常简单的.在这个例子里我只是改下翻转的背景的颜色.你可以在翻转时改变边框,和文字的颜色.

在现代的浏览器中,比如说IE7,你可以给任何对象添加:

hover伪类选择器.但是在IE6以下版本却不能这样使用.

在老式的版本中只充许锚文本可以点击,因此用户只能点击到文字,而不是背景.

我们如何解决这个问题,这里有一个黑客的方法:

扩大链接的宽度.

===============

*html#navigationlia{

 width:

100%;

}

=============================

如何使用CSS创建一个副导航

到目前为止例子所建的是一个水平的导航,但有时我们需要在水平下添加一个副导航.我们给例子再增加嵌套并添加其CSS样式.

============================

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"

  "http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml"lang="en-US">

Listsasnavigation

  content="text/html;charset=utf-8"/>

 

#navigation{

 width:

200px;

}

#navigationul{

 list-style:

none;

 margin:

0;

 padding:

0;

}

#navigationli{

 border-bottom:

1pxsolid#ED9F9F;

}

#navigationlia:

link,#navigationlia:

visited {

 font-size:

90%;

 display:

block;

 padding:

0.4em00.4em0.5em;

 border-left:

11pxsolid#711515;

 border-right:

1pxsolid#711515;

 background-color:

#B51032;

 color:

#FFFFFF;

 text-decoration:

none;

}

#navigationlia:

hover{

 background-color:

#711515;

 color:

#FFFFFF;

}

#navigationulul{

 margin-left:

12px;

}

#navigationululli{

 border-bottom:

1pxsolid#711515;

 margin:

0;

}

#navigationulula:

link,#navigationulula:

visited{

 background-color:

#ED9F9F;

 color:

#711515;

}

#navigationulula:

hover{

 background-color:

#711515;

 color:

#FFFFFF;

}

============================

效果如图:

分析:

嵌套列表是一个很好的方式来描述导航系统.在这个例子我们用了第一个列表来表示主菜单,而子菜单则包含在主菜单的下面.这样如没有CSS样式,结构也是非常的清晰.

在主菜单

  • 对象包含一个列表:

    ============================

     

     

     

    ===========================

    在html中如果没有添加CSS的话,那么嵌套列表将继续主菜单的CSS样式,靠左边浮动,所以要添加个空白,与主菜单有一定的距离.

    =========================

    #navigationulul{ 

     margin-left:

    12px; 

    }

    =======================

    接下来我们再给嵌套里的

  • 对象添加样式.

    ========================

    #navigationululli{ 

     border-bottom:

    1pxsolid#711515; 

     margin:

    0; 

    } 

    #navigationulula:

    link,#navigationulula:

    visited{ 

     background-color:

    #ED9F9F; 

     color:

    #711515; 

    } 

    #navigationulula:

    hover{ 

     background-color:

    #711515; 

     color:

    #FFFFFF; 

    没有JS只用CSS制作的网页下拉菜单

    这款下拉菜单栏的实现非常简单，没有用到复杂的JS代码，完全依靠css代码来实现的，只需进行简单的修改变换就可以了，以下是代码实例：

    html代码：