<
!
DOCTYPE
html
PUBLIC
"
-//W3C//DTD XHTML 1.0 Strict//EN
"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< title > 子叶:测试css菜单显示效果 </ title >
< meta http-equiv = " Content-Type " content = " text/html; charset=utf-8 " />
< meta http-equiv = " Content-Language " content = " zh-cn " />
< meta http-equiv = " imagetoolbar " content = " false " />
< meta name = " robots " content = " all " />
< meta name = " keywords " content = " 子乌,Sheneyan,子虚乌有,xhtml,html,js,css,php " />
< meta name = " author " content = " Sheneyan " />
< meta name = " Description " content = " 子乌的站 " />
< meta name = " copyright " content = " Copyright (c) 2004-2005 Sheneyan " />
< meta name = " MSSmartTagsPreventParsing " content = " true " />
< link rel = " shortcut icon " href = " /favicon.ico " type = " image/x-icon " />
< link rel = " ICON " href = " /favicon.ico " type = " image/x-icon " />
< script type = " text/javascript " >
/**
*菜单的构造,需要绑定到onload
*/
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i < navRoot . childNodes . length ; i ++) {
node = navRoot . childNodes [ i ];
if ( node . nodeName == " LI " ) {
node . onmouseover = function () {
this . className += " over " ;
}
node . onmouseout = function () {
this . className = this . className . replace ( " over " , "" );
}
}
}
}
}
window . onload = startList ;
</ script >
< style type = " text/css " media = " all " >
/**
子乌的叶子css:主样式表
这个样式表的结构参考了 < a href = " http://www.zeldman.com " > zeldman </ a > 的样式表结构
update:05.11.18
author:sheneyan
*/
html {min-width: 742px;}
/*css基本规则*/
img{border:0;}
p.access {display:none;}
div#counters{display:none;}/*计数器暂时不显示*/
a{text-decoration: none;}
/* 主要布局 */
body{
overflow:auto;
text-align: center;
margin: 0 auto;
padding: 0;
border: 0;
background: #fff;
color: #000;
font: small/18px "宋体", Verdana, Helvetica, sans-serif;
}
/**菜单的控制,根据 < a href = " http://www.alistapart.com/d/horizdropdowns/horizontal2.htm " > css 菜单 </ a > 修改而来*/
ul#nav,ul#nav ul{
margin: 0 auto;
text-align:left;
padding: 0;
list-style: none;
background:#fff;
z-index:99;
}
ul#nav {
width:732px;
display:block;
height:24px;
clear:both;
}
ul#nav li {
position: relative;
z-index:999;
float:left;
}
ul#nav ul li{
display:block;
}
ul#nav ul {
width:100px;
height:auto;
position: absolute;
text-align:left;
left: 0px;
display: none;
border:solid 1px #697210;
}
/*当鼠标在子菜单和父菜单上时,父菜单的样式*/
ul#nav li.over a,ul#nav li:hover a{
border-color:#E2144A;
background: #fdd;
font-weight:bold;
color: #E2144A;
}
/*将子菜单的样式清除*/
ul#nav li.over ul a,ul#nav li:hover ul a{
background:#fff;
font-weight:normal;
color:#777;
}
/*子菜单的hover样式*/
ul#nav li.over ul a:hover,ul#nav li:hover ul a:hover{
background:#fff;
font-weight:normal;
color: #E2144A;
background: #fdd;
border-color:#E2144A;
font-weight:bold;
}
/* Styles for Menu Items */
ul#nav a {
font-size:14px;
line-height:17px;
display: block;
padding:0 0 0 10px;
width:78px;
color: #777;
height:17px;
background: #fff;
border-left:solid 1px #fff;
border-top:solid 1px #fff;
border-right:solid 1px #fff;
border-bottom:solid 5px #697210;
}
ul#nav ul li{
width:100px;
border:0;
}
/* Fix IE. Hide from IE Mac /*/
* html ul#nav li { float: left; height: 17px; }
* html ul#nav li a { height: 17px; }
/* End */
ul#nav ul a { padding: 2px 0px 2px 10px;border:0;width:90px; } /* Sub Menu Styles */
ul#nav li:hover ul,ul#nav li.over ul { display: block; } /* The magic */
</ style >
< body >
测试css菜单显示效果 < br />
<!--菜单开始-->
< ul id =' nav ' >
< li >< a href ='/ g . php / working . html ' > 文章 </ a >
< ul >
< li >< a href ='/ g . php / working / 29 . html ' > 随笔 </ a ></ li >
< li >< a href ='/ g . php / working / 30 . html ' > 小说 </ a ></ li >
< li >< a href ='/ g . php / working / 31 . html ' > 诗 </ a ></ li >
< li >< a href ='/ g . php / working / 32 . html ' > 文摘 </ a ></ li >
</ ul >
</ li >
< li >< a href ='/ g . php / pic . html ' > 美图 </ a >
< ul >
< li >< a href ='/ g . php / pic / 19 . html ' > 漫画 </ a ></ li >
< li >< a href ='/ g . php / pic / 20 . html ' > 摄影 </ a ></ li >
< li >< a href ='/ g . php / pic / 33 . html ' > CG作品 </ a ></ li >
< li >< a href ='/ g . php / pic / 41 . html ' > 图+文 </ a ></ li >
</ ul >
</ li >
< li >< a href ='#' > 技术 </ a >
< ul >
< li >< a href ='/ g . php / tech / tool / 37 . html ' > 在线工具 </ a ></ li >
< li >< a href ='/ g . php / tech / collect / 43 . html ' > 代码收集 </ a ></ li >
< li >< a href ='/ g . php / tech / lab / 44 . html ' > 实验室 </ a ></ li >
< li >< a href ='/ g . php / tech / article / 45 . html ' > 技术文章 </ a ></ li >
</ ul >
</ li >
< li >< a href ='/ g . php / fav . html ' > 网站收藏夹 </ a ></ li >
< li >< a href ='/ g . php / working . html ' > 读书笔记 </ a >
< ul >
< li >< a href ='/ g . php / working / 22 . html ' > 哲学 </ a ></ li >
< li >< a href ='/ g . php / working / 23 . html ' > 小说 </ a ></ li >
</ ul >
</ li >
< li >< a href ='/ g . php / working . html ' > 日记 </ a >
< ul >
< li >< a href ='/ g . php / working / 27 . html ' > 生活 </ a ></ li >
< li >< a href ='/ g . php / working / 28 . html ' > 工作 </ a ></ li >
</ ul >
</ li >
< li >< a href ='#' > 计划 </ a >
< ul >
< li >< a href ='/ g . php / todo / 39 . html ' > 计划要做的事 </ a ></ li >
< li >< a href ='/ g . php / tobuy / 40 . html ' > 计划要买的 </ a ></ li >
</ ul >
</ li >
< li >< a href ='/ g . php / working . html ' > 其他 </ a >
< ul >
< li >< a href ='/ g . php / working / 34 . html ' > 关于本站 </ a ></ li >
< li >< a href ='/ g . php / working / 35 . html ' > 留言 </ a ></ li >
< li >< a href ='/ g . php / working / 36 . html ' > 友情链接 </ a ></ li >
</ ul >
</ li >
</ ul > <!--菜单结束-->
< a href = " http://sheneyan.com " title = " 子叶:子乌的叶子 " >< img style = " border:0 " src = " http://sheneyan.com/logo.png " alt = " 子叶 " /></ a >
</ body >
</ html >
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< title > 子叶:测试css菜单显示效果 </ title >
< meta http-equiv = " Content-Type " content = " text/html; charset=utf-8 " />
< meta http-equiv = " Content-Language " content = " zh-cn " />
< meta http-equiv = " imagetoolbar " content = " false " />
< meta name = " robots " content = " all " />
< meta name = " keywords " content = " 子乌,Sheneyan,子虚乌有,xhtml,html,js,css,php " />
< meta name = " author " content = " Sheneyan " />
< meta name = " Description " content = " 子乌的站 " />
< meta name = " copyright " content = " Copyright (c) 2004-2005 Sheneyan " />
< meta name = " MSSmartTagsPreventParsing " content = " true " />
< link rel = " shortcut icon " href = " /favicon.ico " type = " image/x-icon " />
< link rel = " ICON " href = " /favicon.ico " type = " image/x-icon " />
< script type = " text/javascript " >
/**
*菜单的构造,需要绑定到onload
*/
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i < navRoot . childNodes . length ; i ++) {
node = navRoot . childNodes [ i ];
if ( node . nodeName == " LI " ) {
node . onmouseover = function () {
this . className += " over " ;
}
node . onmouseout = function () {
this . className = this . className . replace ( " over " , "" );
}
}
}
}
}
window . onload = startList ;
</ script >
< style type = " text/css " media = " all " >
/**
子乌的叶子css:主样式表
这个样式表的结构参考了 < a href = " http://www.zeldman.com " > zeldman </ a > 的样式表结构
update:05.11.18
author:sheneyan
*/
html {min-width: 742px;}
/*css基本规则*/
img{border:0;}
p.access {display:none;}
div#counters{display:none;}/*计数器暂时不显示*/
a{text-decoration: none;}
/* 主要布局 */
body{
overflow:auto;
text-align: center;
margin: 0 auto;
padding: 0;
border: 0;
background: #fff;
color: #000;
font: small/18px "宋体", Verdana, Helvetica, sans-serif;
}
/**菜单的控制,根据 < a href = " http://www.alistapart.com/d/horizdropdowns/horizontal2.htm " > css 菜单 </ a > 修改而来*/
ul#nav,ul#nav ul{
margin: 0 auto;
text-align:left;
padding: 0;
list-style: none;
background:#fff;
z-index:99;
}
ul#nav {
width:732px;
display:block;
height:24px;
clear:both;
}
ul#nav li {
position: relative;
z-index:999;
float:left;
}
ul#nav ul li{
display:block;
}
ul#nav ul {
width:100px;
height:auto;
position: absolute;
text-align:left;
left: 0px;
display: none;
border:solid 1px #697210;
}
/*当鼠标在子菜单和父菜单上时,父菜单的样式*/
ul#nav li.over a,ul#nav li:hover a{
border-color:#E2144A;
background: #fdd;
font-weight:bold;
color: #E2144A;
}
/*将子菜单的样式清除*/
ul#nav li.over ul a,ul#nav li:hover ul a{
background:#fff;
font-weight:normal;
color:#777;
}
/*子菜单的hover样式*/
ul#nav li.over ul a:hover,ul#nav li:hover ul a:hover{
background:#fff;
font-weight:normal;
color: #E2144A;
background: #fdd;
border-color:#E2144A;
font-weight:bold;
}
/* Styles for Menu Items */
ul#nav a {
font-size:14px;
line-height:17px;
display: block;
padding:0 0 0 10px;
width:78px;
color: #777;
height:17px;
background: #fff;
border-left:solid 1px #fff;
border-top:solid 1px #fff;
border-right:solid 1px #fff;
border-bottom:solid 5px #697210;
}
ul#nav ul li{
width:100px;
border:0;
}
/* Fix IE. Hide from IE Mac /*/
* html ul#nav li { float: left; height: 17px; }
* html ul#nav li a { height: 17px; }
/* End */
ul#nav ul a { padding: 2px 0px 2px 10px;border:0;width:90px; } /* Sub Menu Styles */
ul#nav li:hover ul,ul#nav li.over ul { display: block; } /* The magic */
</ style >
< body >
测试css菜单显示效果 < br />
<!--菜单开始-->
< ul id =' nav ' >
< li >< a href ='/ g . php / working . html ' > 文章 </ a >
< ul >
< li >< a href ='/ g . php / working / 29 . html ' > 随笔 </ a ></ li >
< li >< a href ='/ g . php / working / 30 . html ' > 小说 </ a ></ li >
< li >< a href ='/ g . php / working / 31 . html ' > 诗 </ a ></ li >
< li >< a href ='/ g . php / working / 32 . html ' > 文摘 </ a ></ li >
</ ul >
</ li >
< li >< a href ='/ g . php / pic . html ' > 美图 </ a >
< ul >
< li >< a href ='/ g . php / pic / 19 . html ' > 漫画 </ a ></ li >
< li >< a href ='/ g . php / pic / 20 . html ' > 摄影 </ a ></ li >
< li >< a href ='/ g . php / pic / 33 . html ' > CG作品 </ a ></ li >
< li >< a href ='/ g . php / pic / 41 . html ' > 图+文 </ a ></ li >
</ ul >
</ li >
< li >< a href ='#' > 技术 </ a >
< ul >
< li >< a href ='/ g . php / tech / tool / 37 . html ' > 在线工具 </ a ></ li >
< li >< a href ='/ g . php / tech / collect / 43 . html ' > 代码收集 </ a ></ li >
< li >< a href ='/ g . php / tech / lab / 44 . html ' > 实验室 </ a ></ li >
< li >< a href ='/ g . php / tech / article / 45 . html ' > 技术文章 </ a ></ li >
</ ul >
</ li >
< li >< a href ='/ g . php / fav . html ' > 网站收藏夹 </ a ></ li >
< li >< a href ='/ g . php / working . html ' > 读书笔记 </ a >
< ul >
< li >< a href ='/ g . php / working / 22 . html ' > 哲学 </ a ></ li >
< li >< a href ='/ g . php / working / 23 . html ' > 小说 </ a ></ li >
</ ul >
</ li >
< li >< a href ='/ g . php / working . html ' > 日记 </ a >
< ul >
< li >< a href ='/ g . php / working / 27 . html ' > 生活 </ a ></ li >
< li >< a href ='/ g . php / working / 28 . html ' > 工作 </ a ></ li >
</ ul >
</ li >
< li >< a href ='#' > 计划 </ a >
< ul >
< li >< a href ='/ g . php / todo / 39 . html ' > 计划要做的事 </ a ></ li >
< li >< a href ='/ g . php / tobuy / 40 . html ' > 计划要买的 </ a ></ li >
</ ul >
</ li >
< li >< a href ='/ g . php / working . html ' > 其他 </ a >
< ul >
< li >< a href ='/ g . php / working / 34 . html ' > 关于本站 </ a ></ li >
< li >< a href ='/ g . php / working / 35 . html ' > 留言 </ a ></ li >
< li >< a href ='/ g . php / working / 36 . html ' > 友情链接 </ a ></ li >
</ ul >
</ li >
</ ul > <!--菜单结束-->
< a href = " http://sheneyan.com " title = " 子叶:子乌的叶子 " >< img style = " border:0 " src = " http://sheneyan.com/logo.png " alt = " 子叶 " /></ a >
</ body >
</ html >