CSS learning notes-list

The previous examples are no longer summarized. The previous examples can be well summarized.
Gradually discover the differences between IE and other browsers
Such as margin and padding
Post my exercises directly (in fact, we have never used many functions at ordinary times)
HTML: 1
2 < Html Xmlns = "Http://www.w3.org/1999/xhtml" XML: Lang = "En" Lang = "En" >
3 < Head >
4 < Title > Text Test </ Title >
5 < Link Type = "Text/CSS" Href = "Css1.css" Media = "Screen" REL = "Stylesheet" />
6 </ Head >
7 < Body >
8 < Div ID = "Container" >
9 < Ul >
10 < Li > Drinks menu </ Li >
11 < Li > Beer </ Li >
12 < Li > Spirits </ Li >
13 < Li > Cola </ Li >
14 < Li > Lemonade </ Li >
15 < Li > Tea </ Li >
16 < Li > Coffee </ Li > </ Ul >
17
18 </ Div >
19
20 </ Body >
21 </ Html >

CSS: 1 Ul
2   {} {
3 List-style-type : None ; /**/ /*List Method*/
4 Margin : 5px ;
5 Padding : 2px ;
6 Width : 200px ;
7 Border : 1px solid #333 ;
8 Font-weight : Bolder ;
9
10 /**/ /*List-style-image: url(list2.gif );
11Padding: 0 0 0 20px;
12Line-Height: 200%; height of each item*/
13
14   }
15  
16 Li
17   {} {
18 /**/ /*Display: inline;/* arrange items horizontally*/
19 Background : # DDD url(list2.gif) No-repeat left center ;   /**/ /*Li background image is better than UL's list-style-Image*/
20  
21 Padding : 2px 25px ;
22 Margin : 0 ;
23 Border-left : 1px solid # fff ;
24 Border-bottom : 1px solid # aaa ;
25 Border-Right : 1px solid #666 ;
26 Border-top : 1px solid # fff ;
27
28   }

As shown in the following figure: (the effect is good. Slowly, with these basic skills, we can make a lot of nice-looking results)