Small lantern effects without using images as background CSS _ exercise

To write this effect, you can familiarize yourself with the following:
1. Absolute positioning in relative positioning;
2. CSS for the browser hack;
3. Understand several borders and the changes that can be implemented; and the calculation method of width and height after adding borders;
4. Feel the floating. Only by doing more floating things can you feel more deeply;
5. You can also familiarize yourself with the addition and subtraction of primary schools ...... I used to write CSS with a calculator a long time ago.

First, I first use FW to draw a small lantern. During the painting process, I try not to show the rounded corner and draw it into an equal width, height, and center. These attributes are available in CSS! Bold text on the 12th!

So I started to think about layout! This layout is too troublesome and I have to use more labels. In fact, I didn't think too much about it, including the currentCodeI have never optimized it. I can write it wherever I think of it. In reality, the tag may be reduced, and the CSS code will be optimized!Copy codeThe Code is as follows:

<Ul id = "DL">
<Li>
<Div> <span> <a href = "#"> <strong> Fu </strong> </a> </span> </div>
</LI>
<Li>
<Div> <span> <a href = "#"> <strong> xi </strong> </a> </span> </div>
</LI>
<Li>
<Div> <span> <a href = "#"> <strong> shun </strong> </a> </span> </div>
</LI>
<Li>
<Div> <span> <a href = "#"> <strong> rat </strong> </a> </span> </div>
</LI>
</Ul>

After the structure is set, open 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 ;}< BR ># 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 ;}< BR ># 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 ;}< BR ># 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 ;}< BR ># dl a: hover {color: #000000 }< BR ># DL strong {display: block; border-top: 3 px solid #000000; width: 12px; border-bottom: 7px double # ff9900; position: absolute; line-Height: 47px; margin-top:-6px; margin-left: 8px ;}< br> * html # DL strong {margin-left:-6px ;}< br> * + html # DL strong {margin-left:-6px ;}

View results:Xmlns = "http://www.w3.org/1999/xhtml">

• moderate
• country
• Add
• oil