文档章节

《Head first HTML与CSS 第二版》读书笔记 第十三章 表格和列表

一万
 一万
发布于 2016/08/07 10:36
字数 578
阅读 30
收藏 0

1、表格

HTML表格元素<table><tr><th><td>一起用来创建一个表格。

<table>元素定义并包围整个表格。

<tr>表示一行。

<td>表示一个单元格。

<th>用来表示行或列表头的单元格。

<caption>元素提供表格的额外信息(相当于表格的标题)。默认的,表头在表格的上方。table的CSS属性caption-side指定caption的位置,下面的代码将caption移动的表格下部:

table {
	caption-side:	bottom;
}

对于表格的每个单元格,有内边距和边框,但是没有外边距。相对的table有一个border-spacing的CSS属性定义整个表格每个单元格共同的外边距。

也可以定义垂直和水平方向上的外边距,例如:

border-spacing: 10px 30px;

将border-collapse的CSS属性设置为collapse,可以使单元格之间没有边框间距。浏览器会忽略表格上设置的所有边框间距。另外还会把两个边框合并成一个边框。

 

为表格设置间隔颜色的两种实现方法:

(1)定义一个类,为其设置背景颜色,在需要的表格行<tr>指定其归属这个类;

(2)使用伪类nth-child,表示一个元素相对于它兄弟元素的数字顺序:

tr:nth-child(2n+1){
	background-color: #fcba7a;
}

这段代码指定奇数tr的背景颜色。可以使用n指定简单的表达式。还可以使用odd或even表示奇数或偶数元素。

 

使用td的rowspan属性可以指定一个单元格占多少行,colspan指定一个单元格占多少列。相应的要删除其占据位置的行或列。

 

2、列表

li的list-style-type的CSS属性控制项目符号,默认的值是disc,可选的有circle、square、none。

对于有序列表可以控制项目序号:decimal十进制数,upper-alpha大写字母,lower-alpha小写字母,upper-roman大写罗马数字,lower-roman小写罗马数字。

list-style-image属性将项目符号变为图像。

list-style-position属性控制文本回绕。值为inside表示文本会在标记下回绕,outside表示文本本身回绕。

 

© 著作权归作者所有

共有 人打赏支持
一万
粉丝 28
博文 102
码字总数 173386
作品 0
朝阳
程序员
【原创】《深入剖析Tomcat》读书笔记

第一章 一个简单的Web服务器 第二章 一个简单的servlet容器 第三章 连接器 第四章 Tomcat的默认连接器 第五章 servlet容器 第六章 生命周期 第七章 日志记录器 第八章 载入器 第九章 Sessio...

pandudu
2015/12/22
46
0
《Head first HTML与CSS 第二版》读书笔记 第七章 CSS入门

CSS由规则组成,每个规则为选择的HTML元素提供样式。 典型的规则包括一个选择器以及一个或多个属性和值。 选择器指定 规则将应用到哪些元素。 每个属性声明以一个分号结束。 规则中所有属性和...

一万
2016/07/31
36
0
HTML笔记

html语言即超文本标记语言。 超文本标sss记语言,标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”...

柒晓白
2017/09/15
0
0
13篇文章,教你学会ES6知识点

ES6 深入理解ES6》学习笔记 本文用于汇总链接到各个子章节的内容,github 欢迎大家题issues和PR,如果对你有帮助,也可以给 star 支持 :) 目录 第一章 块级绑定 第二章 字符串和正则表达式 ...

你听___
05/08
0
0
《VC++技术内幕》读后感

看的是第四版的电子书,毕竟又厚又贵,买书不划算,而且这版翻译的也很好,记录下我的一点读书心得。 第一章:对windows的消息处理模式,GDI,DLL等有个基本了解,价值不大,算入门级别吧。 ...

嗯哼9925
2017/12/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

python3.6 取整除法

python3.6 中取整除法运算逻辑如下: d 非零,那么商 q 满足这样的关系: a = qd + r ,且0 ≤ r n1=7//3#7 = 3*2 +1n2=-6.1//3#-7 = 3*(-3)+2'{},{}'.format(n1,n2) 从运行结果可以...

colinux
22分钟前
3
0
阶段总结——用虚拟机搭建一个高可用负载均衡集群架构

[toc] linux基本知识已经介绍完,现有一个业务需要操作,通过对这个项目的操作,可以复习、总结、巩固之前的知识点; ** 用13台虚拟机搭建一个高可用负载均衡集群架构出来,并运行三个站点,...

feng-01
26分钟前
0
0
mysql 设置utf8字符集 (CentOS)

1.查看数据库及mysql应用目前使用的编码方式 (1)链接mysql 客户端 (2)执行:status 结果: 2.修改mysql 应用的字符编码(server characterset ) (1)打开配置文件:vim /etc/mysql/my...

qimh
26分钟前
0
0
windows无法格式化u盘解决方法

1。点开始-运行-输入cmd-format f: /fs: fat32 (这里f:是指U盘所在盘符) 这个格式化会很慢 请耐心等待

大灰狼wow
37分钟前
0
0
MySql 8.0连接失败

原来,MySql 8.0.11 换了新的身份验证插件(caching_sha2_password), 原来的身份验证插件为(mysql_native_password)。而客户端工具Navicat Premium12 中找不到新的身份验证插件(caching_s...

放飞E梦想O
54分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部