- 相关推荐
在自学网页设计路上:[2]如何制作简单导航栏
一个网页必不可少的元素之一,导航,虽然各种创新已经逐渐把导航栏的“栏”给去掉了,以非栏架的形式制作出导航。所以,导航是一个网页友好的入口,要学习网页制作,制作导航栏是必须的。
工具/原料
DW
调试浏览器
方法/步骤
制作导航栏的一般思想是通过无序标签ul来实现的,由li来加入各个栏目,加入超链接,同时可以在其中加入ID标签,方便下步操作。
通过外链样式表导入基本的CSS代码,可以实现导航栏初步效果
通过padding内补白拉开距离。在这里也可以使用margin做出距离,但是margin有时候在计算中会出现叠加现象。所以个人习惯使用padding
然后使用伪类实现两个效果:a、去掉超链接下划线;b、鼠标经过变换颜色。应注意颜色的取值应该接近但有明暗区别。
CSS代码汇总(方便复制尝试)
#container{margin:0 auto; width:800px;}
#nav ul{list-style:none;}
#nav ul li{float:left;}
#nav li a{padding:7px 10px;}
#nav li a:link,#nav li a:visited{background-color:#393; text-decoration:none;
color:#FFF;}
#nav li a:hover{background-color:#360;color:#999;}
注意事项
以上代码属于基本的导航栏代码,应该加上一些调整以适应页面内容。
推荐使用firebug等调试工具
在自学网页设计路上 (共3篇) 上一篇:如何使网页自动居... | 下一篇:如何布局网页主体
[在自学网页设计路上:[2]如何制作简单导航栏]相关文章:
【在自学网页设计路上:[2]如何制作简单导航栏】相关文章:
网页设计制作教程《实例》207-14
网页制作教学设计07-28
网页设计与制作报告01-04
制作网页教学设计04-20
网页设计与制作心得12-12
网页制作教学设计10-01
网页制作教学设计02-25
为什么APP导航栏的放置?07-10
【热】网页设计与制作心得01-15