使用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实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 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
风格模板初级不完全修改教程
2006/10/09 PHP
JS实现php的伪分页
2008/05/25 PHP
php session 错误
2009/05/21 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
javascript数组去掉重复
2011/05/12 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
vue实现树状表格效果
2020/12/29 Vue.js
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
为Python程序添加图形化界面的教程
2015/04/29 Python
python下载微信公众号相关文章
2019/02/26 Python
基于python生成器封装的协程类
2019/03/20 Python
python函数的万能参数传参详解
2019/07/26 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
numpy库reshape用法详解
2020/04/19 Python
Python如何将装饰器定义为类
2020/07/30 Python
python学习笔记之多进程
2020/08/06 Python
微型企业创业投资计划书
2014/01/10 职场文书
道路交通安全实施方案
2014/03/12 职场文书
六一亲子活动总结
2014/07/01 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记
Python OpenCV实现图像模板匹配详解
2022/04/07 Python
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers