表格式化

表布局

  • 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: 如果一个列或列组的visibilitycollapse,则该列或列组中所有单元格都不显示

表层

表标题

  • 表标题:caption-side,top,bottom
  • 表单元格边框: border-collapse,separate,collapse;应用于dispalytable,inline-table的元素
  • 边框间隔:border-spacing: <length><length>,应用于dispalytable,inline-tableborder-collapse设置为separate的元素
  • 处理空单元格:empty-cell:show,hide,应用于dispalytable-cell 的元素,相当于对特定元素应用visibility:hidden;也可以对特定单元格应用display:none

表大小

宽度

  • 默认单元格宽度按内容宽度比例分配
  • table-layout设置fixed(应用于dispalytable,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()
  • 应用于displaylist-item的元素(li)

简写

  • list-style,|list-style-type|list-style-image|list-style-position|

生成内容

插入生成内容

  • :before,:after
  • 插入图片:content: url()
  • 可以将其设置为块级元素
  • 生成引号:content: open-quote

css整理-06 表和列表的更多相关文章

  1. 【纯手工】整理豆瓣热点推荐列表-财经&自我管理

    [纯手工]整理豆瓣热点推荐列表-财经&自我管理  简七君 2013-10-27 09:40:06     豆瓣君的首页热点推荐实在难以捉摸,只有正好跳出推荐贴时才能按图索骥找列表.简七和小伙伴 ...

  2. activiti自定义流程之自定义表单(三):表单列表及预览和删除

    注:(1)环境配置:activiti自定义流程之自定义表单(一):环境配置 (2)创建表单:activiti自定义流程之自定义表单(二):创建表单 自定义表单创建成功,要拿到activiti中使用,自 ...

  3. 如何写好CSS系列之表单(form)

    表单模块可以分为两部分:一是表单的布局,也就是规范表单元素单元的排列位置:二是表单元素,如:输入框.单选.复选.列表组件.搜索组件等,由于列表组件.搜索组件不是单纯的css组件,所以暂且没有实现. 一 ...

  4. 非常好用的CSS样式重置表

    非常好用的CSS样式重置表           我们在项目前期准备时都会准备好一个reset.css,因为不同浏览器对标签的解析各不相同,重置css样式可以让标签在不同浏览器下产生相同的效果.所以一个 ...

  5. 11种常用css样式之鼠标、列表和尺寸样式学习

    鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/curs ...

  6. css如何玩转有序无序列表项list样式

    在无序列表ul>li中,无线列表的标志是出现在各列表前面的圆点.在有序列表ol>li中,前面默认带有数字,如何修改列表前面的项目符号,只需要通过list-style调整就好,常见的符号有( ...

  7. 06: 字典、顺序表、列表、hash树 实现原理

    算法其他篇 目录: 1.1 python中字典对象实现原理 1.2 顺序表 1.3 python 列表(list) 1.1 python中字典对象实现原理返回顶部   注:字典类型是Python中最常 ...

  8. css整理之-----------选择器

    背景 在20年初时总感觉自己的css 不够用,想把css 相关的东西整理下,去年一整年都比较忙,忙着就到2021了,今天趁着有点时间,先从选择器开始吧. 听说图片可以提升颜值.... 选择器 CSS选 ...

  9. CSS的样式表基本概念

    一.样式表分类 1.内联样式表 <p style="fint-size:24px;">直接在标签内部进行样式设置</style> 2.内嵌样式表 <h ...

随机推荐

  1. 手风琴特效 transition

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 【数据结构】红黑树 C语言代码

    连看带写花了三天,中途被指针引用搞得晕晕乎乎的. 插入和删除的调整过程没有看原理,只看了方法,直接照着写的. 看了两份资料,一份是算法导论第12-13章, 另一份是网上的资料http://blog.c ...

  3. supersr--九宫格公式(根据多少行多少列排版)

    - (void)layoutSubviews{ [super layoutSubviews]; NSUInteger count = self.subviews.count; NSInteger ma ...

  4. Ubuntu(Linux)使用Eclipse搭建C/C++编译环境

    转自:http://www.cppblog.com/kangnixi/archive/2010/02/10/107636.html 首先是安装Eclipse,方法有两种:       第一种是通过Ub ...

  5. Redis事件管理(二)

    Redis的定时器是自己实现的,不是很复杂.说说具体的实现吧. 定时器的存储维护采用的是普通的单向链表结构,具体节点定义为: /*时间定时器结构体*/ typedef struct aeTimeEve ...

  6. R语言入门小练习

    要求:模拟产生统计专业同学的名单(学号区分),记录数学,线代,英语三科成绩 > num <- seq(1513032001, 15130320100)                 #模 ...

  7. SQL语句简介

    1.Top.Distinct Top 获取前几条数据,top一般都与order by连用 获得年纪最小的5个学生  select top 5 * from A order by classesId 获 ...

  8. 将rabbitmq整合到Spring中手动Ack

    如果要手动ack,需要将Listener container 的 acknowledge 设置为manul,在消费消息的类中需实现ChannelAwareMessageListener接口. over ...

  9. 51nod1006(lcs)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1006 题意:中文题诶- 思路:最长公共子序列模板题- 我们用d ...

  10. iOS - UIButton设置图片文字上图下文排列

    经查阅资料及尝试,最终解决了在图片和文字垂直排列的情况下,如果文字长度变化会导致图片位置变动的问题,最开始采用了网上比较多的做法,做法如下: @interface UIButton (UIButton ...