大家好,又见面了,我是全栈君。
第十八掌 CSS表格与列表
一、表格样式
属性 值 说明 CSS版本
border-collapse 边框样式 相邻单元格的边框样式 2
border-spacing 长度值 相邻单元格边框间距 2
caption-side 位置名称 表格标题位置 2
empty-cells 显示值 空单元格是否显示边框 2
table-layout 布局样式 指定表格的布局样式 2
1、border-collapse :
值 说明 CSS版本
(1)separate : 默认值,单元格边框独立 2 //单元格边框是空心的
(2)collapse : 单元格相邻边框被合并 2 //单元格边框是实心的,一条黑线。
2、border-spacing :
(1)长度值 : 表示间距,其他使用CSS长度值 2 //单元格边框线空心的间距
3、caption-side :
(1)top : 默认值,标题在上方 2
(2)bottom : 标题在下方 2
4、empty-cells :
(1)show :默认值,显示边框 2
(2)hide :不显示边框 2 //如果单元格内没有内容,则不显示边框。
5、table-layout :
(1)auto : 默认值,内容过长时,拉伸整个单元格 2
(2)fixed : 内容过长时,不拉伸整个单元格 2
二、列表样式
列表有四种独有样式
1、list-style-type:
(1)、none : 没有标记 1
(2)、disc : 实心圆 1
(3)、circle : 空心圆 1
(4)、square : 实心方块 1
(5)、decimal : 阿拉伯数字 1
(6)、lower-roman : 小写罗马数字 1
(7)、upper-roman : 大写罗马数字 1
(8)、lower-alpha : 小写英文字母 1
(9)、upper-roman : 大写英文字母 1
例、·张三
·李四 //变化的是前方到实心圆
·王五
·马六
2、lise-type-position
(1)outside 默认值,标记位于内容框外部 1
(2)inside 标记位于内容框内部 1
例、(1):·张三,是一个 (2):·张三,是一个
好青年 好青年
·李四 ·李四
·王五 ·王五
3、list-type-image
(1)none 不使用图像 1
(2)url 通过url使用图像 1
4、list-style (简写形式)
ul{
list-style: lower-alpha inside url(bullet.png);
}
三、其他功能
在<table>中<td>单元格,我们可以使用text-align属性水平对齐,但是垂直对齐就无法操作了。CSS为我们提供了vertical-align属性用于垂直对齐。
值 说明 CSS版本
baseline 内容对象与基线对齐 1
top 内容对象与顶端对齐 1
middle 内容对象与中部对齐 1
bottom 内容对象与底部对齐 1
//内容在表格中实现移动 例如内容紧贴上边框。
sub 垂直对齐文本下标 1
super 垂直对齐文本上标 1
//脚标
长度值 设置上下值的偏移量 1
百分比 同上 1
转载于:https://www.cnblogs.com/keshuai752100461/p/8485189.html
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107693.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...