使用HTML5做的导航条详细步骤

转载请注明出处：http:// blog .csdn.net/lindonglian
首先准备网页背景图片和导航背景图片，放在同一目录下的images文件夹中

&nbs p;

编写ht ML 文件

<!DOCTY PE  html P ub LIC "-//W3C//DTD XHTML 1.0 Trans IT ional//EN" "http://HdhCmsTestw3. org /TR/xhtml1/DTD/xhtml1 -t ransitional.dtd">
<html  XM lns="http://HdhCmsTestw3.org/1999/xhtml">
<head>
< ;m eta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link  hr ef="styles/navigation.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<header>
  <nav>
    <ul>
      <li><a href=" # " title="首页" t arg et="_blank">首页</a></li>
      <li><a href="#" title="国内新闻" target="_blank">国内新闻</a></li>
      <li><a href="#" title=" 国外 新闻" target="_blank">国外新闻</a></li>
      <li><a href="#" title="娱乐新闻" target="_blank">娱乐新闻</a></li>
      <li><a href="#" title="时事新闻" target="_blank">时事新闻</a></li>
      <li><a href="#" title="联系我们" target="_blank">联系我们</a></li>
    </ul>
  </nav>
</header>
</body>
</html>

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

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

加个导航

nav{
    float: left;
    width:920px;
    h ei ght: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 -s tyle: none;
}

让链接横排

nav ul li {
    dis play : 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-f ami ly: Tahoma;
    outline: none;
}

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

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

到此这篇关于用HTML5做的导航条详细步骤的文章就介绍到这了,更多相关html5导航条内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是为你收集整理的使用HTML5做的导航条详细步骤全部内容，希望文章能够帮你解决使用HTML5做的导航条详细步骤所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于使用HTML5做的导航条详细步骤的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did206112

更新时间：2023-05-03 阅读：16次