网页设计水平导航代码（导航网站设计）
本文目录一览：
- 1、CSS如何实现网页导航栏置顶
- 2、简单的网页导航条代码
- 3、完成以下代码，实现用CSS格式化实现用ul和li的水平导航条
- 4、网页设计里，鼠标放在 导航条图片上 再出现 水平菜单的代码？不是下拉菜单。
CSS如何实现网页导航栏置顶
1、在电脑上打开软件，新建一个html文件，在head部分，编写css样式， list-style-type: none;是除掉导航前面默认带的点，li a，li a.active ，li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化。
2、在html页面body里面编写导航栏内容，可以看到是通过ullia href=""/a/li/ul的格式来实现导航。
3、在浏览器中打开页面，可以看到已经制作成了一个比较美观的垂直导航栏。
4、将鼠标滑向垂直导航栏的列表项上，可以看到列表项颜色发生变化。
5、也可以制作成水平导航栏，overflow: hidden;代码的意思是超出高度和宽度的部分自动隐藏，float: left;使导航栏水平显示。
6、在浏览器中打开页面，可以看到制作出美观的水平导航栏，已经置顶了。
简单的网页导航条代码
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
titlenone/title
style type="text/css"
!--
body { margin: 0px;padding: 0px;text-align: center;}
TD {FONT-SIZE: 12px; COLOR: #333;}
#toubiao {BORDER-BOTTOM: #e2e2e2 1px solid;}
--
/style
/head
body
SCRIPT
function toueme(){
document.getElementById("toubiao").style.display="none";
}
/SCRIPT
DIV id=toubiao
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td width="4%" height="30" align="center"img src="images/kids.gif" width="15" height="14"/td
td width="82%"登陆|注册 这里要什么就你自己写咯/td
td width="14%" align="right"a style="CURSOR: hand" onClick=toueme()关闭/a/td
/tr
/table
/DIV
呵呵 新建记事本 打开复制该代码 保存 修改后缀名为html 预览效果！
/body
/html
完成以下代码，实现用CSS格式化实现用ul和li的水平导航条
1"text/css"
2margin:0 auto;
3list-style:none;
4float:left;
5display：block
6text-align:center
7a:hover
8text-decoration:none
9font-weight:bold
10clear:both
网页设计里，鼠标放在 导航条图片上 再出现 水平菜单的代码？不是下拉菜单。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titledropline-水平三级横向弹出菜单/title
style type="text/css"
/* common styling */
.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;}
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; border-left:1px solid #eee; width:106px;}
.menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li:hover ul.right li {float:right;}
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
/style
!--[if lte IE 6]
style type="text/css"
table {border-collapse:collapse; margin:0; padding:0;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a, .menu ul li a:visited {background:#c9c9a7 url(../../graphics/drop.gif) 20px right no-repeat;}
.menu ul li a:hover {color:#fff; background:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;}
.menu ul li a:hover ul.left_side li {float:left;}
.menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}
/style
![endif]--
/head
body
div class="686c-af8c-7185-b028 menu"
ul
lia class="af8c-7185-b028-2c8b hide" href="../menu/index.html"DEMOS/a
!--[if lte IE 6]
a href="../menu/index.html"DEMOS
tabletrtd
![endif]--
ul
lia href="../menu/zero_dollars.html" title="The zero dollar ads page"zero dollars/a/li
lia href="../menu/embed.html" title="Wrapping text around images"wrapping text/a/li
lia href="../menu/form.html" title="Styling forms"styled form/a/li
lia href="../menu/nodots.html" title="Removing active/focus borders"active focus/a/li
lia class="7185-b028-2c8b-ed0d hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"HOVER/CLICK/a
!--[if lte IE 6]
a class="b028-2c8b-ed0d-d174 sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"HOVER/CLICK
tabletrtd
![endif]--
ul class="2c8b-ed0d-d174-91b8 right_side"
lia href="../menu/form.html" title="Styling forms"styled form/a/li
lia href="../menu/nodots.html" title="Removing active/focus borders"active focus/a/li
lia href="../menu/hover_click.html" title="Hover/click with no active/focus borders"hover/click/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia href="../menu/shadow_boxing.html" title="Multi-position drop shadow"shadow boxing/a/li
lia href="../menu/old_master.html" title="Image Map for detailed information"image map/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="ed0d-d174-91b8-40e9 hide" href="index.html"MENUS/a
!--[if lte IE 6]
a href="index.html"MENUS
tabletrtd
![endif]--
ul
lia href="spies.html" title="a coded list of spies"spies menu/a/li
lia href="vertical.html" title="a horizontal vertical menu"vertical menu/a/li
lia href="expand.html" title="an enlarging unordered list"enlarging list/a/li
lia href="enlarge.html" title="an unordered list with link images"link images/a/li
lia href="cross.html" title="non-rectangular links"non-rectangular/a/li
lia href="jigsaw.html" title="jigsaw links"jigsaw links/a/li
lia href="circles.html" title="circular links"circular links/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="d174-91b8-40e9-1850 hide" href="../layouts/index.html"LAYOUTS/a
!--[if lte IE 6]
a href="../layouts/index.html"LAYOUTS
tabletrtd
![endif]--
ul
lia href="../layouts/bodyfix.html" title="Cross browser fixed layout"Fixed 1/a/li
lia href="../layouts/body2.html" title="Cross browser fixed layout"Fixed 2/a/li
lia href="../layouts/body4.html" title="Cross browser fixed layout"Fixed 3/a/li
lia href="../layouts/body5.html" title="Cross browser fixed layout"Fixed 4/a/li
lia href="../layouts/minimum.html" title="A simple minimum width layout"minimum width/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="91b8-40e9-1850-ed06 hide" href="../boxes/index.html"BOXES/a
!--[if lte IE 6]
a href="../boxes/index.html"BOXES
tabletrtd
![endif]--
ul
lia href="spies.html" title="a coded list of spies"spies menu/a/li
lia href="vertical.html" title="a horizontal vertical menu"vertical menu/a/li
lia href="expand.html" title="an enlarging unordered list"enlarging list/a/li
lia href="enlarge.html" title="an unordered list with link images"link images/a/li
lia href="cross.html" title="non-rectangular links"non-rectangular/a/li
lia href="jigsaw.html" title="jigsaw links"jigsaw links/a/li
lia href="circles.html" title="circular links"circular links/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="40e9-1850-ed06-ed02 hide" href="../mozilla/index.html"MOZILLA/a
!--[if lte IE 6]
a href="../mozilla/index.html"MOZILLA
tabletrtd
![endif]--
ul
lia href="../mozilla/dropdown.html" title="A drop down menu"drop down menu/a/li
lia href="../mozilla/cascade.html" title="A cascading menu"cascading menu/a/li
lia href="../mozilla/content.html" title="Using content:"content:/a/li
lia href="../mozilla/moxbox.html" title=":hover applied to a div"mozzie box/a/li
lia href="../mozilla/rainbow.html" title="I can build a rainbow"rainbow box/a/li
lia href="../mozilla/snooker.html" title="Snooker cue"snooker cue/a/li
lia href="../mozilla/target.html" title="Target Practise"target practise/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="1850-ed06-ed02-5f64 hide" href="../ie/index.html"EXPLORER/a
!--[if lte IE 6]
a href="../ie/index.html"EXPLORER
tabletrtd
![endif]--
ul class="ed06-ed02-5f64-a47b right_side"
lia href="../ie/exampleone.html" title="Example one"example one/a/li
lia href="../ie/weft.html" title="Weft fonts"weft fonts/a/li
lia href="../ie/exampletwo.html" title="Vertical align"vertical align/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="37dd-d5dc-6b59-684d hide" href="../opacity/index.html"OPACITY/a
!--[if lte IE 6]
a href="../opacity/index.html"OPACITY
tabletrtd
![endif]--
ul class="d5dc-6b59-684d-686c right_side"
lia href="../opacity/colours.html" title="colour wheel"opaque colours/a/li
lia href="../opacity/picturemenu.html" title="a menu using opacity"opaque menu/a/li
lia href="../opacity/png.html" title="partial opacity"partial opacity/a/li
lia href="../opacity/png2.html" title="partial opacity II"partial opacity II/a/li
lia class="6b59-684d-686c-af8c hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"HOVER/CLICK/a
!--[if lte IE 6]
a class="684d-686c-af8c-7185 sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"HOVER/CLICK
tabletrtd
![endif]--
ul class="686c-af8c-7185-b028 left_side"
lia href="../menu/form.html" title="Styling forms"styled form/a/li
lia href="../menu/nodots.html" title="Removing active/focus borders"active focus/a/li
lia href="../menu/hover_click.html" title="Hover/click with no active/focus borders"hover/click/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
/ul
/div
/body
/html
基本的模板给你了，怎么修改样式应该不用我教吧
