制作网页2级导航Word格式.docx
- 文档编号:21664020
- 上传时间:2023-01-31
- 格式:DOCX
- 页数:21
- 大小:220.60KB
制作网页2级导航Word格式.docx
《制作网页2级导航Word格式.docx》由会员分享,可在线阅读,更多相关《制作网页2级导航Word格式.docx(21页珍藏版)》请在冰豆网上搜索。
webUI<
理论知识<
实战应用<
高级技巧<
DOM<
DOM入门<
DOM应用<
DOM与浏览器<
XHTML<
参考手册<
交流论坛<
/div>
从以上可以看出,这次的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:
normal;
#navh2a{color:
#666666;
text-decoration:
none;
#navh2a:
hover{color:
#999999;
underline;
本css代码部分采用了简化写法,如果哪句意思看不懂,您可以在Dreamweaver中打开选择编辑样式表即可查看具体是哪一项了,相信经过这样几次练习,这些代码您已经能完全看懂了,说明您离高手又近了一步了。
大家可能已经注意到了,#nav的边框本例中只设置了左右下和一像素,而没有上,而在h1的样式里设置了上部的上像素?
这是为什么呢?
因为h1的样式上部都有一条横线,如果nav上部再有一条横线的话成长两条了,结果显示出来就是两像素的高度了。
CSS实例教程:
除非你的网站只有一页,不然你一定会用的导航的.事实上,导航在网页设计中是最重要部分之一.你要用很多时间去考虑如何让浏览者更容易访问你的网站.
在以前做网站导航时,往往依赖于图像,表格,和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"
htmlxmlns="
//www.w3.org/1999/xhtml"
lang="
en-US"
head>
title>
Listsasnavigation<
/title>
metahttp-equiv="
content-type"
content="
text/html;
charset=utf-8"
/>
linkrel="
stylesheet"
type="
text/css"
href="
listnav1.css"
/head>
body>
navigation"
ul>
li>
Recipes<
/li>
ContactUs<
Articles<
BuyOnline<
/ul>
/body>
/html>
============================
使用CSS给上面代码添加效果
=====================
#navigation{
width:
200px;
}
#navigationul{
list-style:
none;
margin:
0;
padding:
#navigationli{
border-bottom:
1pxsolid#ED9F9F;
#navigationlia:
link,#navigationlia:
visited
{
font-size:
90%;
display:
block;
0.4em00.4em0.5em;
border-left:
11pxsolid#711515;
border-right:
1pxsolid#711515;
background-color:
#B51032;
color:
#FFFFFF;
text-decoration:
======================
分析:
先创建一个无序列表的导航条,并做好导航链接.
========================
然后用一个div把这个无序列表包含起来.
===========================
==============================
在浏览器中显示默认的样式.
接下来我们要做的第一件事是给这个div定义宽度.
===================
给列表添加样式,去掉默认的圆点和清除填充.
在浏览器中显示:
给li标签添加一个下划线
==========================
给链接添加样式:
===============================
=============================
在上面可以看到这个CSS是添加了左右边框,并且使对象块状,这样做的效果使链接看起来像一个按扭.这种效果看起来像是给导航添加一个图片似的.
使用CSS创建一个没有图像和javascript的导航.
导航功能常常具有翻转的效果:
比如说一个浏览者把鼠标放在按扭上,按扭就会显示出另一张图片,来突出效果.要实现这个效果,则要两张图像和javascript.
解决方案:
使用CSS来创建上面的那个效果比用图像来创建要简单的多.在CSS要现实翻转这个效果用到hover伪类选择器.
我们给上面的事例加个翻转的效果:
hover{
#711515;
效果如图:
我们可以看到使用CSS来实现这个效果是非常简单的.在这个例子里我只是改下翻转的背景的颜色.你可以在翻转时改变边框,和文字的颜色.
在现代的浏览器中,比如说IE7,你可以给任何对象添加:
hover伪类选择器.但是在IE6以下版本却不能这样使用.
在老式的版本中只充许锚文本可以点击,因此用户只能点击到文字,而不是背景.
我们如何解决这个问题,这里有一个黑客的方法:
扩大链接的宽度.
===============
*html#navigationlia{
100%;
如何使用CSS创建一个副导航
到目前为止例子所建的是一个水平的导航,但有时我们需要在水平下添加一个副导航.我们给例子再增加嵌套并添加其CSS样式.
listnav_sub.css"
Starters<
MainCourses<
Desserts<
#navigationulul{
margin-left:
12px;
#navigationululli{
0;
#navigationulula:
link,#navigationulula:
visited{
#ED9F9F;
嵌套列表是一个很好的方式来描述导航系统.在这个例子我们用了第一个列表来表示主菜单,而子菜单则包含在主菜单的下面.这样如没有CSS样式,结构也是非常的清晰.
在主菜单<
对象包含一个列表:
在html中如果没有添加CSS的话,那么嵌套列表将继续主菜单的CSS样式,靠左边浮动,所以要添加个空白,与主菜单有一定的距离.
#navigationulul{
=======================
接下来我们再给嵌套里的<
a>
对象添加样式.
#navigationululli{
}
visited{
hover{
没有JS只用CSS制作的网页下拉菜单
这款下拉菜单栏的实现非常简单,没有用到复杂的JS代码,完全依靠css代码来实现的,只需进行简单的修改变换就可以了,以下是代码实例:
html代码:
liclass="
menu2"
onMouseOver="
this.className='
menu1'
"
onMouseOut="
menu2'
HomePage
divclass="
list"
我的首页<
br_fcksavedurl="
br"
我的日志<
br/>
我的相册<
我的收藏<
Connection
MyFiles
Management
ahref=
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 制作 网页 导航