CSS 制作网页导航条(下)

2024-07-11 08:26:55

字体：大中小

来源：转载

供稿：网友

上节课我们将导航条做成了下面的效果

但是此时的导航条还没有链接，还不能点击，这节课我们就要做一个完整的导航条
【第四步】
我们需要将上面的导航条做以下几个修改
1）给上面的导航加上链接；
2）链接文字大小修改为12px;
3）并且规定链接样式，鼠标移上去和拿开的效果

修改方法如下
1）导航加链接，HTML代码如下：

复制代码

代码如下:
<div id="nav">
<ul>
<li><a href="#">CSS学习</a></li>
<li><a href="#">学前准备</a></li>
<li><a href="#">入门教程下载</a></li>
<li><a href="#">提高教程</a></li>
<li><a href="#">布局基础教程</a></li>
<li><a href="#">精彩应用</a></li>
</ul>
</div>

2) 文字大小12像素，CSS代码如下

复制代码

代码如下:
a{font-size:12px;}

3）鼠标移动上面和拿开效果

复制代码

代码如下:
#nav ul li a{color:#333; text-decoration:none;}
#nav ul li a:hover{color:#fff; text-decoration:underline;}

效果是不是和下面一样，鼠标移上去变成白色的有下划线的链接

到这里，基本上一个导航条就出来了~不过为了能让大家再提高一个层次，KwooJan就帮大家对上面的导航条进行一下修改，算是抛砖引玉！
我希望鼠标移上去后，链接的背景变成黑色的，下面是我的步骤
首先把链接a加上一个背景，以方便看出来链接a的区域

复制代码

代码如下:
#nav ul li a{color:#333; text-decoration:none; background:#0FF;}

怎么样，知道a的区域了吧

现在我要将a的高度设定为35px和盒子一样高度，这样我在把刚才的亮蓝色背景就可以完全覆盖下面盒子的灰色了
于是我插入下面红色的代码：

复制代码

代码如下:
#nav ul li a{height:35px; color:#333; text-decoration:none; background:#0FF;}

可是不管我怎么刷新浏览器，高度都没有任何变化，这是为什么呢？！
原因就在于a属于内联元素，内联元素是无法设置宽度和高度的，width和height只是针对块状元素，说道这里，解决办法就出来了，只要我们把内联元素a转化成块状元素就可以了，我们用“display:block;”将内联元素转化成块状元素。大家先不要加这段代码，闭上眼想想界面会变成什么样子？

上一篇：CSS 控制页面样式的4种方式和优先级问题

下一篇：xHTML+CSS与SEO的关系

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注