html导航栏菜单（HTML5怎么做导航栏）

本文目录

• HTML5怎么做导航栏
• 用HTML做一个带下拉菜单的导航栏
• html点击导航栏中的菜单怎么弹出文字
• html导航栏,这种类型的怎么写！
• html怎么设置导航栏
• HTML的导航栏设置
• HTML，如何制作导航栏

HTML5怎么做导航栏

建议使用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)
}
})();
《/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》

用HTML做一个带下拉菜单的导航栏

你可以调整ul的高度，
将高度调至为“我要上传”这一栏高度一致。然后ul添加overflow:hidden;就行了
鼠标滑过，高度增加值所有显示完，就行了

html点击导航栏中的菜单怎么弹出文字

点击样式，在弹出的工具条右侧找到圆形按钮弹。2、左键单击圆形按钮弹。3、在出现的弹窗中设置文字的行数，修改文字内容。

html导航栏,这种类型的怎么写！

这个只是一个图标字体，一般要结合js点击或者经过触发事件。

代码：

《head》
《meta charset=’utf-8’ /》
《title》HTML调试《/title》
《script type="text/javascript" src="js/jquery-1.8.0.min.js"》《/script》
《script src=’js/zui.min.js’ type=’text/javascript’ charset=’utf-8’》《/script》
《link rel=’stylesheet’ type=’text/css’ href=’css/zui.css’ /》
《style type="text/css"》
body,
div,
ul,
li {
margin: 0;
padding: 0;
}
body {
font-family: "微软雅黑", Arial, Helvetica, sans-serif;
color: #333333;
line-height: 25px;
font-size: 14px;
}
a:link,
a:visited {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: underline;
color: #08A5E0;
text-decoration: none;
}
ul,
ul li {
list-style-type: none;
}
.cl {
zoom: 1;
}
.navbg {
height: 40px;
width: 100%;
background: #08A5E0;
box-shadow: 1px 1px 7px #999;
position: absolute;
z-index: 99;
left: 0;
}
#navul li {
float: left;
margin-right: 1px;
width: 100px;
height: 40px;
position: relative;
text-align: center;
line-height: 40px;
}
#navul li.navhome {
text-align: left;
padding: 0 0px 0 40px;
width: 100px;
}
#navul li a:link,
#navul li a:visited {
color: #FFFFFF;
}
#navul li ul {
display: none;
position: absolute;
z-index: 10000;
top: 38px;
left: -1px;
background: #006D96;
border: #004E6C 1px solid;
border-bottom: none;
}
#navul li ul li {
display: block;
width: 98px;
float: none;
margin-right: 0px;
height: 28px;
position: relative;
line-height: 28px;
border-bottom: #004E6C 1px solid;
font-size: 12px;
}
#navul li.navmoon {
background: #006D96;
border: #004E6C 1px solid;
width: 98px;
height: 38px;
line-height: 38px;
}
#navul li.navmoon a {
color: #FFFFFF;
}
#navul li.navhome a:hover {
color: #FCFF00;
}
#navul li.navmoon ul {
display: block;
}
#navul li.navmoon ul a {
display: block;
width: 98px;
height: 28px;
line-height: 28px;
}
#navul li.navmoon ul a:hover {
background: #000000;
}
《/style》
《/head》
《body》
《div class="navbg"》
《ul id="navul" class="cl"》
《li class="navhome"》
《a href="" target="_blank"》HOME《/a》
《/li》
《li》
《a href="" title="Html"》Html《/a》
《ul》
《li》
《a href="" title="HTML"》HTML《/a》
《/li》
《li》
《a href="" title="HTML5"》HTML5《/a》
《/li》
《/ul》
《/li》
《li》
《a href="" title="CSS"》CSS《/a》
《ul》
《li》
《a href="" title="CSS入门"》CSS入门《/a》
《/li》
《li》
《a href="" title="CSS工具"》CSS工具《/a》
《/li》
《li》
《a href="" title="CSS技巧"》CSS技巧《/a》
《/li》
《li》
《a href="" title="CSS实例"》CSS实例《/a》
《/li》
《li》
《a href="" title="CSS3"》CSS3《/a》
《/li》
《li》
《a href="" title="CSS hack"》CSS hack《/a》
《/li》
《li》
《a href="" title="CSS2.0 手册"》CSS2.0 手册《/a》
《/li》
《/ul》
《/li》
《li》
《a href="" title="网页特效"》网页特效《/a》
《ul》
《li》
《a href="" title="导航菜单"》导航菜单《/a》
《/li》
《li》
《a href="" title="表单按钮"》表单按钮《/a》
《/li》
《li》
《a href="" title="表格图层"》表格图层《/a》
《/li》
《li》
《a href="" title="图片特效"》图片特效《/a》
《/li》
《li》
《a href="" title="滚动特效"》滚动特效《/a》
《/li》
《li》
《a href="" title="文字特效"》文字特效《/a》
《/li》
《li》
《a href="" title="时间日期"》时间日期《/a》
《/li》
《li》
《a href="" title="窗口特效"》窗口特效《/a》
《/li》
《li》
《a href="" title="鼠标特效"》鼠标特效《/a》
《/li》
《/ul》
《/li》
《li》
《a href="" title="前端资讯"》前端资讯《/a》
《ul》
《li》
《a href="" title="用户体验"》用户体验《/a》
《/li》
《li》
《a href="" title="前端观察"》前端观察《/a》
《/li》
《li》
《a href="" title="职业生涯"》职业生涯《/a》
《/li》
《/ul》
《/li》
《li》
《a href="" title="前端技巧"》前端技巧《/a》
《ul》
《li》
《a href="" title="布局技巧"》布局技巧《/a》
《/li》
《li》
《a href="" title="网页字体"》网页字体《/a》
《/li》
《li》
《a href="" title="flash"》flash《/a》
《/li》
《/ul》
《/li》
《li》
《a href="" title="杂七杂八"》杂七杂八《/a》
《ul》
《li》
《a href="" title="帝国cms"》帝国cms《/a》
《/li》
《li》
《a href="" title="电脑技巧"》电脑技巧《/a》
《/li》
《li》
《a href="" title="随笔杂谈"》随笔杂谈《/a》
《/li》
《/ul》
《/li》
《li》
《a href="" title="Javascript"》Javascript《/a》
《ul》
《li》
《a href="" title="Jquery"》Jquery《/a》
《/li》
《li》
《a href="" title="Js学习"》Js学习《/a》
《/li》
《li》
《a href="" title="Js教程"》Js教程《/a》
《/li》
《/ul》
《/li》
《li》
《a href="" title="网站优化"》网站优化《/a》
《ul》
《li》
《a href="" title="SEO杂谈"》SEO杂谈《/a》
《/li》
《li》
《a href="" title="站长工具"》站长工具《/a》
《/li》
《li》
《a href="" title="经验分享"》经验分享《/a》
《/li》
《/ul》
《/li》
《li style="width: 50px;"》
《a href="" title="更多"》《i class="icon icon-align-justify"》《/i》《/a》
《ul》
《li》
《a href="" title="SEO杂谈"》更多1《/a》
《/li》
《li》
《a href="" title="更多2"》更多2《/a》
《/li》
《li》
《a href="" title="更多3"》更多3《/a》
《/li》
《/ul》
《/li》
《/ul》
《/div》
《script type="text/javascript"》
$(window).load(function() {
$(".navbg").capacityFixed();
});
$(function() {
$("#navul 》 li").not(".navhome").hover(function() {
$(this).addClass("navmoon")
}, function() {
$(this).removeClass("navmoon")
})
var maxwidth = 580;
$(".news_text img").each(function() {
if($(this).width() 》 maxwidth) {
$(this).width(maxwidth);
}
});
});
function $tomato(id) {
return document.getElementById(id);
}
function runCode(obj) {
var winname = window.open(’’, "_blank", ’’);
winname.document.open(’text/html’, ’replace’);
winname.document.writeln(obj.value);
winname.document.close();
}
(function($) {
$.fn.capacityFixed = function(opti***) {
var opts = $.extend({}, $.fn.capacityFixed.deflunt, opti***);
var FixedFun = function(element) {
var top = opts.top;
element.css({
"top": top
});
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if(scrolls 》 top) {
if(window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
} else {
element.css({
position: "absolute",
top: top
});
}
});
element.find(".close-ico").click(function(event) {
element.remove();
event.preventDefault();
})
};
return $(this).each(function() {
FixedFun($(this));
});
};
$.fn.capacityFixed.deflunt = {
right: 0,
top: 25
};
})(jQuery);
《/script》
《/body》

