用CSS定义表格与模拟表格
- 2022-01-31
- 来源/作者： onegreen.org / 佚名
- 5 次浏览
表格的模拟
1、模拟前的建议:
DIV就是DIV 而不是table,极力反对变下面这样的DIV模拟表格,偶尔也考虑考虑一下亲和力
<div>
<div>
<div>...</div>
</div>
</div>
2、两列多行的数据显示:
两列多行的数据显示应用得最多的是文章列表之类的,一般来说主要由标题,时间组成的.
我选择ol来做~是下面演示的是有有序列表~可能你会问我~为什么不用ul呢??
在参考中说到ol:绘制文本的编号列表,ul:绘制文本的项目符号列表 简单的说就是ol是有序列表,ul是无序列表
html部分
<ol>
<li><a href="#" title="晚上我没吃饭">晚上我没吃饭</a>2-13</li>
<li><a href="#" title="今天是中国的情人节,要一个人过">今天是中国的情人节,要一个人过</a>2-12</li>
<li><a href="#" title="下午朋友来看我">下午朋友来看我</a>2-11</li>
<li><a href="#" title="^_^ 发工资拉">^_^ 发工资拉,</a>2-10</li>
<li><a href="#" title="...">...........</a> ....</li>
</ol>
CSS部分
ol.news{
width:400px;/*装饰用的~只限显示的数据总宽度 */
list-style-type :none;/*去掉列表数据*/
}
ol.news li{
text-align:right;/* 把文本右对齐,主要的作用是把时间放在右边*/
clear:both;/*清行*/
}
ol.news li a{
float:left;
display : inline;/* 再把主要显示的内容浮动到左边*/
text-align:left;/* 文本左对齐,可选~保证更多的浏览器是左对齐*/
}
另一种方法:
html
<ul class="news2">
<li><span>[广东]</span>这里没电了</li>
<li><span>[四川]</span>这里也没电了</li>
<li><span>[上海]</span>郁闷!同上,没电啊~</li>
<li><span>[北京]</span>挖哈哈 ^_^ 这里有电~</li>
<li><span>....</span>........</li>
</ul>
css
ul.news2{
width:400px;
list-style-type :none;
}
ul.news2 li{
text-align:left;/*这回向左对齐,因为我们要把span浮到右边*/
}
ul.news2 li span
{
float:right;/*我浮我浮我浮浮浮,我在右边了*/
display : inline;
}
另一种方法:
html
<ul class="news2">
<li><span>[广东]</span>这里没电了</li>
<li><span>[四川]</span>这里也没电了</li>
<li><span>[上海]</span>郁闷!同上,没电啊~</li>
<li><span>[北京]</span>挖哈哈 ^_^ 这里有电~</li>
<li><span>....</span>........</li>
</ul>
css
ul.news2{
width:400px;
list-style-type :none;
}
ul.news2 li{
text-align:left;/*这回向左对齐,因为我们要把span浮到右边*/
}
ul.news2 li span
{
float:right;/*我浮我浮我浮浮浮,我在右边了*/
display : inline;
}
