HTML5+CSS3的学习(中)
2018版李立超html+css基础 103集教程，哔哩哔哩链接：https://www.bilibili.com/video/BV1sW411T78k?spm_id_from=333.999.0.0
2019版李立超前端html5+css3 148集教程，哔哩哔哩链接：https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from=333.999.0.0
六、设置元素的背景
1.background-color
• background-color属性用来为元素设置背景颜色。
• 需要指定一个颜色值，当指定了一个颜色以后，整个元素的可见区域都会使用这个颜色作为背景色。
• 如果不设置背景颜色，元素默认背景颜色为透明，实际上会显示父元素的背景颜色。
2.background-image
• background-image可以为元素指定背景图片。
• 和background-color类似，这不过这里使用的是一个图片作为背景。
• 需要一个url地址作为参数，url地址需要指向一个外部图片的路径。
• 例如：
background-image: url(1.jpg)
3.background-repeat
• background-repeat用于控制背景图片的重复方式。
• 如果只设置背景图片默认背景图片将会使用平铺的方式，可以通过该属性进行修改。
• 可选值：
-
repeat：默认值，图片左右上下平铺 -
no-repeat：只显示图片一次，不会平铺 -
repeat-x：沿x轴水平平铺一张图片 -
repeat-y：沿y轴水平平铺一张图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 1024px;
height: 724px;
margin: 0 auto;
/*设置背景样式*/
background-color: #bfa;
/*
* 使用background-image来设置背景图片
* - 语法：background-image:url(相对路径);路径最好用''括起来
*
* - 如果背景图片大于元素，默认会显示图片的左上角
* - 如果背景图片和元素一样大，则会将背景图片全部显示
* - 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
*
* 可以同时为一个元素指定背景颜色和背景图片，
* 这样背景颜色将会作为背景图片的底色
* 一般情况下设置背景图片时都会同时指定一个背景颜色
*/
background-image:url(img/1.png);
/*
* background-repeat用于设置背景图片的重复方式
* 可选值：
* repeat，默认值，背景图片会双方向（x轴和y轴）重复（平铺）
* no-repeat ，背景图片不会重复，有多大就显示多大
* repeat-x， 背景图片沿水平方向重复
* repeat-y，背景图片沿垂直方向重复
*/
background-repeat: repeat-y;
}
</style>
<!--<link rel="stylesheet" type="text/css" href="css/style.css"/>-->
</head>
<body>
<div class="box1"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
height: 500px;
margin: 0 auto;
/*
* 设置一个背景颜色
*/
background-color: #bfa;
/*
* 设置一个背景图片
*/
background-image: url(img/4.png);
/*
* 设置一个图片不重复
*/
background-repeat: no-repeat;
/*
* 背景图片默认是贴着元素的左上角显示
* 通过background-position可以调整背景图片在元素中的位置
* 可选值：
* 该属性可以使用 top right left bottom center中的两个值
* 来指定一个背景图片的位置
* top left 左上
* bottom right 右下
* 如果只给出一个值，则第二个值默认是center
*
* 也可以直接指定两个偏移量，
* 第一个值是水平偏移量
* - 如果指定的是一个正值，则图片会向右移动指定的像素
* - 如果指定的是一个负值，则图片会向左移动指定的像素
* 第二个是垂直偏移量
* - 如果指定的是一个正值，则图片会向下移动指定的像素
* - 如果指定的是一个负值，则图片会向上移动指定的像素
*
*/
/*
background-position:top left;
background-position: -80px -40px;*/
background-attachment: fixed;
}
body{
background-image: url(img/3.png);
background-repeat: no-repeat;
/*
* background-attachment用来设置背景图片是否随页面一起滚动
* 可选值：
* scroll，默认值，背景图片随着窗口滚动
* fixed，背景图片会固定在某一位置，不随页面滚动
*
* 不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
*/
background-attachment:fixed ;
}
</style>
</head>
<body style="height: 5000px;">
<div class="box1"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
background-image: url(img/2.jpg);
background-repeat: no-repeat;
background-position: center;
/*
* 当背景图片的background-attachment设置为fixed时，
* 背景图片的定位永远相对于浏览器的窗口
*/
background-attachment: fixed;
}
</style>
</head>
<body style="height: 5000px;">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height: 5000px;
/*设置一个背景颜色*/
/*background-color: #bfa;*/
/*设置一个背景图片*/
/*background-image: url(img/3.png);*/
/*设置背景不重复*/
/*background-repeat: no-repeat;*/
/*设置背景图片的位置*/
/*background-position: center center;*/
/*设置背景图片不随滚动条滚动*/
/*background-attachment: fixed;*/
background-color: #bfa;
/*
* background
* - 通过该属性可以同时设置所有背景相关的样式
* - 没有顺序的要求，谁在前睡在后都行
* 也没有数量的要求，不写的样式就使用默认值
*/
background: #bfa url(img/3.png) center center no-repeat fixed;
}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style type="text/css">
.box1{
width: 990px;
height: 32px;
background-color: #bfa;
margin: 50px auto;
/*
* 设置为背景图片
*/
background-image: url(img/bg.gif);
/*
* 设置水平方向重复
*/
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，
* 这个闪烁会造成一次不佳的用户体验。
* 产生问题的原因：
* 背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求，
* 但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源
* 我们这个练习，一上来浏览器只会加载link.png由于hover和active的状态没有马上触发，
* 所以hover.png和active.png并不是立即加载的
* 当hover被触发时，浏览器才去加载hover.png
* 当active被触发时，浏览器才去加载active.png
* 由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况
*
* 为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了，
* 然后在通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
* 优点：
* 1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，
* 提高访问效率，提高了用户体验。
* 2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
*
*
*/
.btn:link{
/*将a转换为块元素*/
display: block;
/*设置宽高*/
width: 93px;
height: 29px;
/*设置背景图片*/
background-image: url(img/btn/btn2.png);
/*设置背景图片不重复*/
background-repeat: no-repeat;
}
.btn:hover{
/*
* 当是hover状态时，希望图片可以向左移动
*/
background-position: -93px 0px;
}
.btn:active{
/*
* 当是active状态时，希望图片再向左移动
*/
background-position: -186px 0px;
}
</style>
</head>
<body>
<!-- 创建一个超链接 -->
<a class="btn" href="#"></a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 129px;
height: 45px;
background-image:url(img/amazon-sprite_.png) ;
}
.box2{
width: 42px;
height: 30px;
background-image:url(img/amazon-sprite_.png) ;
/*
* 设置偏移量
*/
background-position: -58px -338px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
4.background-position
• background-position用来精确控制背景图片在元素中的位置。
• 可以通过三种方式来确定图片在水平方向和垂直方向的起点。
-
关键字：
top right bottom left center -
百分比
-
数值
5.background-attachment
• background-attachment用来设置背景图片是否随页面滚动。
• 可选值：
– scroll：随页面滚动
– fixed：不随页面滚动
6.background
• background是背景的简写属性，通过这个属性可以一次性设置多个样式，而且样式的顺序没有要求。
• 例如：
background: green url(1.jpg) no-repeat center center fixed;
7.CSS Sprite
• CSS Sprites是一种网页图片应用处理方式。
• 通过这种方式我们可以将网页中的零星图片集中放到一张大图上。
• 这样一来，一次请求便可以同时加载多张图片，大大提高了图片的加载效率。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1{
width: 500px;
height: 500px;
/*
background-color 设置背景颜色
*/
background-color: #bfa;
/*
background-image 设置背景图片
- 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
- 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
- 如果背景的图片大于元素，将会一个部分背景无法完全显示
- 如果背景图片和元素一样大，则会直接正常显示
*/
background-image: url("./img/1.png");
/*
background-repeat 用来设置背景的重复方式
可选值：
repeat 默认值 ， 背景会沿着x轴 y轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 背景图片不重复
*/
background-repeat: no-repeat;
/*
background-position 用来设置背景图片的位置
设置方式：
通过 top left right bottom center 几个表示方位的词来设置背景图片的位置
使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center
通过偏移量来指定背景图片的位置：
水平方向的偏移量 垂直方向变量
*/
/* background-position: center; */
background-position: -50px 300px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1{
width: 500px;
height: 500px;
overflow: auto;
background-color: #bfa;
background-image: url("./img/2.jpg");
background-repeat: no-repeat;
background-position: 0 0;
padding: 10px;
/*
设置背景的范围
background-clip
可选值：
border-box 默认值，背景会出现在边框的下边
padding-box 背景不会出现在边框，只出现在内容区和内边距
content-box 背景只会出现在内容区
background-origin 背景图片的偏移量计算的原点
padding-box 默认值，background-position从内边距处开始计算
content-box 背景图片的偏移量从内容区处计算
border-box 背景图片的变量从边框处开始计算
*/
/* background-origin: border-box;
background-clip: content-box; */
/*
background-size 设置背景图片的大小
第一个值表示宽度
第二个值表示高度
- 如果只写一个，则第二个值默认是 auto
cover 图片的比例不变，将元素铺满
contain 图片比例不变，将图片在元素中完整显示
*/
background-size: contain;
/*
background-color
background-image
background-repeat
background-position
background-size
background-origin
background-clip
background-attachment
- backgound 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置
并且该样式没有顺序要求，也没有哪个属性是必须写的
注意：
background-size必须写在background-position的后边，并且使用/隔开
background-position/background-size
background-origin background-clip 两个样式 ，orgin要在clip的前边
*/
}
.box2{
width: 300px;
height: 1000px;
background-image: url('./img/1.png');
background-repeat: no-repeat;
background-position: 100px 100px;
/*
background-attachment
- 背景图片是否跟随元素移动
- 可选值：
scroll 默认值 背景图片会跟随元素移动
fixed 背景会固定在页面中，不会随元素移动
*/
background-attachment: fixed;
}
.box3{
border: 10px red double;
padding: 50px;
width: 500px;
height: 500px;
background: url('./img/2.jpg') #bfa center center/contain border-box content-box no-repeat ;
}
</style>
</head>
<body>
<div class="box3">
</div>
<!-- <div class="box1">
<div class="box2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam aut, odio iusto accusantium ipsum aliquid omnis facere sapiente, nobis vel dicta alias ducimus. Repellat similique unde eius tempore, quia quo.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium, accusamus quibusdam. Adipisci in dolorem qui accusantium accusamus voluptatibus magnam nesciunt minus enim quaerat! Quidem, rem. Ipsum amet praesentium enim aliquid!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam provident repellendus ipsum dolorum optio quo, iure eveniet beatae cupiditate rerum minus corporis illum aliquam illo ut quidem aliquid expedita deserunt.
</div>
</div> -->
</body>
</html>
8.线性渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
/* background-color: #bfa; */
/*
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
！！渐变是图片，需要通过background-image来设置
线性渐变，颜色沿着一条直线发生变化
linear-gradient()
linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域
- 线性渐变的开头，我们可以指定一个渐变的方向linear-gradient(to right, red,yellow)
to left
to right
to bottom
to top
deg deg表示度数
turn 表示圈
- 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，
也可以手动指定渐变的分布情况
repeating-linear-gradient() 可以平铺的线性渐变
*/
/* background-image: linear-gradient(red,yellow,#bfa,orange); */
/* background-image: linear-gradient(red 50px(红色占50px后开始渐变),
yellow 100px, green 120px, orange 200px); */
background-image: repeating-linear-gradient(to right ,red, yellow 50px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
9.径向渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1{
width: 300px;
height: 300px;
/*
radial-gradient() 径向渐变(放射性的效果) */
/* background-image: radial-gradient(100px 100px, red , #bfa)
圆心对应长宽各100px的渐变一直延伸到外面
默认情况下径向渐变的形状根据元素的形状来计算的
正方形 --> 圆形（对应）
长方形 --> 椭圆形（对应）
- 我们也可以手动指定径向渐变的大小
circle
ellipse
- 也可以指定渐变的位置
- 语法：
radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置)
大小：
circle 圆形
ellipse 椭圆
closest-side 近边
closest-corner 近角
farthest-side 远边
farthest-corner 远角
位置：
top right left center bottom
*/
background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa)
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
七、表格的基本设置
1.表格
• 在Web的历史中，HTML的表格发挥了极大的作用。最初创建表格就是为了以表格的形式显示数据，后来表格变成了一个极受欢迎的布局工具。
• 但是有了CSS以后，CSS在布局网页方面实际上会更出色，所以现在我们使用表格的作用只有一个，就是用来表示格式化的数据。
• HTML中的表格可以很复杂，但是通常情况下我们不需要创建过于复杂的表格。
table、tr、th、td
• 使用table标签创建一个表格。
• tr表示表格中的一行，tr中可以编写一个或多个th或td。
•th表示表头。
•td表示表格中的一个单元格。
caption、thead、tbody、tfoot
• caption表示表格的标题。
• thead表示表格的头部。
• tbody表示表格的主体。
• tfoot表示表格的底部。
2.合并单元格
• 合并单元格指将两个或两个以上的单元格合并为一个单元格。
• 合并单元格可以通过在th或td中设置属性来完成。
• 横向合并
– colspan
• 纵向合并
– rowspan
3.表格的样式
• 之前学习的很多属性都可以用来设置表格的样式，比如color可以用来设置文本的颜色，padding可以设置内容和表格边框的距离
• text-align：设置文本的水平对齐。
• vertical-align：设置文本的垂直对齐。
– 可选值：top、baseline、middle、bottom
• border-spacing：边框间距
• border-collapse：合并边框
– collapse：合并边框
– separate：不合并边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--
表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，
表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单
在网页中也可以来创建出不同的表格。
-->
<!--
在HTML中，使用table标签来创建一个表格
-->
<table border="1" width="40%" align="center">
<!--
在table标签中使用tr来表示表格中的一行，有几行就有几个tr
-->
<tr>
<!-- 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td -->
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<!--
rowspan用来设置纵向的合并单元格
-->
<td rowspan="2">B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<!--
colspan横向的合并单元格
-->
<td colspan="2">D3</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
</head>
<body>
<!--
在现实生活中，我们经常需要使用表格来表示一些格式化数据：
课程表、人名单、成绩单....
同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格
-->
<table border="1" width='50%' align="center">
<!-- 在table中使用tr表示表格中的一行，有几个tr就有几行 -->
<tr>
<!-- 在tr中使用td表示一个单元格，有几个td就有几个单元格 -->
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<!-- rowspan 纵向的合并单元格 -->
<td rowspan="2">D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<!--
colspan 横向的合并单元格
-->
<td colspan="2">C4</td>
</tr>
<!--
cellspacing:0px; 设置框与框之间的距离
border-collapse:collapse; 将边框合并并把其中的距离变为0
-->
</table>
</body>
</html>
4.长表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>长表格</title>
</head>
<body>
<table border="1" width='50%' align="center">
<!--
可以将一个表格分成三个部分：
头部 thead（不管放在表格的什么位置都会显示在上方）
主体 tbody（不管放在表格的什么位置都会显示在中间）
底部 tfoot（不管放在表格的什么位置都会显示在下方）
th 表示头部的单元格（也可以用td）
-->
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>300</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 设置表格的宽度
*/
table{
width: 300px;
/*居中*/
margin: 0 auto;
/*边框*/
/*border:1px solid black;*/
/*
* table和td边框之间默认有一个距离
* 通过border-spacing属性可以设置这个距离
*/
/*border-spacing:0px ;*/
/*
* border-collapse可以用来设置表格的边框合并
* 如果设置了边框合并，则border-spacing自动失效
*/
border-collapse: collapse;
/*设置背景样式*/
/*background-color: #bfa;*/
}
/*
* 设置边框
*/
td , th{
border: 1px solid black;
}
/*
* 设置隔行变色
*/
tr:nth-child(even){
background-color: #bfa;
}
/*
* 鼠标移入到tr以后，改变颜色
*/
tr:hover{
background-color: #ff0;
}
</style>
</head>
<body>
<!--
table是一个块元素
-->
<table>
<tr>
<!--
可以使用th标签来表示表头中的内容，
它的用法和td一样，不同的是它会有一些默认效果
-->
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>住址</th>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>长表格</title>
</head>
<body>
<table>
<!--
有一些情况下表格是非常的长的，
这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：
thead 表头
tbody 表格主体
tfoot 表格底部
这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，
都需要直接写到table中，tr需要写在这些标签当中
thead中的内容，永远会显示在表格的头部
tfoot中的内容，永远都会显示表格的底部
tbody中的内容，永远都会显示表格的中间
如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr
-->
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>100</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
</tbody>
</table>
</body>
</html>
5.表格的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格的样式</title>
<style>
table{
width: 50%;
border: 1px solid black;
margin: 0 auto;
/* border-spacing: 指定边框之间的距离 */
/* border-spacing: 0px; */
/* border-collapse: collapse; 设置边框的合并（多个边框的合并，即一个边框的大小） */
border-collapse: collapse;
}
td{
border: 1px solid black;
height: 100px;
/* 默认情况下元素在td中是垂直居中的 可以通过 vertical-align 来修改*/
vertical-align:middle;
text-align: center;
}
/*
如果表格中没有使用tbody而是直接使用tr，
那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中
注意 tr不是table的子元素
*/
tbody > tr:nth-child(odd){
background-color: #bfa;
}
.box1{
width: 300px;
height: 300px;
background-color: orange;
/* 将元素设置为单元格 td */
display: table-cell;
/*设置了 display: table-cell;后就可以用这个让子元素.box2在父元素.box1中垂直居中*/
vertical-align: middle;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>28</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>38</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>16</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>28</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>38</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>16</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>28</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>38</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>16</td>
<td>女儿国</td>
</tr>
</table>
</body>
</html>
6.表格的布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格的布局</title>
</head>
<body>
<!--
以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
表格的列数由td最多的那行决定
表格是可以嵌套，可以在td中在放置一个表格
-->
<table border="1" width="100%">
<tr height="100px">
<td colspan="2"></td>
</tr>
<tr height="400px">
<td width="20%"></td>
<td width="80%">
<table border="1" width="100%" height="100%">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
<tr height="100px">
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
7.完善clearfix
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 300px;
height: 300px;
background-color: #bfa;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
* 子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素
* 使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠
*/
margin-top: 100px;
}
.box3{
border: 10px red solid;
}
.box4{
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
}
/**
* 解决父子元素的外边距重叠
*/
/*.box1:before{
content: "";*/
/*
* display:table可以将一个元素设置为表格显示
*/
/* display: table;
}
*/
/**
* 解决父元素高度塌陷
*/
/*.clearfix:after{
content: "";
display: block;
clear: both;
}*/
/*
* 经过修改后的clearfix是一个多功能的
* 既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
*/
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
</style>
</head>
<body>
<div class="box3 clearfix">
<div class="box4"></div>
</div>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
源码获取
至此，我们的HTML5+CSS3的学习(四)就讲解完成了。下篇我们将介绍表单、动画、less、flex等内容，源码素材可以通过关注我的微信公众号 我爱学习呀嘻嘻 ，回复关键字HTML5+CSS3源码素材进行获取哦。
HTML5+CSS3的学习(五)：表单、动画、less、flex
HTML5+CSS3的学习(一)：HTML、CSS、CSS选择器
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
