如何使用HTML5做的导航条

这篇文章将为大家详细讲解有关如何使用HTML5做的导航条，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

首先准备网页背景图片和导航背景图片，放在同一目录下的images文件夹中

编写html文件

接下来写样式表，常规放在同一目录下的styles文件夹中 看看样式带来的变化 给网页添加背景图片

@charset"utf-8";
body{
margin:0px;
background-image:url(../images/bg.jpg);
background-repeat:no-repeat;
width:800px;
}

加个导航

nav{
float:left;
width:920px;
height:40px;
background-image:url(../images/nav.jpg);
margin:100px000;
padding:0;
}

无序列表

navul{
float:left;
margin:0px;
padding:0000;
width:920px;
list-style:none;
}

让链接横排

navulli{
display:inline;
}

navullia{
float:left;
padding:11px20px;
font-size:14px;
text-align:center;
text-decoration:none;
background:url(../images/templatemo_menu_divider.png)centerrightno-repeat;
color:#fff;
font-family:Tahoma;
outline:none;
}

鼠标经过该链接，呈现深绿色

navlia:hover{
color:#2a5f00;
}

关于“如何使用HTML5做的导航条”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。