网页设计 百分网手机站

如何制作简单导航栏

时间:2020-09-19 08:03:21 网页设计 我要投稿

如何制作简单导航栏

  导语:一个网页必不可少的元素之一,导航,虽然各种创新已经逐渐把导航栏的“栏”给去掉了,以非栏架的形式制作出导航。所以,导航是一个网页友好的入口,要学习网页制作,制作导航栏是必须的。

  导航栏简单制作方法

  1、制作导航栏的一般思想是通过无序标签ul来实现的,由li来加入各个栏目,加入超链接,同时可以在其中加入ID标签,方便下步操作。

  2、通过外链样式表导入基本的'CSS代码,可以实现导航栏初步效果

  3、通过padding内补白拉开距离。在这里也可以使用margin做出距离,但是margin有时候在计算中会出现叠加现象。所以个人习惯使用padding

  4、然后使用伪类实现两个效果: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等调试工具


【如何制作简单导航栏】相关文章:

Word文档如何分两栏,三栏,多栏09-26

wps如何制作简单的表格10-02

用DW MX制作导航下拉菜单09-12

使用PhotoShop制作斜纹质感网页导航按钮教程11-20

如何在Word工具栏添加常用文档10-07

网页设计中如何正确使用面包屑导航10-04

简单的PPT制作技巧10-07

excel表头斜线如何制作09-29

word电子小报如何制作09-29