作业演示：http://111.231.88.20/front/html/0322/1.html
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3月22号作业</title>
<style type="text/css">
table,th,td{
border: 1px solid #000;
}
table{
border-collapse: collapse;/*折叠表格线*/
width: 780px;
margin: 50px auto;
text-align:center;
box-shadow: 5px 5px 8px #111;
background-image: url(images/beijing.jpg);
background-size: cover;
background-repeat: no-repeat;
}
caption{
font-size: 1.5em;/*字体大小为默认的1.5倍*/
font-weight: bolder;/*文字加粗*/
margin-bottom: 50px;
color: blue;
}
th{
font-size: 1.2em;
background: rgba(255,255,0,0.3);
}
#th3{
color: red;
}
th,td{
padding: 10px;
}
td img{
border-radius: 50%;
box-shadow: 0 0 10px #333;
}
.rofs{
color: saddlebrown;
font-size: 1.3em;
font-weight: bolder;
}
</style>
</head>
<body>
<table>
<caption>早教中心老师展示</caption>
<tr>
<th id="th1">姓名</th>
<th id="th2">照片</th>
<th id="th3">最高学历</th>
<th id="th4">教学经验</th>
<th id="th5">入职时间</th>
</tr>
<tr>
<td>开开</td>
<td><img src="images/01.png" width="80"></td>
<td class="rofs">剑桥博士后</td>
<td>五年</td>
<td>2016-6-6</td>
</tr>
<tr>
<td>丽丽</td>
<td><img src="images/02.png" width="80"></td>
<td class="rofs">北大硕士</td>
<td>六年</td>
<td>2017-7-7</td>
</tr>
<tr>
<td>九九</td>
<td><img src="images/03.png" width="80"></td>
<td class="rofs">浙大博士</td>
<td>五年</td>
<td>2016-8-8</td>
</tr>
<tr>
<td>六六</td>
<td><img src="images/04.png" width="80"></td>
<td class="rofs">大学本科</td>
<td>八年</td>
<td>2015-5-5</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码
