CSS 实用实例

来源：网络维他命作者：Linyupark 出处：巧巧读书 2008-02-11 进入讨论组

关键词：
groove
perl
word
html
asp

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 全部选择提示：你可先修改部分代码，再按运行]

文字：http://www.qqread.com/css/p396806.html进入讨论组讨论。