使用CSS制作一张带有四个圆角的表格；
预习响应式布局原理；
预习媒体查询、flex等移动端布局知识；
补齐作业。
实例运行效果：
实例--CSS代码：
caption {
font-size: 1.3em;
font-weight: bold;
margin-bottom: 10px;
}
table {
border: 1px solid #111;
border-collapse: separate;
margin: 20px auto;
width: 800px;
text-align: center;
box-shadow: 2px 2px 2px #888;
position: relative;
border-spacing: 0;
border-radius: 10px;
}
table::before {
content: '';
width: 798px;
height: 299px;
position: absolute;
left: 0;
top: 40px;
background-image: url(school2.jpg);
opacity: 0.3;
background-size: 798px 299px;
}
th,
td {
border: 1px solid #111;
padding: 10px;
}
th {
background-color: lightseagreen;
font-size: 1.1em;
}
tbody tr~tr:nth-child(even) {
background-color: #eee;
}
tbody tr:first-of-type>td:first-of-type {
background-color: lightyellow;
}
tbody tr:nth-of-type(4)>td:first-of-type {
background-color: linen;
}
tfoot {
background-color: #555;
color: whitesmoke;
}
th:last-of-type {
border-top-right-radius: 10px;
}
th:first-of-type {
border-top-left-radius: 10px;
}
tfoot tr>td:first-of-type {
border-bottom-left-radius: 10px;
}
tfoot tr>td:last-of-type {
border-bottom-right-radius: 10px;
}
运行实例 »
点击 "运行实例" 按钮查看在线实例作业总结：
1、掌握了通过CSS来设置表格样式；
2、常规的表格设置内容有：表格标题、表格的线条、大小、边距、文本对齐方式、单元格背景颜色等；
3、练习了CSS组合选择器；
4、为图片添加背景图时用到::before伪元素和background-image属性，为使图片完全覆盖内容区，使用了background-size: 798px 299px;个人感觉比使用background-size: cover;的适应性要高一些；
5、设置圆角表格时：
设置border-collapse: separate;如果设置为collapse则实现不了；
设置table的border-spacing: 0; border-radius: 10px;
单独设置左上、右上、左下、右下四个单元格的圆角属性。
不知道是否还有别的更好的设置方法？