大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

如何使用HTML5做的导航条

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

十余年的玛纳斯网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同,自动调整玛纳斯建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“玛纳斯网站设计”,“玛纳斯网站推广”以来,每个客户项目都认真落实执行。


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

如何使用HTML5做的导航条 

编写html文件





无标题文档




  

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

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

如何使用HTML5做的导航条 

加个导航

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

如何使用HTML5做的导航条 

无序列表

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

如何使用HTML5做的导航条 

让链接横排

nav ul li {
    display: inline;
}

如何使用HTML5做的导航条

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;
}

如何使用HTML5做的导航条 

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

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

如何使用HTML5做的导航条

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


分享题目:如何使用HTML5做的导航条
本文路径:http://dzwzjz.com/article/ppioio.html
在线咨询
服务热线
服务热线:028-86922220
TOP