这一节课学习了盒子模型和它的css属性。
上右下左：top,right,bottom,left
内边距：padding
外边距：margin
边框：border
圆角：border-radius:
阴影：box-shadow: 水平，垂直，扩展，颜色
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.22作业</title>
<style type="text/css">
/*给整个表格以及内部单元格加上边框*/
table,th,td {
border:2px solid red;
}
/*将所有的边框线进行折叠*/
table{
border-collapse:collapse;
text-align:center; /*居中*/
margin:20px auto;
width:60%;
background-image:url(images/bg.jpg);
background-repeat:no-repeat;
background-size:cover;
box-shadow:3px 3px 3px #888;
}
table caption{
font-size:20px;
font-weight:bolder;
margin-bottom:20px;
}
th,td{
padding:10px;
}
th{
background-color:lightgreen;
}
/*设置图片*/
th img {
width:30px;
border-radius:50%;
box-shadow:-2px -2px 2px #888;
}
.zhongwu{
color:blue;
font-weight:bolder;
background-color:rgba(35,155,0,0.3);
}
</style>
</head>
<body>
<table>
<caption>课程表</caption>
<tr>
<th>时间</th>
<th><img src="images/1.jpg">星期一</th>
<th><img src="images/2.jpg" alt="">星期二</th>
<th><img src="images/3.jpg" alt="">星期三</th>
<th><img src="images/4.jpg" alt="">星期四</th>
<th><img src="images/5.jpg" alt="">星期五</th>
</tr>
<tr>
<th rowspan="2">上午</th>
<td>语文</td>
<td>英语</td>
<td>数学</td>
<td>英语</td>
<td>语文</td>
</tr>
<tr>
<td>语文</td>
<td>英语</td>
<td>数学</td>
<td>英语</td>
<td>语文</td>
</tr>
<tr>
<td colspan="6" class="zhongwu">中午休息</td>
</tr>
<tr>
<th rowspan="2">下午</th>
<td>语文</td>
<td>英语</td>
<td>数学</td>
<td>英语</td>
<td>语文</td>
</tr>
<tr>
<td>语文</td>
<td>英语</td>
<td>数学</td>
<td>英语</td>
<td>语文</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
