ul做表格

最新推荐文章于 2025-05-11 16:52:33 发布

tiantian1980

最新推荐文章于 2025-05-11 16:52:33 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：疑难文章标签： stylesheet class float div border disk

本文链接：https://blog.youkuaiyun.com/tiantian1980/article/details/2031607

疑难专栏收录该内容

47 篇文章

订阅专栏

最近用div+css做网页，使用ul标签做表格，这里作一下总结：
基础回顾：
列表

无序列表 <ul><li>...</ul>

<ul> <li>Today <li>Tommorow </ul>

Today
Tommorow

有序列表 <ol><li>...</ol>

<ol> <li>Today <li>Tommorow </ol>

Today
Tommorow

定义列表(Definition lists) <dl><dt>...<dd>...</dl>

<dl> <dt>Today <dd>Today is yesterday. <dt>Tomorrow <dd>Tomorrow is today. </dl>

Today

Today will be yesterday.

Tomorrow

Tomorrow will be today.

Definition lists Compact <dl compact><dt>...<dd>...</dl>

Today

Today will be yesterday.

Tomorrow will be today.

<dl compact> <dt>Today <dd>Today is yesterday. <dt>Tomorrow <dd>Tomorrow is today. </dl>

定制列表元素

定制表中的标记 <li type=#> #=disk, circle, square

<ul> <li type=disc>ONE <li type=circle>TWO <li type=square>THREE </ul>

ONE
TWO
THREE

定制有序列表表中的序号 <li type=#> #=A, a, I, i, 1

<ol><li type=A>ONE-ONE <li>ONE-TWO</ol>

ONE-ONE
ONE-TWO

<ol><li type=a>ONE-ONE <li>ONE-TWO</ol>

ONE-ONE
ONE-TWO

<ol><li type=I>ONE-ONE <li>ONE-TWO</ol>

ONE-ONE
ONE-TWO

<ol><li type=i>ONE-ONE <li>ONE-TWO</ol>

ONE-ONE
ONE-TWO

<ol><li type=1>ONE-ONE <li>ONE-TWO</ol>

ONE-ONE
ONE-TWO

定制有序列表表中的序号的起始值 <ol start=#> #=number

<ol start=5>
<li type=A>ONE-ONE
<li>ONE-TWO
        <ol start=10>
        <li>TWO-ONE
        <li type=i>TWO-TWO
</ol></ol>

ONE-ONE
ONE-TWO
1. TWO-ONE
2. TWO-TWO

实例进阶：

1
<style>
#UL1{display:inline; width:180px;}
li{
list-style-type:none;
float:left;
width:90px;
height:22px;
text-align:left;
text-indent:20px;
border:#3A8B3E 1px solid;
}
</style>
<ul id="UL1">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</ul>

2
<style type="text/css">

</style>
<div id="box">
    <ul>
        <li>内容</li>
        <li>缩小窗口看看</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
    </ul>
<div>

3
<head>
<title>Sloppy</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" rev="stylesheet" href="css.css" type="text/css" media="all" />
<style type="text/css">
ul{ margin:0px;padding:0px;width:200px;}
ul li{float:left;list-style-type:none;border-top:#000 solid 1px;border-left:#000 solid 1px;width:65px; }
.border-r{ border-right:#000 solid 1px;}
.border-b{ border-bottom:#000 solid 1px; }
.border-l{border-right:#000 solid 1px;border-bottom:#000 solid 1px;}
</style>
</head>
<body>
<ul>
<li> </li>
<li> </li>
<li class="border-r"> </li>
</ul>
<ul>
<li> </li>
<li> </li>
<li class="border-r"> </li>
</ul>
<ul>
<li> </li>
<li> </li>
<li class="border-r"> </li>
</ul>
<ul>
<li class="border-b"> </li>
<li class="border-b"> </li>
<li class="border-l"> </li>
</ul>
</body>
这三个实例，无疑第三个是最好的解决办法，当然你知道一，二的缺陷，可以更好了解ul中的各种样式。