css导航条判断当前页面高亮效果显示

html-css07

css导航条判断当前页面高亮效果显示,第1张

一般当前高亮都是后台程序判断实现的，不是css做的，要用css做也行，只是麻烦点，要给每个栏目的<body>加上ID，这样做造成的麻烦是弄后台程序的时候不能把<body>这行直接写入页头包含文件之中：

下面代码每个body都有自己的ID来识别当前是什么栏目，导航栏每个li也加了class：

------------首页html------------

<body id="home">

<div class="menu">

<ul>

<li class="home"><a>首页</a></li>

<li class="about"><a>介绍</a></li>

<li class="news"><a>新闻</a></li>

<li class="job"><a>招聘</a></li>

</ul>

</div>

</body>

------------介绍页html------------

<body id="about">

...

</body>

------------新闻页html------------

<body id="news">

...

</body>

===============

Css code：

===============

/*导航按钮的默认样式*/

.menu li a{color:#000}

/*当前栏目高亮样式*/

#home .menu .home a ,

#about .menu .about a ,

#news .menu .news a ,

#job .menu .job a{color:red}

CSS实现了网页内容设计和样式设计的分工！

知道项目业务逻辑的人可以只进行内容设计（即页面上要显示哪些东西）而不必去管如何布局如何本色等界面设计问题，然后把内容设计的结果交给精通界面设计的人，由他写CSS。CSS可以控制页面的外观（如某一项内容应该该摆在哪里，使用什么颜色等等）。同样的内容结构，套上不同的CSS，效果完全不同！

另外，多个页面可以共享一个CSS文件，使得网站的页面风格一体化！

关于问题的补充，网页美不美与技术关系不大，要看设计者的灵感以及审美观，现代网页设计一般使用DIV+CSS。