html5导航栏（html5导航栏横排）
本文目录一览：
HTML5如何才能让导航栏固定顶部不动，且！且！且！不遮挡住下面的DIV？？？
HTML5让导航栏固定顶部不动且不遮挡住下面的DIV方法如下：
1，首先在html中，添加良好的导航内容。
2，后者是网页的具体内容，这里的代码比较简单。
3，在样式中，首先在菜单中定义一些样式。
4，此时，在运行页面时，滚动条滚动后导航将消失。
5，为了将导航栏固定在顶部，可以添加样式位置：固定；最高：0;在导航容器中，键是第一个样式，因此其位置是固定的。
6，此时，页面开始运行，页面向上滚动，并且导航始终在顶部。
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
HTML5如何制作特效导航栏？
鼠标移上去时，改变li元素的大小、背景色、文字颜色等
代码如下：
!DOCTYPE html
html
head
meta charset="utf-8"
title/title
style type="text/css"
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
width: 130px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
position: relative;
margin-left: 10px;
}
div {
width: 150px;
height: 500px;
border: 1px dashed #000000;
text-align: center;
}
.active {
background-color: green;
color: #fff;
}
.show {
width: 2px;
height: 20px;
position: absolute;
left: 10px;
top: 15px;
background-color: white;
}
.li1 {
left: 20px;
border-radius: 5px;
}
/style
/head
body
div id="div1"
ul
lispan/span雅望天堂1/li
lispan/span雅望天堂2/li
lispan/span雅望天堂3/li
lispan/span雅望天堂4/li
/ul
/div
script type="text/javascript"
var oLi = document.getElementsByTagName("li");
var oSpan = document.getElementsByTagName("span");
for (var i = 0; i oLi.length; i++) {
oLi[i].onmouseover = function() {
var sp = this.childNodes[0];
console.log(sp);
for (var i = 0; i oLi.length; i++) {
oLi[i].setAttribute("class", "");
oSpan[i].setAttribute("class", "");
}
this.setAttribute("class", "active li1");
sp.setAttribute("class", "show");
}
oLi[i].onmouseout = function() {
for (var i = 0; i oLi.length; i++) {
oLi[i].setAttribute("class", "");
}
}
}
/script
/body
/html
这应该是你要的效果
