html5如何制作简易导航条

这篇文章主要介绍了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: 100px 0 0 0;    padding: 0 ;}

无序列表:

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

让链接横排:

nav ul li {    display: inline;}

nav ul li a {    float: left;    padding: 11px 20px;     font-size: 14px;    text-align: center;    text-decoration: none;    background: url(../images/templatemo_menu_divider.png)        center right no-repeat;    color: #fff;        font-family: Tahoma;    outline: none;}

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

nav li a:hover {    color: #2a5f00;}

关于"html5如何制作简易导航条"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"html5如何制作简易导航条"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。