html艺术字导航栏制作（css导航栏制作）
本文目录一览：
html这种导航栏怎么做
主要还是在样式切换，我有个类似的案例，你可以看看，主要的代码贴出来了，那就看你的自学能力了
div class="cd58-ed8a-3ea7-2163 nav_bg ma_auto"
ul
Li class="ed8a-3ea7-2163-1939 on"a href="#"首页/a/Li
lia href="online_service_center.htm"在线服务/a/li
Lia href="Structure.htm"组织架构/a/Li
lia href="work_list_center.htm"工作简报/a/li
lia href="zscq.htm"知识产权相关常识/a/li
Lia href="zlzs.htm"专利知识培训服务/a/Li
lia href="case.htm"案件审理公开/a/li
/ul
/div
样式部分：
.nav_bg li {
float: left;
display: inline;
height: 26px;
color: #fff;
font-size: 14px;
font-weight: 700;
padding: 0 20px;
margin: 0 5px;
line-height: 26px;
text-align: center;
border: 1px transparent solid;
border-radius: 5px;
behavior: url(css/PIE.htc);
position: relative;
}
.nav_bg li:hover, .nav_bg li.on {
cursor: pointer;
background: #fff;
border-top: 1px #000 solid;
border-left: 1px #000 solid;
}
用html语言怎样做导航栏？
这个怎么能简单的说怎么做呢？html是标签组成的，和css联合以后能展现出很好的效果。同样的效果可能有很多种不同的做法。一般来说像这样的导航是
ul
li/li
li/li
……
/ul
但是也能用div+css模拟。
这样的一个导航可以交给专门的美工人员做，不是很难的。有很多学生组织和社会组织的集体都能做 。你要是给我背景图片的素材我都能做。
如果你是想学的话，那么建议从html+css学起
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
这应该是你要的效果
