使用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 动画效果的总结详解
May 09 HTML / CSS
纯CSS3实现滚动的齿轮动画效果
Jun 05 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
js点击选择文本的方法
2015/02/09 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
js实现登录验证码
2016/12/22 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python open读写文件实现脚本
2008/09/06 Python
python 排列组合之itertools
2013/03/20 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
小班重阳节活动方案
2014/02/08 职场文书
四大名著读书笔记
2015/06/25 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技