不用圖片作背景CSS做的小燈籠效果_練慣用

寫這個效果，可以熟悉以下：
1、相對定位中的絕對位置；
2、CSS 針對瀏覽器 HACK；
3、瞭解幾種邊框，以及可以實現的變化；以及加了邊框後，寬度和高度的計算方法；
4、感受浮動，浮動的東西只有多作一些，才會感受更深一些；
5、還可以熟悉一下小學的加減法；呵…… 很早以前我都是拿計算機在寫CSS。

首先，我先用FW畫一個小燈籠，在畫的過程中，我儘可能不出現圓角，並畫成等寬，等高、置中；因為這些屬性在CSS中都有！文字12號加粗！

於是，開始想布局！這個布局太麻煩，我不得不用更多的標籤來完成，實際上，我沒有想太多，包括現在的代碼都沒有最佳化過，是我想到哪就寫到哪，實際中標籤可能還可以減少，CSS代碼一定能最佳化！ 複製代碼 代碼如下:

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

結構定下來後，開寫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;}

看效果： xmlns="http://www.w3.org/1999/xhtml">

• 中
• 國
• 加
• 油