CSS学习笔记--列表
前面的也不再作总结了 后面的例子可以很好的总结前面的例子
慢慢的还是发现IE和其他浏览器间的区别
比如margin 和 padding
直接帖我练习的(其实我们在平时有很多功能都没有用过,从没有用过)
html:
CSS:
慢慢的还是发现IE和其他浏览器间的区别
比如margin 和 padding
直接帖我练习的(其实我们在平时有很多功能都没有用过,从没有用过)
html:
1![](/Images/OutliningIndicators/None.gif)
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![](/Images/OutliningIndicators/None.gif)
18
</div>
19![](/Images/OutliningIndicators/None.gif)
20
</body>
21
</html>
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/None.gif)
12
![](/Images/OutliningIndicators/None.gif)
13
![](/Images/OutliningIndicators/None.gif)
14
![](/Images/OutliningIndicators/None.gif)
15
![](/Images/OutliningIndicators/None.gif)
16
![](/Images/OutliningIndicators/None.gif)
17
![](/Images/OutliningIndicators/None.gif)
18
![](/Images/OutliningIndicators/None.gif)
19
![](/Images/OutliningIndicators/None.gif)
20
![](/Images/OutliningIndicators/None.gif)
21
![](/Images/OutliningIndicators/None.gif)
CSS:
1
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
10
/* list-style-image:url(list2.gif);
11
padding:0 0 0 20px;
12
line-height:200%; 各项间高度*/
13
14
}
15
16
li
17
{
18
/* display:inline;/*水平排列各项*/
19
background:#DDD url(list2.gif) no-repeat left center; /*li 背景图比ul的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
}
效果图如下:(效果还不错吧,慢慢的,用这些基本的技巧,我们可以做出很多好看的效果来)![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
3
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
4
![](/Images/OutliningIndicators/InBlock.gif)
5
![](/Images/OutliningIndicators/InBlock.gif)
6
![](/Images/OutliningIndicators/InBlock.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/InBlock.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
15
![](/Images/OutliningIndicators/None.gif)
16
![](/Images/OutliningIndicators/None.gif)
17
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
18
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
19
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/InBlock.gif)
28
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
//****************************************
by: Amen cnblogs博客 转载请注明出处
//****************************************
by: Amen cnblogs博客 转载请注明出处
//****************************************