作家
登录

网页导航上用CSS标志当前页效果

作者: 来源:www.28hudong.com 2012-11-19 22:47:59 阅读 我要评论

  当前页面--比如说现在的页面是首页,那么在导航栏上首页的色彩等和其他栏目有所不同,用以给浏览者一个明显的指示。下面来说下具体的做法,菜单的基本实现和一般的CSS菜单没多大区别,着重说下如何实现当前页。   设菜单有5个栏目:home、about、products、services、contact,分别给每个栏目一 个ID,m1-m5,CSS可写成如下: #home#navli#m1a, #about#navli#m2a, #products#navli#m3a, #services#navli#m4a, #contact#navli#m5a{color:#FFF;background:#DC4E1Burl(navbg.gif)no-repeat;}   xhtml: <ulid="nav"> <liid="m1"><ahref="index.html">Home</a></li> <liid="m2"><ahref="about.html">About</a></li> <liid="m3"><ahref="products.html">Products</a></li> <liid="m4"><ahref="services.html">Services</a></li> <liid="m5"><ahref="contact.html">Contact</a></li> </ul>   然后分别给每个页面的bady标签一个独立的ID,例如给首页的ID是home,其余的类推 。   这样做法的好处是每个页面的菜单都是一样的,方便修改,动态页包含也容易。

  推荐阅读

  CSS教程,让网页对搜索引擎更友好

CSS语法立意让网页内容与视觉呈现分离,一方面使得页面维护工作更容易,不会因内容或视觉效果改变影响到另一方,这样的页面设计,也对搜寻引擎更为友善,更容易搜寻到页面内容。 CSS,Cascading Style Sheets 串>>>详细阅读


本文标题:网页导航上用CSS标志当前页效果

地址:http://www.17bianji.com/kaifa2/CSS/17200.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)