在自学网页设计路上：[2]如何制作简单导航栏.docx

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