css整理-06 表和列表
表格式化
表布局
table, display:table
caption, display: table-caption
thead, display: table-header-group
tbody, display: table-row-group
tr, display: table-row
td,td, display:table-cell
tfoot, display:table-footer-group
col, display:table-column
以行为主
- css将其表模型定义为以行为主,即假设创作人员创建的标记语言会显示声明行;如果没有会自动添加
列
- 列和列组只能接受4种样式
border
:只有当border-collapse
属性值为collapse
时才能为列和列组设置边框background
:只有当单元格及其行有透明背景时,列和列组的背景才可见width
:定义了列和列组的最小宽度visibility
: 如果一个列或列组的visibility
为collapse
,则该列或列组中所有单元格都不显示
表层
表标题
- 表标题:
caption-side
,top,bottom
- 表单元格边框:
border-collapse
,separate,collapse
;应用于dispaly
为table,inline-table
的元素 - 边框间隔:
border-spacing: <length><length>
,应用于dispaly
为table,inline-table
且border-collapse
设置为separate
的元素 - 处理空单元格:
empty-cell:show,hide
,应用于dispaly
为table-cell
的元素,相当于对特定元素应用visibility:hidden
;也可以对特定单元格应用display:none
表大小
宽度
- 默认单元格宽度按内容宽度比例分配
table-layout
设置fixed
(应用于dispaly
为table,inline-table
的元素),单元格宽度会平均分配
对齐
- 水平:
text-align
- 垂直:
vertical-align
列表
标志类型:list-style-type
- 可以应用到
ul,li
disc, circle, square, decimal, decimal-leading-zero, upper-alpha, lower-alpha, upper-roman, lower-roman
列表项图像
list-style-image: url()
- 应用于
display
为list-item
的元素(li)
简写
list-style
,|list-style-type|list-style-image|list-style-position|
生成内容
插入生成内容
:before,:after
- 插入图片:
content: url()
- 可以将其设置为块级元素
- 生成引号:
content: open-quote
css整理-06 表和列表的更多相关文章
- 【纯手工】整理豆瓣热点推荐列表-财经&自我管理
[纯手工]整理豆瓣热点推荐列表-财经&自我管理 简七君 2013-10-27 09:40:06 豆瓣君的首页热点推荐实在难以捉摸,只有正好跳出推荐贴时才能按图索骥找列表.简七和小伙伴 ...
- activiti自定义流程之自定义表单(三):表单列表及预览和删除
注:(1)环境配置:activiti自定义流程之自定义表单(一):环境配置 (2)创建表单:activiti自定义流程之自定义表单(二):创建表单 自定义表单创建成功,要拿到activiti中使用,自 ...
- 如何写好CSS系列之表单(form)
表单模块可以分为两部分:一是表单的布局,也就是规范表单元素单元的排列位置:二是表单元素,如:输入框.单选.复选.列表组件.搜索组件等,由于列表组件.搜索组件不是单纯的css组件,所以暂且没有实现. 一 ...
- 非常好用的CSS样式重置表
非常好用的CSS样式重置表 我们在项目前期准备时都会准备好一个reset.css,因为不同浏览器对标签的解析各不相同,重置css样式可以让标签在不同浏览器下产生相同的效果.所以一个 ...
- 11种常用css样式之鼠标、列表和尺寸样式学习
鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/curs ...
- css如何玩转有序无序列表项list样式
在无序列表ul>li中,无线列表的标志是出现在各列表前面的圆点.在有序列表ol>li中,前面默认带有数字,如何修改列表前面的项目符号,只需要通过list-style调整就好,常见的符号有( ...
- 06: 字典、顺序表、列表、hash树 实现原理
算法其他篇 目录: 1.1 python中字典对象实现原理 1.2 顺序表 1.3 python 列表(list) 1.1 python中字典对象实现原理返回顶部 注:字典类型是Python中最常 ...
- css整理之-----------选择器
背景 在20年初时总感觉自己的css 不够用,想把css 相关的东西整理下,去年一整年都比较忙,忙着就到2021了,今天趁着有点时间,先从选择器开始吧. 听说图片可以提升颜值.... 选择器 CSS选 ...
- CSS的样式表基本概念
一.样式表分类 1.内联样式表 <p style="fint-size:24px;">直接在标签内部进行样式设置</style> 2.内嵌样式表 <h ...
随机推荐
- 手风琴特效 transition
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 【数据结构】红黑树 C语言代码
连看带写花了三天,中途被指针引用搞得晕晕乎乎的. 插入和删除的调整过程没有看原理,只看了方法,直接照着写的. 看了两份资料,一份是算法导论第12-13章, 另一份是网上的资料http://blog.c ...
- supersr--九宫格公式(根据多少行多少列排版)
- (void)layoutSubviews{ [super layoutSubviews]; NSUInteger count = self.subviews.count; NSInteger ma ...
- Ubuntu(Linux)使用Eclipse搭建C/C++编译环境
转自:http://www.cppblog.com/kangnixi/archive/2010/02/10/107636.html 首先是安装Eclipse,方法有两种: 第一种是通过Ub ...
- Redis事件管理(二)
Redis的定时器是自己实现的,不是很复杂.说说具体的实现吧. 定时器的存储维护采用的是普通的单向链表结构,具体节点定义为: /*时间定时器结构体*/ typedef struct aeTimeEve ...
- R语言入门小练习
要求:模拟产生统计专业同学的名单(学号区分),记录数学,线代,英语三科成绩 > num <- seq(1513032001, 15130320100) #模 ...
- SQL语句简介
1.Top.Distinct Top 获取前几条数据,top一般都与order by连用 获得年纪最小的5个学生 select top 5 * from A order by classesId 获 ...
- 将rabbitmq整合到Spring中手动Ack
如果要手动ack,需要将Listener container 的 acknowledge 设置为manul,在消费消息的类中需实现ChannelAwareMessageListener接口. over ...
- 51nod1006(lcs)
题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1006 题意:中文题诶- 思路:最长公共子序列模板题- 我们用d ...
- iOS - UIButton设置图片文字上图下文排列
经查阅资料及尝试,最终解决了在图片和文字垂直排列的情况下,如果文字长度变化会导致图片位置变动的问题,最开始采用了网上比较多的做法,做法如下: @interface UIButton (UIButton ...