|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
Table中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div更能体现样式和结构相分离，结构的重构性强。
网页制造Poluoluo文章简介：没有JS只用CSS制造的网页下拉菜单.
这款下拉菜单栏的完成十分复杂，没有效到庞大的JS代码，完整依托css代码来完成的，只需举行复杂的修正变更就能够了，以下是代码实例：
html代码：
<divid="nav">
<ul>
<liclass="menu2"onMouseOver="this.className=menu1"onMouseOut="this.className=menu2">HomePage
<divclass="list">
<ahref="http://www.Poluoluo.com/">破洛洛</a><br/>
<ahref="#">我的首页</a><br_fcksavedurl=""#">我的首页</a><br"/>
<ahref="#">我的日记</a><br/>
<ahref="#">我的日记</a><br/>
<ahref="#">我的相册</a><br/>
<ahref="#">我的保藏</a><br/>
</div>
</li>
<liclass="menu2"onMouseOver="this.className=menu1"onMouseOut="this.className=menu2">Connection
<divclass="list">
<ahref="http://www.Poluoluo.com/">破洛洛</a><br/>
<ahref="#">我的首页</a><br_fcksavedurl=""#">我的首页</a><br"/>
<ahref="#">我的日记</a><br/>
<ahref="#">我的相册</a><br/>
<ahref="#">我的保藏</a><br/>
</div>
</li>
<liclass="menu2"onMouseOver="this.className=menu1"onMouseOut="this.className=menu2">MyFiles
<divclass="list">
<ahref="http://www.Poluoluo.com/">破洛洛</a><br/>
<ahref="#">我的相册</a><br_fcksavedurl=""#">我的相册</a><br"/>
<ahref="#">我的保藏</a><br/>
</div>
</li>
<liclass="menu2"onMouseOver="this.className=menu1"onMouseOut="this.className=menu2">Management
<divclass="list">
<ahref="http://www.Poluoluo.com/">破洛洛</a><br/>
<ahref="#">我的首页</a><br_fcksavedurl=""#">我的首页</a><br"/>
<ahref="#">我的日记</a><br/>
<ahref="#">我的相册</a><br/>
<ahref="#">我的保藏</a><br/>
<ahref="#">我的日记</a><br/>
<ahref="#">我的相册</a><br/>
<ahref="#">我的保藏</a><br/>
</div>
</li>
</ul>
</div>
上面是css代码：
body{
background-color:white;
font-size:12px;
font-family:Arial,Helvetica,sans-serif;
margin:0px;
padding:0px;
color:white;
}
ul,li{
margin:0px;
padding:0px;
}
li{
display:inline;
list-style:none;
list-style-position:outside;
text-align:center;
font-weight:bold;
float:left;
}
a:link{
color:#336601;
text-decoration:none;
float:left;
width:100px;
padding:3px5px0px5px;
}
a:visited{
color:#336601;
text-decoration:none;
float:left;
padding:3px5px0px5px;
width:100px;
}
a:hover{
color:white;
float:left;
padding:3px3px0px20px;
width:88px;
text-decoration:none;
background-color:#539D26;
}
a:active{
color:white;
float:left;
padding:3px3px0px20px;
width:88px;
text-decoration:none;
background-color:#BD06B4;
}
#nav{
width:600px;
height:30px;
border-bottom:0px;
padding:0px5px;
position:absolute;
z-index:1;
left:198px;
top:25px;
}
.list{
line-height:20px;
text-align:left;
padding:4px;
font-weight:normal;
}
.menu1{
width:120px;
height:auto;
margin:6px4px0px0px;
border:1pxsolid#9CDD75;
background-color:#F1FBEC;
color:#336601;
padding:6px0px0px0px;
cursor:hand;
overflow-y:hidden;
filter:Alpha(opacity=70);
-moz-opacity:0.7;
}
.menu2{
width:120px;
height:18px;
margin:6px4px0px0px;
background-color:#F5F5F5;
color:#999999;
border:1pxsolid#EEE8DD;
padding:6px0px0px0px;
overflow-y:hidden;
cursor:hand;
}
详细演示：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>用css完成网页下拉菜单</title></head><styletype="text/css">body{background-color:white;font-size:12px;font-family:Arial,Helvetica,sans-serif;margin:0px;padding:0px;color:white;}ul,li{margin:0px;padding:0px;}li{display:inline;list-style:none;list-style-position:outside;text-align:center;font-weight:bold;float:left;}a:link{color:#336601;text-decoration:none;float:left;width:100px;padding:3px5px0px5px;}a:visited{color:#336601;text-decoration:none;float:left;padding:3px5px0px5px;width:100px;}a:hover{color:white;float:left;padding:3px3px0px20px;width:88px;text-decoration:none;background-color:#539D26;}a:active{color:white;float:left;padding:3px3px0px20px;width:88px;text-decoration:none;background-color:#BD06B4;}#nav{width:600px;height:30px;border-bottom:0px;padding:0px5px;position:absolute;z-index:1;left:198px;top:25px;}.list{line-height:20px;text-align:left;padding:4px;font-weight:normal;}.menu1{width:120px;height:auto;margin:6px4px0px0px;border:1pxsolid#9CDD75;background-color:#F1FBEC;color:#336601;padding:6px0px0px0px;cursor:hand;overflow-y:hidden;filter:Alpha(opacity=70);-moz-opacity:0.7;}.menu2{width:120px;height:18px;margin:6px4px0px0px;background-color:#F5F5F5;color:#999999;border:1pxsolid#EEE8DD;padding:6px0px0px0px;overflow-y:hidden;cursor:hand;}</style><body><divid="nav"><ul><liclass="menu2"onMouseOver="this.className=menu1"onMouseOut="this.className=menu2">HomePage<divclass="list"><ahref="http://www.Poluoluo.com/">破洛洛</a><br/><ahref="#">我的首页</a><br/><ahref="#">我的日记</a><br/><ahref="#">我的日记</a><br/><ahref="#">我的相册</a><br/><ahref="#">我的保藏</a><br/></div></li><liclass="menu2"onMouseOver="this.className=menu1"onMouseOut="this.className=menu2">Connection<divclass="list"><ahref="http://www.Poluoluo.com/">破洛洛</a><br/><ahref="#">我的首页</a><br/><ahref="#">我的日记</a><br/><ahref="#">我的相册</a><br/><ahref="#">我的保藏</a><br/></div></li><liclass="menu2"onMouseOver="this.className=menu1"onMouseOut="this.className=menu2">MyFiles<divclass="list"><ahref="http://www.Poluoluo.com/">破洛洛</a><br/><ahref="#">我的相册</a><br/><ahref="#">我的保藏</a><br/></div></li><liclass="menu2"onMouseOver="this.className=menu1"onMouseOut="this.className=menu2">Management<divclass="list"><ahref="http://www.Poluoluo.com/">破洛洛</a><br/><ahref="#">我的首页</a><br/><ahref="#">我的日记</a><br/><ahref="#">我的相册</a><br/><ahref="#">我的保藏</a><br/><ahref="#">我的日记</a><br/><ahref="#">我的相册</a><br/><ahref="#">我的保藏</a><br/></div></li></ul></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
</p>
你可以轻松地控制页面的布局。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
窥视卡
雷达卡
发表于 2015-1-15 23:31:52
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
发表于 2015-1-17 23:06:44