发表于: 2019-01-01 22:26:11
1 659
今天完成的事情:
1.学习了html的表格元素:
表格由table标签来定义,每个表格均有若干行(由tr标签定义),每行被分割为若干单元格(由td标签定义)。
字母td指标表格数据,及数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
2.html表格边框属性如果不定以,表格将不显示边框。
3.表格表头使用th标签进行定义。 大多数浏览器会把表头显示为粗体居中的文字。
4.bootstrap4 框架也支持表格的应用:
通过.table类来设置基础表格的样式,同个添加.table-striped类,将可以在tbody内的行上看到条纹。
.table-bordered类可以为表格添加边框,.teble-hover类可以为表格的每一行添加鼠标悬停效果。通过使用.table-dark类可以为表格添加黑色背景。
联合使用.table-dark和.table-striped类可以创建黑色的条纹表格。
联合使用.table0dark和.table-hover类可以设置黑色背景表格的鼠标悬停效果。
通过指定意义的颜色类可以为表格的行或者单元格设置颜色
类名 | 描述 |
---|---|
.table-primary | 蓝色: 指定这是一个重要的操作 |
.table-success | 绿色: 指定这是一个允许执行的操作 |
.table-danger | 红色: 指定这是可以危险的操作 |
.table-info | 浅蓝色: 表示内容已变更 |
.table-warning | 橘色: 表示需要注意的操作 |
.table-active | 灰色: 用于鼠标悬停效果 |
.table-secondary | 灰色: 表示内容不怎么重要 |
.table-light | 浅灰色,可以是表格行的背景 |
.table-dark | 深灰色,可以是表格行的背景 |
在bootstrap 4中,.thead-tark类用于给表格头添加黑色背景,.thead-light类用于给表格头添加灰色背景。
.table-responsive 类用于创建响应式表格:在屏幕小于992px时会创建水平滚动条,如果可视区域大于992px则不显示滚动条。
明天计划的事情:
1.使用表格元素制作最后一个页面的职业介绍部分。
遇到的困难:
1.在写第二个页面的文字部分时,每段首行的前两个文字缩进,自己用了空格来完成。
之后查了一遍html的资料,才想起来有一个文本首行缩进的功能。
收获:
1.学习了表格元素,并尝试着制作了一个表格。
评论