成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

寫這個(gè)效果，可以熟悉以下：
1、相對(duì)定位中的絕對(duì)定位；
2、CSS 針對(duì)瀏覽器 HACK；
3、了解幾種邊框，以及可以實(shí)現(xiàn)的變化；以及加了邊框后，寬度和高度的計(jì)算方法；
4、感受浮動(dòng)，浮動(dòng)的東西只有多作一些，才會(huì)感受更深一些；
5、還可以熟悉一下小學(xué)的加減法；呵…… 很早以前我都是拿計(jì)算器在寫CSS。

首先，我先用FW畫一個(gè)小燈籠，在畫的過程中，我盡可能不出現(xiàn)圓角，并畫成等寬，等高、居中；因?yàn)檫@些屬性在CSS中都有！文字12號(hào)加粗！

于是，開始想布局！這個(gè)布局太麻煩，我不得不用更多的標(biāo)簽來完成，實(shí)際上，我沒有想太多，包括現(xiàn)在的代碼都沒有優(yōu)化過，是我想到哪就寫到哪，實(shí)際中標(biāo)簽可能還可以減少，CSS代碼一定能優(yōu)化！

<ul id="dl"> 
<li> 
<div><span><a ><strong>福</strong></a></span></div> 
</li> 
<li> 
<div><span><a ><strong>喜</strong></a></span></div> 
</li> 
<li> 
<div><span><a ><strong>順</strong></a></span></div> 
</li> 
<li> 
<div><span><a ><strong>鼠</strong></a></span></div> 
</li> 
</ul> 

結(jié)構(gòu)定下來后，開寫CSS；

ul,li{ list-style:none; padding:0; margin:0; font-size:12px; line-height:1.8;} 
body{ padding:60px;} 

#dl li{ float:left; width:50px; border-left:1px solid #000; height:15px;} 
#dl div{ margin-left:-15px; position:absolute; margin-top:15px; border-bottom:3px solid #FF0000; border-left:3px solid #fff; border-right:3px solid #fff; width:23px;} 
#dl span{border-top:3px solid #FF0000; border-left:3px solid #fff; border-right:3px solid #fff; width:23px; display:block; position:absolute; margin-left:-3px; margin-top:42px;} 
#dl a{position:absolute; color:#FFFF00;cursor:pointer; text-decoration:none;background:#FF0000; width:29px; text-align:center; margin-top:-42px; margin-left:-3px; height:39px;} 
#dl a:hover{ color:#000000} 
#dl strong{display:block; border-top:3px solid #000000; width:12px; border-bottom:7px double #FF9900; position:absolute;line-height:47px; margin-top:-6px; margin-left:8px;} 
* html #dl strong{margin-left:-6px;} 
*+html #dl strong{margin-left:-6px;} 

看效果：
小燈籠的測試代碼 www.gimoo.net 中 國 加 油
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]