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


Posted in HTML / CSS onOctober 19, 2020

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

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

编写html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="styles/navigation.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<header>
  <nav>
    <ul>
      <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>
      <li><a href="#" title="联系我们" target="_blank">联系我们</a></li>
    </ul>
  </nav>
</header>
</body>
</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导航条内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3 calc()会计算属性详解
Feb 27 HTML / CSS
css3 border-image使用说明
Jun 23 HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 #HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 #HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 #HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 #HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 #HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 #HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 #HTML / CSS
You might like
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
DOM 高级编程
2015/05/06 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
校长寄语大全
2014/04/09 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
活动总结范文
2014/08/30 职场文书
高中教师个人总结
2015/02/10 职场文书
婚礼父母致辞
2015/07/28 职场文书
小学美术教学反思
2016/02/17 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android