快捷導(dǎo)航

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

更新時(shí)間：2008年08月26日 08:32:42 作者：

純CSS做的小燈籠，這東西就是用來(lái)熟悉CSS用的，實(shí)際中相當(dāng)不贊成這樣用！實(shí)際中誰(shuí)這樣用，一定是閑的！

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

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

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

復(fù)制代碼代碼如下:

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

結(jié)構(gòu)定下來(lái)后，開(kāi)寫(xiě)CSS；

復(fù)制代碼代碼如下:

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>小燈籠的測(cè)試代碼 www.dbjr.com.cn</title> <style> /*http://www.dbjr.com.cn*/ 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><a href="http://www.dbjr.com.cn"><strong>中</strong></a></span></div> </li> <li> <div><span><a href="http://www.dbjr.com.cn"><strong>國(guó)</strong></a></span></div> </li> <li> <div><span><a href="http://www.dbjr.com.cn"><strong>加</strong></a></span></div> </li> <li> <div><span><a href="http://www.dbjr.com.cn"><strong>油</strong></a></span></div> </li> </ul> </body> </html>

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