| 订阅 | 在线投稿
分享
 
 
 

CSS下拉菜单的制作

来源:互联网网民  宽屏版  评论
2008-11-25 07:16:47

HTML代码:

Example Source Code

<div id=”nav”>

<ul>

<li class=”menu2″ onMouseOver=”this.className=’menu1′” onMouseOut=”this.className=’menu2′”>我的首页

<div class=”list”>

<a href=”http://www.onlygrape.com/“>葡提子</a><br />

<a href=”#”>我的首页</a><br />

<a href=”#”>我的日志</a><br />

<a href=”#”>我的日志</a><br />

<a href=”#”>我的相册</a><br />

<a href=”#”>我的收藏</a><br />

</div>

</li>

<li class=”menu2″ onMouseOver=”this.className=’menu1′” onMouseOut=”this.className=’menu2′”>社区圈子

<div class=”list”>

<a href=”http://www.onlygrape.com/“>葡提子</a><br />

<a href=”#”>我的首页</a><br />

<a href=”#”>我的日志</a><br />

<a href=”#”>我的相册</a><br />

<a href=”#”>我的收藏</a><br />

</div>

</li>

<li class=”menu2″ onMouseOver=”this.className=’menu1′” onMouseOut=”this.className=’menu2′”>我的短信

<div class=”list”>

<a href=”http://www.onlygrape.com/“>葡提子</a><br />

<a href=”#”>我的相册</a><br />

<a href=”#”>我的收藏</a><br />

</div>

</li>

<li class=”menu2″ onMouseOver=”this.className=’menu1′” onMouseOut=”this.className=’menu2′”>账户管理

<div class=”list”>

<a href=”http://www.onlygrape.com/“>葡提子</a><br />

<a href=”#”>我的首页</a><br />

<a href=”#”>我的日志</a><br />

<a href=”#”>我的相册</a><br />

<a href=”#”>我的收藏</a><br />

<a href=”#”>我的日志</a><br />

<a href=”#”>我的相册</a><br />

<a href=”#”>我的收藏</a><br />

</div>

</li>

</ul>

</div>

大家特别留意类似于以下代码的HTML。这是变换的关键。

Example Source Code

class=”menu2″

onMouseOver=”this.className=’menu1′”

onMouseOut=”this.className=’menu2′”

下面看CSS代码:

Example Source Code

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:3px 5px 0px 5px;

}

a:visited{

color:#336601;

text-decoration:none;

float:left;

padding:3px 5px 0px 5px;

width:100px;

}

a:hover{

color:white;

float:left;

padding:3px 3px 0px 20px;

width:88px;

text-decoration:none;

background-color:#539D26;

}

a:active{

color:white;

float:left;

padding:3px 3px 0px 20px;

width:88px;

text-decoration:none;

background-color:#BD06B4;

}

#nav{

width:600px;

height:30px;

border-bottom:0px;

padding:0px 5px;

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:6px 4px 0px 0px;

border:1px solid #9CDD75;

background-color:#F1FBEC;

color:#336601;

padding:6px 0px 0px 0px;

cursor:hand;

overflow-y:hidden;

filter:Alpha(opacity=70);

-moz-opacity:0.7;

}

.menu2{

width:120px;

height:18px;

margin:6px 4px 0px 0px;

background-color:#F5F5F5;

color:#999999;

border:1px solid #EEE8DD;

padding:6px 0px 0px 0px;

overflow-y:hidden;

cursor:hand;

}

 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
HTML代码: Example Source Code <div id=”nav”> <ul> <li class=”menu2″ onMouseOver=”this.className=’menu1′” onMouseOut=”this.className=’menu2′”>我的首页 <div class=”list”> <a href=”http://www.onlygrape.com/“>葡提子</a><br /> <a href=”#”>我的首页</a><br /> <a href=”#”>我的日志</a><br /> <a href=”#”>我的日志</a><br /> <a href=”#”>我的相册</a><br /> <a href=”#”>我的收藏</a><br /> </div> </li> <li class=”menu2″ onMouseOver=”this.className=’menu1′” onMouseOut=”this.className=’menu2′”>社区圈子 <div class=”list”> <a href=”http://www.onlygrape.com/“>葡提子</a><br /> <a href=”#”>我的首页</a><br /> <a href=”#”>我的日志</a><br /> <a href=”#”>我的相册</a><br /> <a href=”#”>我的收藏</a><br /> </div> </li> <li class=”menu2″ onMouseOver=”this.className=’menu1′” onMouseOut=”this.className=’menu2′”>我的短信 <div class=”list”> <a href=”http://www.onlygrape.com/“>葡提子</a><br /> <a href=”#”>我的相册</a><br /> <a href=”#”>我的收藏</a><br /> </div> </li> <li class=”menu2″ onMouseOver=”this.className=’menu1′” onMouseOut=”this.className=’menu2′”>账户管理 <div class=”list”> <a href=”http://www.onlygrape.com/“>葡提子</a><br /> <a href=”#”>我的首页</a><br /> <a href=”#”>我的日志</a><br /> <a href=”#”>我的相册</a><br /> <a href=”#”>我的收藏</a><br /> <a href=”#”>我的日志</a><br /> <a href=”#”>我的相册</a><br /> <a href=”#”>我的收藏</a><br /> </div> </li> </ul> </div> 大家特别留意类似于以下代码的HTML。这是变换的关键。 Example Source Code class=”menu2″ onMouseOver=”this.className=’menu1′” onMouseOut=”this.className=’menu2′” 下面看CSS代码: Example Source Code 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:3px 5px 0px 5px; } a:visited{ color:#336601; text-decoration:none; float:left; padding:3px 5px 0px 5px; width:100px; } a:hover{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#539D26; } a:active{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#BD06B4; } #nav{ width:600px; height:30px; border-bottom:0px; padding:0px 5px; 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:6px 4px 0px 0px; border:1px solid #9CDD75; background-color:#F1FBEC; color:#336601; padding:6px 0px 0px 0px; cursor:hand; overflow-y:hidden; filter:Alpha(opacity=70); -moz-opacity:0.7; } .menu2{ width:120px; height:18px; margin:6px 4px 0px 0px; background-color:#F5F5F5; color:#999999; border:1px solid #EEE8DD; padding:6px 0px 0px 0px; overflow-y:hidden; cursor:hand; }
󰈣󰈤
 
 
 
>>返回首页<<
 
 热帖排行
 
 
静静地坐在废墟上,四周的荒凉一望无际,忽然觉得,凄凉也很美
©2005- 王朝网络 版权所有