Css制作导航菜单_第1页
Css制作导航菜单_第2页
Css制作导航菜单_第3页
Css制作导航菜单_第4页
Css制作导航菜单_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Css制作导航菜单除非你的网站只有一页，不然你一定会用的导航的.事实上，导航在网页设计中是最重要部分之一.你要用很多时间去考虑如何让浏览者更容易访问你的网站.在以前做网站导航时，往往依赖于图像，表格，和javascript.而这些都严重的影响了网站的可访问性和可使用性.如果在一个缺乏支持javascript的用户，那么你的网站导航将无算正常的显示.比如说一个用户把浏览器的javascript关闭掉，或者在一个只能读纯文字的手持设备--它们将无算从你的网站读到所有的数据.如果你的委拖人不注重这方面,那么告诉他繁杂的菜单会阻止搜索引擎的排名.（木木:像禅意花园就是一个不错的CSS网站.）使用CSS可以创建一个更有吸引力的导航，因为CSS没有和文本混合在一起，所以确保了导航的可访问性和使那些手持设备也可以读出.在这个教程里我们将看到一个基于CSS的导航.基于CSS的网站会加快网页加载的时间,这样基于图像的导航将渐渐的被淘汰掉.导航的结构先看效果图：RecipesStarters知MainCoursesDessertsContactUsArticlesBuyO导航的本质是让浏览者更好的访问你的网站，所以要建立有意义的语义.使CSS和语义相符合，为了以后方便维护.注意要避免现有浏览器的不兼容.解决方案下面是导航的HTML和CSS的代码，效果如图.RecipesContactU&ArticlesBuyOnline这是创建导航的HTML代码<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="/1999/xhtml"lang="en-US"><head><title>Listsasnavigation</title><metahttp-equiv="content-type"c/><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>在浏览器中显示默认的样式.R—ims.GonlaclUsArticasBuyOnline接下来我们要做的第一件事是给这个div定义宽度.#navigation{width:200px;}给列表添加样式，去掉默认的圆点和清除填充.#navigationul{list-style:none;margin:0;padding:0;}在浏览器中显示：RecipesContactUsArticlesBuyOnline给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;效果如图:RecipesContactUsArticlesBuyOnline我们可以看到使用CSS来实现这个效果是非常简单的.在这个例子里我只是改下翻转的背景的颜色.你可以在翻转时改变边框，和文字的颜色.在现代的浏览器中,比如说IE7,你可以给任何对象添加:hover伪类选择器.但是在IE6以下版本却不能这样使用.在老式的版本中只充许锚文本可以点击，因此用户只能点击到文字，而不是背景.我们如何解决这个问题，这里有一个黑客的方法:扩大链接的宽度.*html#navigationlia{width:100%;}如何使用CSS创建一个副导航到目前为止例子所建的是一个水平的导航，但有时我们需要在水平下添加一个副导航.我们给例子再增加嵌套并添加其CSS样式.<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="/1999/xhtml"lang="en-US"><head><title>Listsasnavigation</title><metahttp-equiv="content-type"c/><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;}效果如图:RecipesStarters必MainCoursesDessertsContactUsArticlesBuyO分析：嵌套列表是一个很好的方式来描述导航系统.在这个例子我们用了第一个列表来表示主菜单,而子菜单则包含在主菜单的下面.这样如没有CSS样式，结构也是非常的清晰.R—ig-MainCourses口D-ss白rts■ContactUsArticles.BuyOnlinv在主菜单<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-lef

人人文库> 全部分类> 图纸下载 > 毕业设计

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论