作者：Linyupark 时间： 2006-07-12 文档类型：翻译 来自：网络维他命
第 1 页 CSS 实用实例 [1] 第 2 页 CSS 实用实例 [2] 第 3 页 CSS 实用实例 [3] 第 4 页 CSS 实用实例 [4] 第 5 页 CSS 实用实例 [5] 第 6 页 CSS 实用实例 [6] 第 7 页 CSS 实用实例 [7] 第 8 页 CSS 实用实例 [8] 第 9 页 CSS 实用实例 [9]
List 列表
无序列表的不同项目标号
运行代码框<html> <head> <style type="text/css"> ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.none {list-style-type: none} </style> </head> <body> <ul class="disc"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="circle"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="square"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="none"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
有序的列表的不同项目标号
运行代码框<html> <head> <style type="text/css"> ol.decimal {list-style-type: decimal} ol.lroman {list-style-type: lower-roman} ol.uroman {list-style-type: upper-roman} ol.lalpha {list-style-type: lower-alpha} ol.ualpha {list-style-type: upper-alpha} </style> </head> <body> <ol class="decimal"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="lroman"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="uroman"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="lalpha"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="ualpha"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
设置一个图片做为标号
运行代码框<html> <head> <style type="text/css"> ul { list-style-image: url('/articleimg/2006/07/3744/arrow.gif') } </style> </head> <body> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
放置标号
运行代码框<html> <head> <style type="text/css"> ul.inside { list-style-position: inside } ul.outside { list-style-position: outside } </style> </head> <body> <p>This list has a list-style-position with a value of "inside":</p> <ul class="inside"> <li>Earl Grey Tea - A fine black tea</li> <li>Jasmine Tea - A fabulous "all purpose" tea</li> <li>Honeybush Tea - A super fruity delight tea</li> </ul> <p>This list has a list-style-position with a value of "outside":</p> <ul class="outside"> <li>Earl Grey Tea - A fine black tea</li> <li>Jasmine Tea - A fabulous "all purpose" tea</li> <li>Honeybush Tea - A super fruity delight tea</li> </ul> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
所有列表属性一行解决
运行代码框<html> <head> <style type="text/css"> ul { list-style: square inside url('arrow.gif') } </style> </head> <body> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
维度
增加两行间距
运行代码框<html> <head> <style type="text/css"> p.small {line-height: 0.4cm} p.big {line-height: 0.9cm} </style> </head> <body> <p> This is a paragraph with a standard line-height. This is a paragraph with a standard line-height. This is a paragraph with a standard line-height. This is a paragraph with a standard line-height. </p> <p class="small"> This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. </p> <p class="big"> This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height. </p> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
出处：网络维他命 责任编辑：moby
上一页 CSS 实用实例 [5] 下一页 CSS 实用实例 [7]
◎进入论坛网站综合、网页制作版块参加讨论
蓝色理想版权申明：除部分特别声明不要转载，或者授权我站独家播发的文章外，大家可以自由转载我站点的原创文章，但原作者和来自我站的链接必须保留（非我站原创的，按照原来自一节，自行链接）。文章版权归我站和作者共有。
转载要求：转载之图片、文件，链接请不要盗链到本站，且不准打上各自站点的水印，亦不能抹去我站点水印。
特别注意：本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有，文章若有侵犯作者版权，请与我们联系，我们将立即删除修改。
第 1 页 
第 6 页 CSS 实用实例 [6]
