课程：PHP中文网上了第三期的培训（前端部分）
时间：2018年8月14号晚8点
讲师：Peter zhu！（《css权威指南》一书）
内容：HTML是由标签组成的，为了让HTML美观，加入CSS样式表，引入CSS的三种方式，内联样式》内部样式》外部样式
实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style type="text/css">
table,th ,td {border: 1px solid red}
table{
border-collapse: collapse;/*表格折叠*/
text-align: center;/*内容居中*/
margin: 20px auto;/*表格居中*/
width: 500px;
}
table caption{
font-size: 2rem;
font-style: italic;
font-weight: 800;/*字体粗细*/
margin-bottom: 30px;
}
table tr td img{
width: 80px;
}
table tr:first-child{
background: lightgreen;
}
table tr:hover{
color: lightblue;
background-color: #efefef;
}
table tr td img{
border-radius: 10px;/*图片四个直角设置成圆角*/
padding: 8px;
}
table tr td a{
text-decoration: none;
width: 180px;
height: 60px;
padding: 6px;
border: 1px solid black;
border-radius: 5px;/*图片边框设置圆角*/
background-color: lightgreen;
}
table tr td a:hover{
background-color: red;
}
</style>
</head>
<body>
<table>
<caption>购物清单</caption>
<tr>
<th>编号</th>
<th>名称</th>
<th>牌子</th>
<th>数量</th>
<th>照片</th>
<th>订购</th>
</tr>
<tr>
<td>1</td>
<td>牛奶</td>
<td>伊利</td>
<td>1箱</td>
<td><img src="images/milk.jpg" alt=""></td>
<td><a href="https://item.jd.com/1067048.html" >点击买</a></td>
</tr>
<tr>
<td>2</td>
<td>苹锅锅</td>
<td>红富士</td>
<td>1斤</td>
<td><img src="images/apple.jpg" alt=""></td>
<td><a href="https://item.jd.com/3756271.html" >点击买</a></td>
</tr>
<tr>
<td>3</td>
<td>电风扇</td>
<td>隔离</td>
<td>1台</td>
<td><img src="images/pao.jpg" alt=""></td>
<td><a href="https://item.jd.com/3899679.html" >点击买</a></td>
</tr>
<tr>
<td>总结</td>
<td colspan="5" rowspan="" headers="">跨行="colspan"</td>
</tr>
<tr >
<td rowspan="2">跨列=“rowspan”</td>
<td colspan="5">1</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
