<Div id = "menu">
<Div class = "cond">
<Div class = "conc">
<Div class = "conb">
<Div class = "cona">
<Div class = "black">
<A class = "switch" href = "http://www.111cn.net/default.asp? CateID = 3 "target =" _ blank ">
<Span class = "white">
<Span class = "blackc" title = "Div + CSS tutorial"> Div + CSS tutorial </span>
</Span>
</A>
</Div>
</Div>
</Div>
</Div>
</Div> <Div class = "cond">
<Div class = "conc">
<Div class = "conb">
<Div class = "cona">
<Div class = "black">
<A class = "switch" href = "http://www.111cn.net/default.asp? CateID = 9 "target =" _ blank ">
<Span class = "white">
<Span class = "blackc" title = "CSS layout instance"> CSS layout instance </span>
</Span>
</A>
</Div>
</Div>
</Div>
</Div>
</Div> <Div class = "cond">
<Div class = "conc">
<Div class = "conb">
<Div class = "cona">
<Div class = "black">
<A class = "switch" href = "http://www.111cn.net/default.asp? CateID = 5 "target =" _ blank ">
<Span class = "white">
<Span class = "blackc" title = "CSS2.0 tutorial"> CSS2.0 tutorial </span>
</Span>
</A>
</Div>
</Div>
</Div>
</Div>
</Div> <Div class = "cond">
<Div class = "conc">
<Div class = "conb">
<Div class = "cona">
<Div class = "black">
<A class = "switch" href = "http://www.111cn.net/css_websites_showcase/" target = "_ blank">
<Span class = "white">
<Span class = "blackc" title = "CSS cool site"> CSS cool site </span>
</Span>
</A>
</Div>
</Div>
</Div>
</Div>
</Div> <Div class = "cond">
<Div class = "conc">
<Div class = "conb">
<Div class = "cona">
<Div class = "black">
<A class = "switch" href = "http://www.111cn.net/css_template/" target = "_ blank">
<Span class = "white">
<Span class = "blackc" title = "CSS template download"> CSS template download </span>
</Span>
</A>
</Div>
</Div>
</Div>
</Div>
</Div>
</Div>
Let's look at CSS encoding: Example Source Code [www.111cn.net]
# Menu {
Display: block;
Position: relative;
Background: # edebdc;
Width: Pixel px;
Padding: 25px;
Border: 1px solid #000;
Margin: 0 auto;
}
. White {
Position: absolute;
Width: 100px;
Height: 20px;
Color: # fff;/* www.111cn.net */
Background: # fff;
Border-top: 1px solid # ffdc56;
Border-right: 1px solid #957704;
Border-bottom: 1px solid #937603;
Border-left: 1px solid # ffdc56;
Overflow: hidden;
Text-align: center;
}
. Blackc {
Position: absolute;
Top: 0;/* www.111cn.net */
Left: 0;
Width: 98px;
Height: 18px;
Color: #000;
Font-family: verdana;
Font-size: 11px;
Font-weight: bold;
Overflow: hidden;
Border-top: 1px solid # ffd42e;
Border-right: 1px solid # caa205;
Border-bottom: 1px solid # c9a105;
Border-left: 1px solid # ffd42e;
Overflow: hidden;
Text-align: center;
Line-height: 15px;
Background: # fc0;
}
. Black {
Position: relative;
Top: 0;/* www.111cn.net */
Left: 0;
Width: 102px;
Height: 22px;
Border: 1px solid #000;
}
. Cona {
Position: relative;
Top: 0;/* www.111cn.net */
Left: 0;
Width: 105px;
Height: 25px;
Border-top: 1px solid # d5d3ca;
Border-left: 1px solid # d5d3ca;
Background: # f7f6ef;
}
. Conb {
Position: relative;
Top: 0;
Left: 0;
Width: Pixel px;
Height: 27px;
Border-top: 1px solid # b8b7af;
Border-left: 1px solid # b8b7af;
Background: # f7f6ef;
}
. Conc {
Position: relative;
Top: 0;/* www.111cn.net */
Left: 0;
Width: Pixel px;
Height: 29px;
Border-top: 1px solid #9c9b95;
Border-left: 1px solid #9c9b95;
Background: # f7f6ef;
}
. Cond {
Position: relative;
Top: 0;
Left: 0;
Width: 111px;
Height: 31px;
Border-top: 1px solid # d5d3ca;
Border-left: 1px solid # d5dc3a;
Background: # fff;
Margin-top: 2px;
}
# Menu a. switch: visited {
Text-decoration: none;
}
# Menu a. switch {
Color: # c00;
Text-decoration: none;
Position: absolute;
}
# Menu a. switch: hover {
Color: # c00;
Background: # edebdc;
Cursor: pointer;
}
# Menu a. switch: hover. white {
Position: absolute;
Width: 100px;
Height: 20px;
Color: # fff;
Background: # fff;
Border-bottom: 1px solid # ffdc56;
Border-left: 1px solid #957704;
Border-top: 1px solid #937603;
Border-right: 1px solid # ffdc56;
Overflow: hidden;
Text-align: center;
}
# Menu a. switch: hover. blackc {
Position: absolute;
Top: 0;/* www.111cn.net */
Left: 0;
Width: 98px;
Height: 18px;
Color: #000;
Font-size: 11px;
Font-weight: bold;
Overflow: hidden;
Border-bottom: 1px solid # ffd42e;
Border-left: 1px solid # caa205;
Border-top: 1px solid # c9a105;
Border-right: 1px solid # ffd42e;
Overflow: hidden;
Text-align: center;
Line-height: 17px;
Background: # eb0;
} |
