html水平导航栏代码,html导航页代码
html怎么做导航栏
html做导航栏步骤如下：
1、用Dreamweaver新建一个HTML文件；
2、按ctrl+s先保存，以防突然断电数据丢失；
3、修改title为html+css实现横向导航；
4、新建一个divid为“a”，添加ulli标签；
5、在li中添加自己想要的文字并调整好文字间距，按F12预览；6、首先去掉字体前面的小黑点。
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
html这种导航栏怎么做
这种导航栏可以利用纯css解决的
主要是运用a:hover 和 display:block
当a:hover鼠标悬浮时， 改变a的背景图片
然后然原来隐藏的二级水平导航栏display:none; 变成display:block
我用html做了一个导航栏，代码如下：
ul的父亲是div啊，你把div的内左边内边矩设为0，padding-left：0；试试。
html下拉导航栏代码
这个是用JS实现的。你百度一下，JS实现二级导航源码就有了。
!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?""
html?xmlns=""
head
meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/
title简洁的纯CSS下拉菜单代码/title
style
#sddm
{ margin:?0?auto;
padding:?0;
z-index:?30;
background-color:#F4F4F4;
width:?480px;
height:23px;}
#sddm?li
{ margin:?0;
padding:?0;
list-style:?none;
float:?left;
font:?bold?12px?arial}
#sddm?li?a
{ display:?block;
margin:?0?1px?0?0;
padding:?4px?10px;
width:?60px;
background:?#5970B2;
color:?#FFF;
text-align:?center;
text-decoration:?none}
#sddm?li?a:hover
{ background:?#49A3FF}
#sddm?div
{ position:?absolute;
visibility:?hidden;
margin:?0;
padding:?0;
background:?#EAEBD8;
border:?1px?solid?#5970B2}
#sddm?div?a
{ position:?relative;
display:?block;
margin:?0;
padding:?5px?10px;
width:?auto;
white-space:?nowrap;
text-align:?left;
text-decoration:?none;
background:?#EAEBD8;
color:?#2875DE;
font:?12px?arial}
#sddm?div?a:hover
{ background:?#49A3FF;
color:?#FFF}
/style
!--?dd?menu?--
script?type="text/javascript"
!--
var?timeout?=?100;
var?closetimer?=?10;
var?ddmenuitem?=?0;
//?open?hidden?layer
function?mopen(id)
{
//?cancel?close?timer
mcancelclosetime();
//?close?old?layer
if(ddmenuitem)?ddmenuitem.style.visibility?=?'hidden';
//?get?new?layer?and?show?it
ddmenuitem?=?document.getElementById(id);
ddmenuitem.style.visibility?=?'visible';
}
//?close?showed?layer
function?mclose()
{
if(ddmenuitem)?ddmenuitem.style.visibility?=?'hidden';
}
//?go?close?timer
function?mclosetime()
{
closetimer?=?window.setTimeout(mclose,?timeout);
}
//?cancel?close?timer
function?mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer?=?null;
}
}
//?close?layer?when?click-out
document.onclick?=?mclose;?
//?--
/script
/head
body?style="text-align:center"
ul?id="sddm"
lia?href="#"?onmouseover="mopen('m1')"?onmouseout="mclosetime()"Home/a
div?id="m1"?onmouseover="mcancelclosetime()"?onmouseout="mclosetime()"
a?href="#"HTML?DropDown/a
a?href="#"DHTML?DropDown?menu/a
a?href="#"JavaScript?DropDown/a
a?href="#"DropDown?Menu/a
a?href="#"CSS?DropDown/a
/div
/li
lia?href="#"?onmouseover="mopen('m2')"?onmouseout="mclosetime()"Download/a
div?id="m2"?onmouseover="mcancelclosetime()"?onmouseout="mclosetime()"
a?href="#"ASP?Dropdown/a
a?href="#"Pulldown?menu/a
a?href="#"AJAX?dropdown/a
a?href="#"DIV?dropdown/a
/div
/li
lia?href="#"?onmouseover="mopen('m3')"?onmouseout="mclosetime()"Order/a
div?id="m3"?onmouseover="mcancelclosetime()"?onmouseout="mclosetime()"
a?href="#"Visa?Credit?Card/a
a?href="#"Paypal/a
/div
/li
lia?href="#"?onmouseover="mopen('m4')"?onmouseout="mclosetime()"Help/a
div?id="m4"?onmouseover="mcancelclosetime()"?onmouseout="mclosetime()"
a?href="#"Download?Help?File/a
a?href="#"Read?online/a
/div
/li
lia?href="#"?onmouseover="mopen('m5')"?onmouseout="mclosetime()"Contact/a
div?id="m5"?onmouseover="mcancelclosetime()"?onmouseout="mclosetime()"
a?href="#"E-mail/a
a?href="#"Submit?Request?Form/a
a?href=""?target="_blank"codefans.net/a
/div
/li
/ul
/body
/html
html导航栏,这种类型的怎么写！？
这个只是一个图标字体，一般要结合js点击或者经过触发事件。
代码：
head
meta?charset='utf-8'?/
titleHTML调试/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
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(options)?{
var?opts?=?$.extend({},?$.fn.capacityFixed.deflunt,?options);
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
结果：