用HTML5做的导航条(步骤非常详细)

用HTML5做的导航条(步骤非常详细)转载请注明出处:这里写链接内容首先准备网页背景图片和导航背景图片,放在同一目录下的images文件夹中编写html文件

大家好,又见面了,我是你们的朋友全栈君。

转载请注明出处:http://blog.csdn.net/lindonglian
首先准备网页背景图片和导航背景图片,放在同一目录下的images文件夹中
这里写图片描述
编写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; }

这里写图片描述
加个导航

nav{ float: left; width:920px; height:40px; background-image:url(../images/nav.jpg); margin: 100px 0 0 0; padding: 0 ; }

这里写图片描述
无序列表

nav ul { float:left; margin: 0px; padding: 0 0 0 0; width: 920px; list-style: none; }

这里写图片描述
让链接横排

nav ul li { display: inline; }

这里写图片描述

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; }

这里写图片描述
鼠标经过该链接,呈现深绿色

nav li a:hover { color: #2a5f00; }

鼠标经过该链接

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/140139.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • git 迁出/克隆远程仓库的指定分支方法(附常用git配置命令)

    普通克隆方式:gitclone&lt;远程仓库地址&gt;这种克隆方式默认是克隆master主分支,而且通过命令gitbranch–list能看到克隆后在本地也只有这一个分支,如果再通过新建分支再拉取指定分支,甚至可能还需要解决冲突,太繁琐。那么,如何快速有效的直接克隆远程指定分支?只需要一条命令:gitclone-b&lt;指定分支名&gt;&…

  • 八数码问题简单解决办法

    八数码问题简单解决办法问题分析:八数码问题是一个经典的BFS问题,把棋局看成一个状态图,共有9!种状态。从初始棋局开始,每次转移到下个状态,直到目标棋局为止。仔细分析可知,八数码的关键是判重,如果不去除重复状态,程序会产生很多无效状态,从而复杂度大大增加解决算法:BFS+Cantor案例分析:(0表示空格所在位置)初始棋局:|1|2|3||0|8|4||7|6|5|目标棋局:|1|0|…

  • ubuntu python安装pip_ubuntu离线安装pip

    ubuntu python安装pip_ubuntu离线安装pip说明pip是一个安装和管理Python包的工具。在Pip的帮助下,你可以安装独特版本的包。最重要的是,Pip可以通过一个“requirements”的工具来管理一个由包组成的列表和版本号。Pip很像easy_install,但是Pip有一些额外的特色。ubuntu安装pip#建议在操作前将源替换为163或阿里的源#1.更新系统包sudoapt-getupdatesud

    2022年10月27日
  • Linux下rpm安装lrzsz

    Linux下rpm安装lrzsz下载yum-yinstallyum-utilsyumdownloader–resolve–destdir=/root/soft/lrzszlrzsz[root@instance-1apocjsh~]#yumdownloader–resolve–destdir=/root/soft/lszrzlrzszLastmetadataexpirationcheck:0:02:48agoonSat19Mar202211:22:41PMCST.lrzs

  • linux修改nfs端口,centOS 搭建NFS服务器 配置端口映射使不同网段可访问

    linux修改nfs端口,centOS 搭建NFS服务器 配置端口映射使不同网段可访问1.修改/etc/exports,增加共享文件夹:/home/haishao_deng*(rw,nohide,insecure,no_subtree_check,async,no_root_squash)如果已经安装开启nfs,则只需执行exportfs-rv2.安装NFSsudoyum-yinstallnfs-utilsrpcbindsudochkconfignfson…

  • 解惑4:java是值传递还是引用传递

    解惑4:java是值传递还是引用传递一、概述曾经纠结了很久java的参数传递方式是什么样的,后面粗略的了解了一鳞半爪以后有了大概的印象:“传参数就是值传递,传对象就是引用传递”,后面进一步查找了相关资料和文章以后,发现这么理解是不正确

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号