已完结小说排行榜,神武八荒一颗小说

主頁 > 知識庫 > 不用圖片作背景CSS做的小燈籠效果_練習用

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

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

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

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

復制代碼代碼如下:

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;} 

看效果：

<!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> /*https://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> <div><span><strong>中</strong></span></div> </li> <li> <div><span><strong>國</strong></span></div> </li> <li> <div><span><strong>加</strong></span></div> </li> <li> <div><span><strong>油</strong></span></div> </li> </ul> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

標簽：滄州貴州鶴壁邵陽混顯萊蕪賀州廣安

巨人網絡通訊聲明：本文標題《不用圖片作背景CSS做的小燈籠效果_練習用》，本文關鍵詞不用,圖片,作,背景,CSS,做,；如發(fā)現(xiàn)本文內容存在版權問題，煩請?zhí)峁┫嚓P信息告之我們，我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡，涉及言論、版權與本站無關。

濮阳杆衣贸易有限公司

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