（1）background-repeat:no-repeat;图片不平铺

（2）使用<ul>和<li>便签，代码简介有序、易于编排。

（3）在引入外部css文件时，<link>标签中的rel是关联的意思，rel="stylesheet";

（4）display:inline;实现使多个<div>像<span>标签显示在一行。

（5）list-style:none;列表样式：无。  用于在一个声明中设置列表的所有属性的简写属性。涵盖了所有其他列表样式属性，仅作用于具有display值为list-item的对象（如li对象）。

（6）text-decoration:none;无值；underline定义文本下的一条线；overline定义文本上的一条线；line-through定义穿过文本下的一条线；blink定义闪烁的文本。

（7）outline:none;为不设置边框；语法：Object.style.outline = outlineWidth outlineStyle outlineColor 设置边框宽、样式、颜色。

（8）target="_self" <a>标签内设置，本页面打开；target="_blank"新打开一个页面

（9）定义伪类链接，鼠标经过更改颜色或其他a:hover{color:#abcdef;}

test.css

  1.  body{
  2.      margin:0px;
  3.      background-image:url(images/body.jpg);
  4.      background-repeat:no-repeat;
  5.      width:1003px;
  6.  }
  7.  
  8.  nav{
  9.      float:left;
  10.      width:920px;
  11.      height:40px;
  12.      background-image:url(images/students.jpg);
  13.      margin:100px 0 0 0;
  14.      padding:;
  15.  }
  16.  
  17.  nav ul{
  18.      float:left;
  19.      margin:0px;
  20.      padding:0 0 0 0;
  21.      width:920px;
  22.      list-style:none;
  23.  }
  24.  nav ul li{
  25.      display:inline;
  26.  }
  27.  nav ul li a{
  28.      float:left;
  29.      padding:12px 40px;
  30.      text-align:center;
  31.      font-size:14px;
  32.      background:url(images/user.png) center right no-repeat;
  33.      color:#fff;
  34.      font-family:Tahoma;
  35.      outline:none;
  36.  }
  37.  
  38.  nav li a:hover{
  39.      color:#2a5f00;
  40.  }

html内容

  1.  <!DOCTYPE html>
  2.  <html>
  3.    <head>
  4.      <title>MyHtml.html</title>
  5.      <link href="CSS/test.css" rel="stylesheet" type="text/css" />
  6.      <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  7.      <meta http-equiv="description" content="this is my page">
  8.      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  9.  
  10.    </head>
  11.  
  12.    <body>
  13.      <header>
  14.          <nav>
  15.              <ul>
  16.                  <li><a href="#" title="首页" target="_self">首页</a></li>
  17.                  <li><a href="#" title="首页" target="_self">男男女女</a></li>
  18.                  <li><a href="#" title="首页" target="_self">急急急</a></li>
  19.                  <li><a href="#" title="首页" target="_blank">呸呸呸</a></li>
  20.              </ul>
  21.          </nav>
  22.      </header>
  23.    </body>
  24.  </html>

html5制作导航条的更多相关文章

  1. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  2. 分针网—IT教育：使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...

  3. css 制作导航条布局

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  4. ps制作导航条 分割线技巧

    1 用矩形工具画一个像素的矩形(注意不是路径) 2给矩形添加蒙版,用渐变工具对其进行渐变,达到两头渐隐藏的效果. 制作按钮技巧 用矩形工具画出矩形 然后给矩形添加 内发光 渐变叠加 光泽  描边等操作 ...

  5. css ul li 制作导航条

    <html> <head> <style> .test ul{list-style:none;} .test li{float:left; width:100px; ...

  6. Bootstrap_导航条

    一.基础导航条 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个 ...

  7. Bootstrap每天必学之导航条

    http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...

  8. Bootstrap学习-导航条-分页导航

    1.导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条 ...

  9. bootstrap基础学习【导航条、分页导航】（五）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 服务器出现大量的127.0.0.1:3306 TIME_WAIT连接 解决方法 [转载]

    netstat -an 192.168.12.13:3306      192.168.12.12:30443      TIME_WAIT 192.168.12.13:3306      192.1 ...

  2. 控件布局_TableLayout

    <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android=" ...

  3. [ZJOI2005]午餐

    嘟嘟嘟 贪心+dp. 首先贪心很容易想到,把吃饭时间长的人排在前面.因为打饭时间的顺序对最终答案没有影响,所以可以以吃饭时间为关键字排序. 然后就是dp了(我当时还自信满满的贪心交了一发--显然WA啊 ...

  4. Idea设置快捷键以及修改Eclipse的debug快捷键

    Idea强大不多说了,用久了都可以习惯,但是感觉Idea的debug真是不如eclipse好用,Idea的快捷键都是组合键,用着繁琐.两种方法可以设置eclipse的快捷键: 1:直接全局都使用ecl ...

  5. Spring Boot中Web应用的统一异常处理

    我们在做Web应用的时候,请求处理过程中发生错误是非常常见的情况.Spring Boot提供了一个默认的映射:/error,当处理中抛出异常之后,会转到该请求中处理,并且该请求有一个全局的错误页面用来 ...

  6. go标准库的学习-encoding/xml

    参考:https://studygolang.com/pkgdoc 导入方式: import "encoding/xml" 实现的简单的理解XML命名空间的XML 1.0编译器 f ...

  7. go标准库的学习-strings-字符串操作

    参考https://studygolang.com/pkgdoc 导入方式: import "strings" strings包实现了用于操作字符的简单函数. 常用的几个函数: f ...

  8. go标准库的学习-net/rpc/jsonrpc

    参考:https://studygolang.com/pkgdoc 导入方式: import "net/rpc/jsonrpc" jsonrpc包实现了JSON-RPC的Clien ...

  9. CentOS 7.x编译安装Nginx1.10.3+MySQL5.7.16+PHP5.2 5.3 5.4 5.5 5.6 7.0 7.1多版本全能环境

    准备篇 一.防火墙配置 CentOS 7.x默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: systemctl stop firewalld.se ...

  10. Flink 的datastreamAPI 以及function函数的调用，性能调优

    1 DataStreamAPI1.1 DataStream Data Sources source是程序的数据源输入,你可以通过StreamExecutionEnvironment.addSource ...