关于UL,OL列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ul,ol</title>

<style type="text/css">
*{ padding: 0; margin: 0; }
body{ font-size: 12px; }
div.june{ width: 500px; margin: 50px; border: 1px solid #ccc; }
ul,ol{ padding: 50px; border: 1px solid #ccc; }
li{ list-style-type: decimal; }
.disc li{ list-style-type: disc; }
</style>
</head>
<!--一般建议不使用css这些生成序列号,因为个浏览器下存在不同的显示效果,从而影响用户体验。exp:网站上最常用的就是这个两个decimal,和disc。decimal可以适时使用,因为它的bug不是很明显,IE6/7/chorme/FF/显示一直,只有IE8序号距离内容窄了6px,边框距离序号宽出5px。disc就差别大了,所有浏览器下显示的都不同。我们最好用图片代替。-->
<body>

<div class="june">
    <ul class="decimal">
      <li>decimal</li>
    <li>decimal</li>
    <li>decimal</li>
    <li>decimal</li>
    <li>decimal</li>
  </ul>
  <ul class="disc">
      <li>disc</li>
    <li>disc</li>
    <li>disc</li>
    <li>disc</li>
  </ul>
  <ol class="">
      <li>ol</li>
    <li>ol</li>
    <li>ol</li>
  </ol>
</div>
</body>
</html>

posted @ 2012-06-04 17:38  glelaine  阅读(362)  评论(0编辑  收藏  举报