Write this effect and be familiar with the following:
1, the relative positioning of the absolute positioning;
2, CSS for browser HACK;
3, understand several border, and can realize the change, and add the border, the width and height of the calculation method;
4, feel floating, floating things only a little more, will feel deeper;
5, you can also be familiar with the addition and subtraction of primary school, OH ... I've been working with calculators in CSS for a long while ago.
First of all, I use FW to draw a small lantern, in the process of painting, I as far as possible not to appear rounded corners, and draw as equal width, and so high, centered; Because these properties are available in CSS! Text 12th Bold!
So, start thinking about layout! This layout is too troublesome, I have to use more tags to complete, in fact, I do not think too much, including the current code is not optimized, is I think of where to write, the actual tag may also be reduced, CSS code must be able to optimize!
Copy CodeThe code is as follows:
After the structure is set down, write CSS;
Copy CodeThe code is as follows:
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;}
Look at the effect:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> small lantern test code 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> </pead> <body> < UL id= "DL" > <li> <span><strong> </strong></span> </li> <li> <span ><strong> Country </strong></span> </li> <li> <span><strong> plus </strong> </span> </li> <li> <span><strong> oil </strong></span> </li> </ul > </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
