仿126邮箱精美滑动门

2024-09-05 12:20:05

字体：大中小

来源：转载

供稿：网友

126邮箱里的精美滑动门，相信你会喜欢的，绿色风格，简洁明快，布局灵活，在“门”里你可以布局图片、文字或者图文结合，你也可以只把滑动门部分抠下来，是不是非常漂亮呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>网易126滑动门</title><style>body,div,img,a,b,p,form,table,tr,td{text-align: center; margin: 0px;padding: 0px;list-style-type:none;font-size:12px;color:#0c0c0b; line-height:180%}body{background:url(/jscss/demoimg/200906/line_d.gif) bottom repeat-x; background-color:#FFFFFF}a{text-decoration:none;}a:hover{text-decoration:underline; color:#0f9327}.a1{text-decoration:underline; color:#b7f124}.a1:hover{text-decoration:underline; color:#f8efae}.f1{font-size:14px;}.c1{color:#ff7200}.c2{color:#FFFFFF}.c3{color:#f8efae}.c4{color:#32633b}.c4{ color:#0F9327}.ent_l{width:190px; height:325px; background:url(/jscss/demoimg/200906/tu_l.gif) no-repeat; float:left;}.ent_c{width:342px; height:325px; background-color:#FFFFFF; float:left; overflow:hidden} .bq{width:342px; height:71px; background:url(/jscss/demoimg/200906/bq_d.gif) no-repeat;}.bq ul{padding:0px; margin:0px; list-style-type:none;}.bq li{width:88px; height:23px; background:url(/jscss/demoimg/200906/bq_2.gif) 0px 1px no-repeat; padding-top:3px; margin-top:43px; text-align:center; float:left; cursor:pointer;}.bq li a{font-size:12px; font-weight:bold; color:#59814c;}.bq li a:hover{text-decoration:none;}.bq li.on{background:url(/jscss/demoimg/200906/bq_1.gif) no-repeat top; color:#fff;}.bq li.on a{color:#fff;}.bq_d{width:100%; height:253px; background:url(/jscss/demoimg/200906/line_2.gif) right repeat-y; border-bottom:#0f9327 1px solid; text-align:left}.bq_n{width:80%; padding-top:15px; text-align:center; margin-left:30px}.bq_d .c4{ text-align:left}.clear{ clear:both; font-size:0; height:0}</style><script language="JavaScript"> <div class="bq_d" id="oDivTab1">	<div class="bq_n"><img src="http://www.aspku.com/jscss/demoimg/200906/dbq.gif" /><br /><div class="c4">为广大编程爱好者分享各类开源源代码、JavaScript/CSS特效代码以及常用编程软件下载等。<br /></div></div>						 </div><div class="bq_d" id="oDivTab2" style="display:none"><div class="bq_n"><img src="http://www.aspku.com/jscss/demoimg/200906/cksd.gif" /><br /><div class="c4">　　这里放上说明文字吧！<br /></div></div></div><div class="bq_d" id="oDivTab3" style="display:none"><div class="bq_n"><img src="http://www.aspku.com/jscss/demoimg/200906/zdbc.gif" /><br /><div class="c4">　　超级漂亮哦，你可以把滑动门部分扒出来，其它的可以不要。<br /></div></div>				 </div></div>		   </body></html>

上一篇：斜角的CSS导航条

下一篇：一个可以选中当前菜单后高亮显示的导航条