ul li 做成table样式

最新推荐文章于 2024-03-14 15:31:53 发布

原创最新推荐文章于 2024-03-14 15:31:53 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了使用CSS对列表（ul, li）和表格（table）进行样式化的区别。指出使用列表更易于后期样式调整，并提供了一个使用CSS定义列表样式的示例。

区别：用table做的表格比较难通过css改变全新样式，用ul li　在以后要改变样式就相对快速多了

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.list{
    border-width:1px;
    border-color:#000000;
    border-style:solid;

    width:30%;
}
.list li{
    width:50px;
    height: 30px;
    text-align:center;
    float:left;
}

</style>

</HEAD>

<BODY>
<UL class="list">
    <LI>aaaaa</LI>
    <LI>bbbbb</LI>
    <LI>ccccc</LI>
    <LI>ddddd</LI>
    <LI>eeeee</LI>
    <LI>fffff</LI>
    <LI>ggggg</LI>
    <LI>hhhhh</LI>
    <LI>jjjjj</LI>
    <LI>aaaaa</LI>
    <LI>bbbbb</LI>
    <LI>ccccc</LI>
    <LI>ddddd</LI>
    <LI>eeeee</LI>
    <LI>fffff</LI>
    <LI>ggggg</LI>
    <LI>hhhhh</LI>
    <LI>jjjjj</LI>
    <LI>aaaaa</LI>
    <LI>bbbbb</LI>
    <LI>ccccc</LI>
    <LI>ddddd</LI>
    <LI>eeeee</LI>
    <LI>fffff</LI>
    <LI>ggggg</LI>
    <LI>hhhhh</LI>
    <LI>jjjjj</LI>
</UL>
<OL>
    <LI>aaaaa</LI>
    <LI>bbbbb</LI>
    <LI>ccccc</LI>
    <LI>ddddd</LI>
    <LI>eeeee</LI>
    <LI>fffff</LI>
    <LI>ggggg</LI>
    <LI>hhhhh</LI>
    <LI>jjjjj</LI>
</OL>
</BODY>
</HTML>