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

发布于 2021-03-21 22:37:50
分享
海报
165
上一篇:Shell文本中如何使用sed 下一篇:如何使用windows bat脚本命令一键启动MySQL服务
目录

    忘记密码?

    图形验证码