寫這個效果，可以熟悉以下：
1、相對定位中的絕對位置；
2、CSS 針對瀏覽器 HACK；
3、瞭解幾種邊框，以及可以實現的變化；以及加了邊框後，寬度和高度的計算方法；
4、感受浮動，浮動的東西只有多作一些，才會感受更深一些；
5、還可以熟悉一下小學的加減法；呵…… 很早以前我都是拿計算機在寫CSS。
首先，我先用FW畫一個小燈籠，在畫的過程中，我儘可能不出現圓角，並畫成等寬，等高、置中；因為這些屬性在CSS中都有！文字12號加粗！
於是，開始想布局！這個布局太麻煩，我不得不用更多的標籤來完成，實際上，我沒有想太多，包括現在的代碼都沒有最佳化過，是我想到哪就寫到哪，實際中標籤可能還可以減少，CSS代碼一定能最佳化！
複製代碼 代碼如下:
結構定下來後，開寫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;}
看效果：
<!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=utf-8" /> <title>小燈籠的測試代碼 www.jb51.net</title> <style> /*http://www.jb51.net*/ 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;} </style> </head> <body> <ul id="dl"> <li> <span><strong>中</strong></span> </li> <li> <span><strong>國</strong></span> </li> <li> <span><strong>加</strong></span> </li> <li> <span><strong>油</strong></span> </li> </ul> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
