CSS学习笔记列表

前面的也不再作总结了后面的例子可以很好的总结前面的例子
慢慢的还是发现IE和其他浏览器间的区别
比如margin 和 padding
直接帖我练习的（其实我们在平时有很多功能都没有用过，从没有用过）
html:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3

<head>
4

<title>text test</title>
5

</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

</div>
19

</body>
21

</html>

CSS:

ul
2

{
3

list-style-type:none;/*列表方式*/
4

margin:5px;
5

padding:2px;
6

width:200px;
7

border:1px solid #333;
8

font-weight:bolder;
9

/* list-style-image:url(list2.gif);
11

padding:0 0 0 20px;
12

line-height:200%; 各项间高度*/
13

}
15

li
17

{
18

/* display:inline;/*水平排列各项*/
19

background:#DDD url(list2.gif) no-repeat left center; /*li 背景图比ul的list-style-image效果好*/
20

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

}

效果图如下：（效果还不错吧，慢慢的，用这些基本的技巧，我们可以做出很多好看的效果来）

//****************************************
by: Amen cnblogs博客转载请注明出处
//****************************************