css 导航条突出显示当前页面

html-css018

css 导航条突出显示当前页面,第1张

#home #nav li#m1 a,

#about #nav li#m2 a,

#products #nav li#m3 a,

#services #nav li#m4 a,

#contact #nav li#m5 a{ color: #FFF background: #DC4E1B url(newfile.gif) no-repeat}

<div id="home">

<ul id="nav">

<li id="m1"><a href="1.html">Home</a></li>

<li id="m2"><a href="2.html">About</a></li>

<li id="m3"><a href="3.html">Products</a></li>

</ul>

</div>

导航条是一个网站中必不可少的元素，那么如何用HTML和CSS制作一个导航条呢？下面我给大家分享一下。

工具/材料

Sublime Text

首先打开SublimeText软件，新建一个html页面，并且在html页面中准备好html结构，如下图所示

接下来我们在html的body结构里添加导航条的内容，如下图所示

然后就需要在style标签中用CSS对导航条的样式进行定义了，如下图所示，书写样式的时候一定要注意写在style标签里面

最后运行html页面，你就会看到如下图所示的导航条，当鼠标放在某个导航上时，背景色会变成红色

div是网页的一个标签就好比html标签，div是一个层

css网页模版就是用css写好的网页布局，可以用来编排网页，直接把那个css文件拷过来，然后就可以用那些样式了。