仓酷云

标题: 来一发没有JS只用CSS制造的网页下拉菜单 [打印本页]

作者: 仓酷云 时间: 2015-1-15 23:31
标题: 来一发没有JS只用CSS制造的网页下拉菜单
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>
你可以轻松地控制页面的布局。

作者: 兰色精灵 时间: 2015-1-17 23:06
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 乐观 时间: 2015-1-25 13:20
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

作者: 冷月葬花魂 时间: 2015-2-2 22:16
滚动条)层属性--溢出(visible/hidden/scroll/auto)

作者: 小女巫 时间: 2015-2-8 14:17
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 小魔女 时间: 2015-2-25 19:32
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 愤怒的大鸟 时间: 2015-3-8 02:56
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 不帅 时间: 2015-3-15 21:16
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

作者: 深爱那片海 时间: 2015-3-22 05:05
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

欢迎光临仓酷云 (http://ckuyun.com/)