（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

 body{

     margin:0px;

     background-image:url(images/body.jpg);

     background-repeat:no-repeat;

     width:1003px;

 }

 nav{

     float:left;

     width:920px;

     height:40px;

     background-image:url(images/students.jpg);

     margin:100px 0 0 0;

     padding:;

 }

 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:12px 40px;

     text-align:center;

     font-size:14px;

     background:url(images/user.png) center right no-repeat;

     color:#fff;

     font-family:Tahoma;

     outline:none;

 }

 nav li a:hover{

     color:#2a5f00;

 }

html内容

 <!DOCTYPE html>

 <html>

   <head>

     <title>MyHtml.html</title>

     <link href="CSS/test.css" rel="stylesheet" type="text/css" />

     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

     <meta http-equiv="description" content="this is my page">

     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

   </head>

   <body>

     <header>

         <nav>

             <ul>

                 <li><a href="#" title="首页" target="_self">首页</a></li>

                 <li><a href="#" title="首页" target="_self">男男女女</a></li>

                 <li><a href="#" title="首页" target="_self">急急急</a></li>

                 <li><a href="#" title="首页" target="_blank">呸呸呸</a></li>

             </ul>

         </nav>

     </header>

   </body>

 </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. 学生与部门管理app-产品功能与界面的简单设计

    学生与部门管理app-产品功能与界面的简单设计 1. 结对成员学号 我:********* 大佬:*******10 2. 需求分析(NABCD模型) 2.1 N-需求 各个部门在开学初占据学校青春广 ...

  2. webpack-dev-server 配置

    webpack.config.js 配置 var ExtractTextPlugin = require("extract-text-webpack-plugin"); var C ...

  3. [HAOI2017]供给侧改革

    题目 这道题我们其实就是利用了一棵后缀树 由于字符串是随机的,所以这个后缀树的树高是\(log\)的,基于树高的算法是能过的 我们考虑后缀树上的两个节点的\(lca\)就是这两个节点所代表的后缀的\( ...

  4. 【LGP5176】公约数

    题目 老年选手啥都不想推只能搞个杜教筛了 这个式子长得好吓人啊,所以我们唯一分解之后来考虑这道题 设\(i,j,k\)分别是\(p^a,p^b,p^c\),至于到底谁是谁并不重要,我们不妨假设\(a\ ...

  5. 转://Linux下tmpfs介绍及使用

    tmpfs介绍 tmpfs是一种虚拟内存文件系统,而不是块设备.是基于内存的文件系统,创建时不需要使用mkfs等初始化它最大的特点就是它的存储空间在VM(virtual memory),VM是由lin ...

  6. Java中关于AbstractQueuedSynchronizer的入门（一）

    备注:博文仅仅是学习过程中的零散记录,后期整理. AbstractQueuedSynchronizer的简单介绍可以网上搜索,简单了解字段作用. 示例代码,分析获取锁的过程: import java. ...

  7. 斯坦福HAI—细数全球18件AI大事记

    3 月 18 日,由李飞飞担任所长之一的「以人为本人工智能研究所」(HAI)自启动以来不短的时间后,终于完成了正式成立的高光时刻.而正式上线的官网日前也更新了两条博文,一篇是详尽介绍 HAI 的文章: ...

  8. Django rest framework集成微博第三方登录

    Django restframework 集成第三方登录(微博.微信.QQ等) 友情链接 python-social-auth-app官方文档 微博开放者平台 QQ开放者平台 准备工作 1.注册微博开 ...

  9. springadmin环境搭建

    一路走过来都是坑,记录下来以后避免在踩 springboot版本信息2.0.3 admin服务端 maven配置信息 <properties> <project.build.sour ...

  10. Objective-C Core Animation深入理解

    Core Animation(核心动画),是从Layer Kit(图层工具包)演变而来的,不仅仅可以用来做动画. 1.视图 一个视图就是屏幕上显示的一个矩形,例如文字.图片和视频. 视图是UIView ...