CSS教程之CSS实例教程:制造网页2级导航
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。网页制造poluoluo文章简介：利用CSS能够创立一个更有吸引力的导航,由于CSS没有和文本夹杂在一同,以是确保了导航的可会见性和使那些手持设备也能够读出.在这个教程里我们将看到一个基于CSS的导航.基于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="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。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人. dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
页:
[1]