To write this effect, you can familiarize yourself with the following:
1, the relative positioning of the absolute positioning;
2, CSS for browser HACK;
3, understand several borders, and the changes can be achieved, as well as the border, the width and height of the calculation method;
4, feel floating, floating things only to do some more, will feel a little deeper;
5, can also be familiar with the primary school plus subtraction; I've been writing CSS for a long time ago.
First of all, I use FW to draw a small lantern, in the process of painting, I do not appear as far as possible rounded corners, and painted into equal width, and so high, centered; Because these attributes are in the CSS! Text number 12th Bold!
So, start to want layout! This layout is too troublesome, I have to use more tags to complete, in fact, I did not think too much, including the current code has not been optimized, is I think of where to write, the actual label may also be reduced, CSS code can certainly be optimized!
Copy Code code as follows:
<ul id= "DL" >
<li>
<div><span><a href= "#" ><strong> Fu </strong></a></span></div>
</li>
<li>
<div><span><a href= "#" ><strong> Hi </strong></a></span></div>
</li>
<li>
<div><span><a href= "#" ><strong> Shun </strong></a></span></div>
</li>
<li>
<div><span><a href= "#" ><strong> mice </strong></a></span></div>
</li>
</ul>
After the structure is set down, write CSS;
Copy Code code 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;}
See 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{li St-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 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> <div><span><strong> </s Trong></span></div> </li> <li> <div><span><strong> Country </strong> </span></div> </li> <li> <div><span><strong> plus </strong></span ></div> </li> <li> <div><span><strong> Oil </strong></span></ div> </li> </ul> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
