您的位置：首页 > Web前端 > CSS

CSS学习笔记--列表

2007-10-08 22:13 344 查看

前面的也不再作总结了后面的例子可以很好的总结前面的例子

慢慢的还是发现IE和其他浏览器间的区别

比如margin 和 padding

直接帖我练习的（其实我们在平时有很多功能都没有用过，从没有用过）

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

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 }
效果图如下：（效果还不错吧，慢慢的，用这些基本的技巧，我们可以做出很多好看的效果来）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航