html5pc网页导航（html导航页面）
本文目录一览：
- 1、HTML5怎么做导航栏
- 2、如何用html5按照图的样式做出一个网页导航条，实现相应选择功能，急求代码
- 3、html5如何做到使用导航栏切换页面时不重新加载页面
- 4、手机html网页和电脑上的html网页在制作上有什么区别
- 5、html5实现地图上定位导航路线
- 6、HTML5怎么把导航固定在底部？是只滑动内容，导航固定不动的。
HTML5怎么做导航栏
建议使用FF，Safari，举个例子：
!doctype html
html
head
titleHTML5+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(ilength)
{
document.createElement_x(e[i++])
}
})();
/script
/head
body
menu id="menu"form action="index.php" method="get"
ul
lia href="#" title="HomePage"HomePage/a/li
lia href="#" title="Introuduce"Introuduce/a/li
lia href="#" title="Products"Products/a/li
lia href="#" title="My album"My album/a/li
lia href="#" title="Shopping"Shopping/a/li
lia href="#" title="Contact our"Contact our/a/li
/ul
input type="search" class="aa38-2101-8818-719d text" value="search..." //form
/menu
body
如何用html5按照图的样式做出一个网页导航条，实现相应选择功能，急求代码
nav
ul
lia href=""Home/a/li
lia href=""About/a/li
/ul
/nav
CSS 自己写吧
html5如何做到使用导航栏切换页面时不重新加载页面
我刚开始也在找这个问题的答案，现在解决了，为后面学习的人栽棵树吧。
实现这个功能有很多种方法，这里我选一种个人认为比较简单的方法：
建立三个网页，一个作为主页面，另外两个子页面作为切换页面嵌入主页面，子页面也可以用文字替代。
用jQuery方法来切换页面，语言比较简单网上搜一下看看就懂了
下面附上代码
!DOCTYPE html
html
head
meta charset="UTF-8"
title标题/title
!--jQuery 百度CDN库--
script src=""/script
script
// jQuery代码
$(document).ready(function () {
$("#b1").click(function () {
$("#tab_1").show();// 显示
$("#tab_2").hide();// 隐藏
});
$("#b2").click(function () {
$("#tab_1").hide();
$("#tab_2").show();
});
});
/script
/head
body
div
h1标题一/h1
/div
div
div
ul
libutton id="b1"菜单1/button/li
libutton id="b2"菜单2/button/li
/ul
/div
div
div id="tab_1"
子页面1
/div
div id="tab_2" style="display: none"
子页面2
/div
/div
/div
/body
/html
手机html网页和电脑上的html网页在制作上有什么区别
1.导航设计
手机端页面导航应当包括用户必要的内容，删除屏幕上不必要的链接，假如链接的详细页面内容不是用户想要的，用户不会点击，也就没必要设置。其中建立导航功能键的时候，其中以回到首页、回到上一页这两个最为重要。
2.网站名称或logo的设计
手机网页的顶部没有标题栏或地址栏，相应地，也就没有网站标题和图标。所以设计页面的时候应该让用户知道，他们现在所浏览的网站名称或logo，这对塑造品牌也很重要。
3.页面排版
从用户角度来说，他们希望阅读所有的内容，所以我们进行内容呈现，只是用隔断、重组、引语、线条或其他视觉方案来让这些内容更容易访问，使这些板块显得更都雅。
4.利用手机的天生优势
手机有着许多传统电脑所没有的优势，其中最大的优势就是移动力，因此手机版网页应该要特别发挥这些特性，让手机网页具有一般网页更多的优势。如：
移动定位：大部分的智能设备都有导航、定位的机制，可以让客户主动找到企业的位置。
移动联系：如果用使用的是移动电话，可以立即发话;或者直接跳转到通讯工具在线聊天;
邻近地点：如果企业有很多据点，请告诉用户，在他附近有哪一些地点是便于他能够抵达的。
html5实现地图上定位导航路线
html5实现地图上定位导航路线方法如下：
1.先通过百度拾取坐标系统获得点位的坐标。
2.在网页的head中插入百度API引用脚本。
script type="text/javascript" src="
key=v=1.1services=true"/script
3.在网页的/body之后/html之前插入地图显示代码。
4.设置显示地图的div的id为“dituContent”，即添加 id="dituContent"
由于jqm的div的高度都是根据内容自由放大的，所以为了地图能正常显示，还需要
增加一个高度值，一般情况600px就可以，完成。
HTML5怎么把导航固定在底部？是只滑动内容，导航固定不动的。
HTML5怎么把导航固定在底部的步骤如下：
css的定位样式属性来实现；会用到css中的position：fixed;属性，结合来实现。
style.foot-menu{width:100%;height:60px;background:#000;position:fixed;bottom:0;/**距离底部为0*/left:0;z-index:1;}/stylediv class="2101-8818-719d-607b foot-menu"
!---导航具体内容--
/div
拓展资料
css3网页底部固定导航是一款纯css3实现的网页底部固定导航菜单。特性介绍：
1、边框特性
CSS3对网页中的边框进行了一些改进，主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框，通过CSS3的属性可以快速实现圆角定义，同时还可以根据实际情况针对特定角进行圆角定义 。
2、多背景图
CSS3允许使用多个属性(比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等)在一个元素上添加多层背景图片。
