使用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 相关文章推荐
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
详解CSS中iconfont的使用
Aug 04 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
css3手动实现pc端横向滚动
Jun 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
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
js实现微博发布小功能
2017/01/12 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
Python3学习urllib的使用方法示例
2017/11/29 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
python 实现表情识别
2020/11/21 Python
销售人员个人求职信
2013/09/26 职场文书
文史专业毕业生自荐信
2013/11/17 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
气象学专业个人求职信
2014/04/22 职场文书
学会感恩主题班会
2015/08/12 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
详解 TypeScript 枚举类型
2021/11/02 Javascript