CSS教程之CSS实例教程:制造网页2级导航

只看该作者 · 发表于 2015-1-15 23:33:07

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。
网页制造poluoluo文章简介：利用CSS能够创立一个更有吸引力的导航,由于CSS没有和文本夹杂在一同,以是确保了导航的可会见性和使那些手持设备也能够读出.在这个教程里我们将看到一个基于CSS的导航.基于CSS的网站会加速网页加载的工夫,如许基于图象的导航将垂垂的被减少失落.
除非你的网站只要一页,否则你必定会用的导航的.现实上,导航在网页计划中是最主要部分之一.你要用良多工夫往思索怎样让扫瞄者更简单会见你的网站.
在之前做网站导航时,常常依附于图象,表格,和javascript.而这些都严峻的影响了网站的可会见性和可以使用性.假如在一个缺少撑持javascript的用户,那末你的网站导航将无算一般的显现.好比说一个用户把扫瞄器的javascript封闭失落,大概在一个只能读纯笔墨的手持设备--它们将无算从你的网站读到一切的数据.假如你的委拖人不注意这方面,那末告知他冗杂的菜单会制止搜刮引擎的排名.(木木:像禅意花圃就是一个不错的CSS网站.)
利用CSS能够创立一个更有吸引力的导航,由于CSS没有和文本夹杂在一同,以是确保了导航的可会见性和使那些手持设备也能够读出.在这个教程里我们将看到一个基于CSS的导航.基于CSS的网站会加速网页加载的工夫,如许基于图象的导航将垂垂的被减少失落.
导航的布局
先看最终效果:

登录/注册后可看大图

20091128122750874.jpg (19.47 KB, 下载次数: 2)

下载附件保存到相册

CSS教程之CSS实例教程:制造网页2级导航

2015-1-15 23:33 上传

导航的实质是让扫瞄者更好的会见你的网站,以是要创建成心义的语义.使CSS和语义符合合,为了今后便利保护.注重要制止现有扫瞄器的不兼容.
办理计划
上面是导航的HTML和CSS的代码,效果如图.

登录/注册后可看大图

这是创立导航的HTML代码
=========================
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://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>
<divid="navigation">
<ul>
<li><ahref="#">Recipes</a></li>
<li><ahref="#">ContactUs</a></li>
<li><ahref="#">Articles</a></li>
<li><ahref="#">BuyOnline</a></li>
</ul>
</div>
</body>
</html>

============================
利用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:12pxsolid#711515;
border-right:1pxsolid#711515;
background-color:#B51032;
color:#FFFFFF;
text-decoration:none;
}

======================
剖析:
先创立一个无序列表的导航条,并做好导航链接.
========================
<ul>
<li><ahref="#">Recipes</a></li>
<li><ahref="#">ContactUs</a></li>
<li><ahref="#">Articles</a></li>
<li><ahref="#">BuyOnline</a></li>
</ul>
========================
然后用一个div把这个无序列表包括起来.
===========================
<divid="navigation">
<ul>
<li><ahref="#">Recipes</a></li>
<li><ahref="#">ContactUs</a></li>
<li><ahref="#">Articles</a></li>
<li><ahref="#">BuyOnline</a></li>
</ul>
</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:12pxsolid#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">
<htmlxmlns="http://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="listnav_sub.css"/>
</head>
<body>
<divid="navigation">
<ul>
<li><ahref="#">Recipes</a>
<ul>
<li><ahref="#">Starters</a></li>
<li><ahref="#">MainCourses</a></li>
<li><ahref="#">Desserts</a></li>
</ul>
</li>
<li><ahref="#">ContactUs</a></li>
<li><ahref="#">Articles</a></li>
<li><ahref="#">BuyOnline</a></li>
</ul>
</div>
</body>
</html>
#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:12pxsolid#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款式,布局也长短常的明晰.

登录/注册后可看大图

在主菜单<li>工具包括一个列表:
============================
<divid="navigation">
<ul>
<li><ahref="#">Recipes</a>
<ul>
<li><ahref="#">Starters</a></li>
<li><ahref="#">MainCourses</a></li>
<li><ahref="#">Desserts</a></li>
</ul>
</li>
<li><ahref="#">ContactUs</a></li>
<li><ahref="#">Articles</a></li>
<li><ahref="#">BuyOnline</a></li>
</ul>
</div>

===========================
在html中假如没有增加CSS的话,那末嵌套列表将持续主菜单的CSS款式,靠右边浮动,以是要增加个空缺,与主菜单有必定的间隔.

登录/注册后可看大图

=========================
#navigationulul{
margin-left:12px;
}

=======================
接上去我们再给嵌套里的<li><a>工具增加款式.
========================
#navigationululli{
border-bottom:1pxsolid#711515;
margin:0;
}
#navigationulula:link,#navigationulula:visited{
background-color:#ED9F9F;
color:#711515;
}
#navigationulula:hover{
background-color:#711515;
color:#FFFFFF;
}

</p>
你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。

只看该作者 · 发表于 2015-1-17 23:12:48

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

只看该作者 · 发表于 2015-1-24 07:19:23

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

只看该作者 · 发表于 2015-1-31 23:51:46

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-2-7 02:52:33

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-2-20 11:47:07

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

只看该作者 · 发表于 2015-3-6 17:36:43

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

只看该作者 · 发表于 2015-3-13 06:09:22

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

只看该作者 · 发表于 2015-3-20 14:59:13

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] CSS教程之CSS实例教程:制造网页2级导航

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子