怎样使用CSS设计水平导航条
导航条是我们设计网页时必须要掌握的方法。经典的方法是使用“列表+CSS”的方法创建,下面开始讲解如何使用CSS方法创建出好看的导航条先看一下最终效果图:
步骤/方法
- 01
需要两个小小的图片,分别用来填充背景与分隔条。
- 02
编写html代码,很简单,用ul、li列表就可以了。下面是原代码:(包含效果图)
- 03
然后开始CSS部分。首先:加背景;其次:将竖直列表变成水平,用float:left就可以实现。 相应的CSS代码如下(附效果图):
- 04
最后再美化一下,给a标签左右2em的间距,同时加上竖线背景(mainNavBorder.jpg),并弄上:hover时的变化(这里只是让颜色变化) 在上面的CSS基础上,添加如下代码:
赞 (0)