HTML5怎么做导航栏

请注意以下几点一：只能用HTML5+CSS二：要保证在不同页面跳转的时候导航栏始终不变。... 请注意以下几点
一：只能用HTML5 + CSS
二：要保证在不同页面跳转的时候导航栏始终不变。展开

 我来答

3个回答

#合辑# 机票是越早买越便宜吗？

糖糖寳寳
推荐于2016-02-28 · TA获得超过6.4万个赞

知道大有可为答主

回答量：1.8万

采纳率：92%

帮助的人：3954万

我也去答题访问个人页

关注

展开全部

建议使用FF，Safari，举个例子：
<!doctype html>
<html>
<head>
<title>HTML5+CSS3+JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<style type="text/css">
body {
behavior: url(ie-css3.htc);
}
* {margin:0 auto;padding:0;}
body {font-size:13px;font-family:Arial;}
ul li {list-style:none;}

#menu {
width:982px;
height:35px;
margin-top:20px;display:block;

background: #e3e3e3;
background: -moz-linear-gradient(top, #ccc, #999);
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));

-moz-box-shadow: 1px 1px 3px #333;
-webkit-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333;

-webkit-border-top-left-radius:4px;;
-webkit-border-top-right-radius:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-webkit-border-bottom-left-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-o-border-radius:4px;
-khtml-border-radius:4px;
text-shadow: 0 1px 0 white;
}
#menu ul {
margin-left:0;
}
#menu ul li {
display:inline;
}
#menu ul li a:link, a:visited {
text-align:center;float:left;width:6.8em;text-decoration:none;padding:7.5px 0.75em;font-size:16px;font-weight:bold;margin-top:0px;border-right:1px solid #ccc;color: #454545;
}
#menu ul li a:hover {
text-decoration:none;
background:-webkit-gradient(linear, left top, left bottom, from(#333), to(#ccc));
background: -moz-linear-gradient(top, #333, #ccc);
-webkit-background-size:0 35px;
color: #ddd;
text-shadow: 0 1px 0 black;

}
.text {
border:1px solid gray;width:150px;height:17px;position:relative;top:8px;left:13px;font-family:Arial;
-webkit-border-top-left-radius:90px;;
-webkit-border-top-right-radius:90px;
-moz-border-radius-topleft:90px;
-moz-border-radius-topright:90px;
-webkit-border-bottom-left-radius:90px;
-webkit-border-bottom-right-radius:90px;
-moz-border-radius-bottomleft:90px;
-moz-border-radius-bottomright:90px;
-o-border-radius:90px;
-khtml-border-radius:90px;
}
</style>
<script language="JavaScript" type="text/javascript">
(function()
{
if(!0)
return;
var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog, eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=0,length=e.length;
while(i<length)
{
document.createElement_x(e[i++])
}
})();
</script>
</head>
<body>
<menu id="menu"><form action="index.php" method="get">
<ul>
<li><a href="#" title="HomePage">HomePage</a></li>
<li><a href="#" title="Introuduce">Introuduce</a></li>
<li><a href="#" title="Products">Products</a></li>
<li><a href="#" title="My album">My album</a></li>
<li><a href="#" title="Shopping">Shopping</a></li>
<li><a href="#" title="Contact our">Contact our</a></li>
</ul>
<input type="search" class="text" value="search..." /></form>
</menu>
<body>

已赞过 已踩过<

评论收起

jsnjzhaoxy
2015-08-22 · TA获得超过1322个赞

知道小有建树答主

回答量：611

采纳率：0%

帮助的人：172万

我也去答题访问个人页

关注

展开全部

使用纯CSS来实现的一个响应式导航菜单，我们使用的是HTML5+CSS3技术，当浏览器窗口变小或者使用手机浏览器访问的时候，原本横条菜单会收缩成一个下拉菜单，当鼠标滑向菜单时下拉展示全部菜单

此方法可以应用到有特别多的链接菜单项目中，特别在移动项目中，它可以将所有菜单转换成一个按钮式的下拉菜单。

HTML

示例中有一个导航菜单的html结构，元素<nav>用来定位导航菜单，.current表示当前活动的导航项。

复制代码
代码如下:

<ul>
<li
class="current"><a href="#">首页</a></li>
<li><a
href="#">客户服务</a></li>
<li><a
href="#">产品展示</a></li>
<li><a
href="#">经典案例</a></li>
<li><a
href="#">联系我们</a></li>
</ul>

CSS

首先我们要给菜单nav相对定位，我们在.nav li中使用display:
inline-block代替float:left，这样一来我们可以使用text-align
来对nav菜单进行左中右对齐设置。

复制代码
代码如下:

.nav {
position: relative;
margin:
20px 0;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {

margin: 0 5px 10px 0;
padding: 0;
list-style: none;
display:
inline-block;
}
.nav a {
padding: 3px 12px;
text-decoration:
none;
color: #999;
line-height: 100%;
}
.nav a:hover {

color: #d0d0d0;
}
.nav .current a {
background: #999;
color:
#fff;
border-radius: 5px;
}
使用text-align对菜单进行右对齐和居中对齐。

/*
right nav */
.nav.right ul {
text-align: right;
}

/* center
nav */
.nav.center ul {
text-align: center;
}

接下来我们来做响应式设计，我们使用CSS3的media
query来实现。当浏览器窗口宽度小于600px时，我们把<nav>设置成relative相对定位，把<ul>设置成absolute绝对定位，并且display:none隐藏所有li元素，这个时候导航菜单变成一个固定大小的按钮。当鼠标滑向nav元素时，菜单下拉展开，设置所有li的样式display:
block，具体请看代码：

复制代码
代码如下:

@media screen and (max-width: 600px) {

.nav {
position: relative;
min-height: 40px;
}
.nav ul {

width: 180px;
padding: 5px 0;
position: absolute;
top: 0;

left: 0;
border: solid 1px #aaa;
background: #fff
url(images/menu.png) no-repeat 10px 11px;
border-radius: 5px;

box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.nav li {
display: none;
/* hide all items */
margin: 0;
}
.nav .current {
display:
block; /* show only currentitem */
}
.nav a {
display: block;

padding: 5px 5px 5px 32px;
text-align: left;
}
.nav .current a {

background: none;
color: #666;
}

/* on nav hover */
.nav
ul:hover {
background-image: none;
}
.nav ul:hover li {
display:
block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background:
url(images/check.png) no-repeat 10px 7px;
}

/* right nav */

.nav.right ul {
left: auto;
right: 0;
}

/* center nav */

.nav.center ul {
left: 50%;
margin-left: -90px;
}
}

已赞过 已踩过<

评论收起

楼喽读昂
2012-11-02 · 超过39用户采纳过TA的回答

知道小有建树答主

回答量：113

采纳率：0%

帮助的人：67.6万

我也去答题访问个人页

关注

展开全部

很简单，html写结构，css控制样式。css单独保存，写出的导航代码单独保存为一个文件，导航文件引用css文件，在加载其他页面时引用写好的导航文件。

追问

可以写一个简单的例子不，麻烦了~~~~yzuoze@qq.com谢谢哈~~~~

追答

标签就可以做到引用了，很简单的。网上搜搜html引用吧

本回答被提问者采纳

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

手机制作网站的软件—领先的安卓Apk修改工具

轻松修改安卓应用名称和图标、定制软件的功能和界面、并将apk转成AS源代码项目。通过加固和混淆的方式让应用过白不报毒，还能将网页打包成各种手机平台的应用。

www.apkeditor.cn广告

华为云网站建设-一站式服务-打造高端网站

网站建设，华为云模板建站，3000+模板，60+行业覆盖，PC+移动自适应建站，仅需368元/年华为云建站，全程1v1管家式服务，不满意全额退，多端合一，全场景覆盖

www.huaweicloud.com广告

HTML5怎么做导航栏

您可能关注的内容

其他类似问题

为你推荐：