使用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 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
css3 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 HTML / CSS
HTML5未来发展趋势
Feb 01 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
HTML基本元素标签介绍
Feb 28 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设计模式中单例模式的应用分析
2013/05/15 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
PHP小技巧之函数重载
2014/06/02 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
Python变量和字符串详解
2017/04/29 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
详解Django admin高级用法
2019/11/06 Python
基于Python测试程序是否有错误
2020/05/16 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
关于安全的标语
2014/06/10 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
Python 数据可视化之Bokeh详解
2021/11/02 Python
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android