如何使用HTML5做的导航条

tangjin

作者

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

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

编写html文件

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<linkhref="styles/navigation.css"rel="stylesheet"type="text/css"/>
</head>

<body>
<header>
<nav>
<ul>
<li><ahref="#"title="首页"target="_blank">首页</a></li>
<li><ahref="#"title="国内新闻"target="_blank">国内新闻</a></li>
<li><ahref="#"title="国外新闻"target="_blank">国外新闻</a></li>
<li><ahref="#"title="娱乐新闻"target="_blank">娱乐新闻</a></li>
<li><ahref="#"title="时事新闻"target="_blank">时事新闻</a></li>
<li><ahref="#"title="联系我们"target="_blank">联系我们</a></li>
</ul>
</nav>
</header>
</body>
</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;
}