结果：

html怎么设置导航栏

H5中可以直接使用导航栏标签《nav》《/nav》
注 * 要设置样式推荐使用CSS

HTML的导航栏设置

使用N**元素为超链接来定义导航栏

导航栏对于网页来说是很重要的设置合适的导航栏也是很要必要的

下面介绍HTML的导航栏设置

希望能帮助到大家

方法/步骤

1.使用ul列表设置导航栏

2.设置nav元素CSS样式宽度高度背景颜色

3.将li元素内容移动

4.去除下划线

5.内容居中

HTML，如何制作导航栏

导航栏基本都是横排、竖排列的，看到的大部分都是横排排列的，每个人都有自己的方法做出好看的导航排列，方法有很多种，选择自己快速的方法即可。

1.横排无非是本身标签是行内标签或者将块状标签添加浮动效果，然后变成横排排列的导航。a标签既可以当做链接符号来用，本身也是行内标签的一种，直接用a标签输入文字，可以直接在横排显示。

2.如图所示效果，横排显示的导航。

3.如果想要对整体的导航进行移动位置，可以对整个的a标签添加上一个大的盒子div，这样对整体div的移动就可以了。

4.如图，对div添加居中，添加个描边就直接影响到整个a标签内容了。

5.我们还可以使用块状标签div来作为导航的一份子，如果中间有链接的时候需要a标签。

6.默认的块状标签div是竖排排列的，就是会换行。

7.然后我们将div添加float:left；浮动效果就好了。

8.这样刚才的竖排导航就变成了横排排列的导航页了。

9.很多时候我们做导航会用到无序列表ul或者有序列表ol来制作导航，做法和div也是一样的，如图建立ulli标签；将li添加浮动效果。

10.再添加些边框值，这样一个导航页也好了，和之前的也没大区别，所以制作导航的方法千千种，按公司习惯来做就好了。