用html制作导航条按钮的代码
《style type=“text/css“》
#daohang{ width:900px;}
#daohang ul{ list-style:none;}
#daohang ul li{ width:100px; display:block; background:#999999; float:left; text-align:center}
#daohang ul li:hover{}
#daohang ul li a{text-decoration:none; display:block;}
#daohang ul li a:hover{ background:#FF0000; color:#000000;text-decoration:none}
《/style》
《div id=“daohang“》
《ul》
《li》《a href=““》菜单一《/a》《/li》
《li》《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》
《/div》
看看行不行
网页上导航条的素材怎么制作
导航条是件麻烦事，而且也关系到整个网站的形象。做肯定是用PS做，平时的话多收集网站的导航条，然后再到PS里仿照着做，慢慢的你就会自己做了，重在收集，平时多看看别人的网站，看到设计好的地方就把他给截图截下来，平时按分类来收集，比如可以收集导航条、小图标、栏目设计、按钮等等，这样即使你不会做，用的时候找个合适的就可以了
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(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》
结果：
