HTML--(ul+li)元素个性化设计表格实例

为什么不使用table做布局

1.Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源)。
2.Table会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度，让用户等待更久的时间)。
3.Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加HTTP会话数)。
4.在某些浏览器中Table里的文字的拷贝会出现问题。(这会让用户不悦)。
5.Table会影响其内部的某些布局属性的生效(比如<单元格里的元素的height:100%)(这会限制你页面设计的自由性)。
6.table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。(对于现代人们的个性化需求，表格展现的更多是条条框框)。

表格废了吗？

答案是否定的

1.页面布局很稳定，容易控制
3.可以形成复杂的变化，简单快速。
4.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

用处：

1.用于制作日历
2.文字与图片对齐

个性化设计表格

首先，我们可利用一些元素来模拟表格–以下以ul+li为例：

    <ul class="table"><li class="thead"><ul class="tr clearfix"><li>课程代码</li><li>课程名称</li><li>操作</li></ul></li><li class="tbody"><ul class="tr clearfix"><li>0001.1</li><li>计算机基础</li><li><div>删除</div></li></ul><ul class="tr clearfix"><li>0001.2</li><li>数据结构</li><li><div>删除</div></li></ul><ul class="tr clearfix"><li>0001.3</li><li>C语言程序设计</li><li><div>删除</div></li></ul></li></ul>

也可以选取div等块级元素，！不可选取p元素，详情请参照《HTML–(table/p/a/form及表单控件元素)的特性分析》。
1.类名为thead的元素为表头部分，类名为tbody的元素为主体部分；
2.类名为tr的元素我们理解为表格的行，行里的li我们理解为单元格。

/* 首先样式重置 */ul{list-style: none;padding: 0;}/* 表格基本样式规范 */.table{width: 800px;margin: 0 auto;background-color: powderblue;}/* 所有单元格浮动*/.table .tr>li{float: left;text-align: center;}/* 清除浮动带来的影响 */.clearfix::after{content: '';display: block;clear: both;}/* 行--设置行高 */.table .thead .tr{background-color: #008080;color: #fff;font-size: 16px;height: 35px;line-height: 35px;}.table .tbody .tr{background-color: #fff;color: #333;font-size: 14px;height: 40px;/* line-height属性仅适合单行文本，对于多行文本使用span包裹对其盒模型进行调整 */line-height: 40px;}.table .tbody .tr li:last-child>div{display: inline-block;width: 60px;height: 30px;background-color: #008c8c;color: #fff;font-size: 12px;line-height: 30px;cursor: pointer;}/* 列--设计列宽 */.table .thead li:first-child{width: 100px;}.table .tbody li:first-child{width: 100px;}.table .thead li:nth-child(2){width: 120px;}.table .tbody li:nth-child(2){width: 120px;}.table .thead li:last-child{width: 160px;}.table .tbody li:last-child{width: 160px;}

1.表格浮动，横向排列；
2.单元格元素可以选择除P元素外的任何元素–因为浮动的元素可以设置宽高；
3.单元格li浮动后直接导致单元格所在的行高塌陷–清除浮动带来的影响；
4.行高的设置，表头与主体每行宽度往往不同；
5.列宽的设置，一般表头和主体每一列宽度相同；利用弹性布局也可对列宽进行设置(如下：)。
6.类名为table的元素，设置好宽度后，若使用弹性布局，则一般不需要对行宽单独设置，若不使用弹性布局，注意行宽总宽度。

    /* 列--设计列宽 */.table .tr{display: flex;}.table .thead li:first-child{flex: 1;}.table .tbody li:first-child{flex: 1;}.table .thead li:nth-child(2){flex: 1.2;}.table .tbody li:nth-child(2){flex: 1.2;}.table .thead li:last-child{flex: 1;}.table .tbody li:last-child{flex: 1;}

效果：

HTML--(ul+li)元素个性化设计表格实例相关推荐

html修改li字体,使用导航标签html5更改导航 ul li元素的字体大小
我在css文档中遇到了设置自定义字体大小的问题.这是我的问题.我使用html5的导航标签.我在哪里必须放置font-size属性?使用导航标签html5更改导航> ul> li>元素 ...
Jsoup遍历ul li下的链接信息实例
2019独角兽企业重金招聘Python工程师标准>>> Document doc;try {String URL = "www.baidu.com";doc = ...
去掉ul,li元素前面点
css中 ul { list-style:none; margin:0px; } 转载于:https://www.cnblogs.com/zhangpengshou/archive/2013/03/0 ...
Div内有ul li元素，Div设置高度100%，谷歌IE下li过多会显示滚动条，而火狐下就会滚动条就不起作用，li会撑大Div...
产品上也许是用了过多iframe问题,自己做了demo没有这种情况解决办法: 设置Div的display样式为-moz-inline-grid -moz-代表火狐私有属性,使用自己的div样式就可以 ...
html中js隐藏div的高度,js如何获取div（ul li）元素的宽度和高度（包括width/height和CSS的宽度和高度）...
某些时候需要知道元素div(或 ul li)的宽度或高度,大多情况下可以用js取元素div的width或height属性获得,但有时候这个方法不一定奏效,把div的宽度或高度定义在CSS样式中,这个方 ...
ul li列表样式css,列表ul li 专用样式
列表ul li 专用样式 DATE: 2016-11-10 / VIEWS: 1142 主页级别的页面大部分的内容都是做在无序列表里面的,其庞大的使用规模,需要有完备的样式支持. ul{zoom:1} ...
CSS-5 列表元素(ol+ul++li+dl+dt+dd)、表格元素、单元格合并、表单元素(input+label+radio+...)、Emmet语法、结构伪类(:nth-child）
目录 1_列表元素 1.1_列表的实现方式 1.2_有序列表 – ol – li 1.3_无序列表 – ul - li 1.4_定义列表 – dl – dt - dd 1.5_ 写前端代码逻辑顺序 2 ...
用div,ul,li,span代替table设计表格
传统的表格一般都是用table标签设计的,现在网页设计很少用table了,主要用div,ul,li,span等标签,这是一种网页设计的思想了,和table不一样.用这种方式设计的html代码结构清晰, ...
html怎么实现单个li效果,基于DIV+ul+li实现的表格(多示例)
普通的显示数据的时候,ul就是项目列表,li就是列表项.可以用来显示数据.如果用于DIV+CSS布局的话,ul+li可以替换表格的作用,具体的设置,如果宽度高度.行间距.背景边框等需要配合CSS一起设 ...

HTML--(ul+li)元素个性化设计表格实例

为什么不使用table做布局

表格废了吗？

个性化设计表格

HTML--(ul+li)元素个性化设计表格实例相关推荐

最新文章

热门文章