仿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   id="y0giick"   class="bq_d" id="oDivTab1">	<div   id="akyesog"   class="bq_n"><img src="http://www.aspku.com/jscss/demoimg/200906/dbq.gif" /><br /><div   id="ikkymgo"   class="c4">為廣大編程愛好者分享各類開源源代碼、JavaScript/CSS特效代碼以及常用編程軟件下載等。<br /></div></div>						 </div><div   id="ygg00gs"   class="bq_d" id="oDivTab2" style="display:none"><div   id="y0m0uem"   class="bq_n"><img src="http://www.aspku.com/jscss/demoimg/200906/cksd.gif" /><br /><div   id="4egeicu"   class="c4">　　這里放上說明文字吧！<br /></div></div></div><div   id="wegceyg"   class="bq_d" id="oDivTab3" style="display:none"><div   id="msec0qa"   class="bq_n"><img src="http://www.aspku.com/jscss/demoimg/200906/zdbc.gif" /><br /><div   id="wcayciq"   class="c4">　　超級漂亮哦，你可以把滑動門部分扒出來，其它的可以不要。<br /></div></div>				 </div></div>		   </body></html>

上一篇：斜角的CSS導航條

下一篇：一個可以選中當前菜單后高亮顯示的導航條