实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
table{
border-collapse: collapse;
width: 800px;
text-align: center;
margin: 20px auto;
}
table caption{
font-size: 2rem;
font-weight: bolder;
color: #666;
margin-bottom: 20px;
}
table, th, td{
border: 1px solid #666;
}
table tr:first-child{
background-color: lightgreen;
}
table tr td img {
padding: 5px;
border-radius: 10px;
}
table tr td a {
/*去掉下划线*/
text-decoration: none;
width: 140px;
height: 40px;
padding: 5px;
border: 1px solid black;
background-color: white;
color: black;
border-radius: 8px;
}
table tr td a:hover{
background: black;
color: white;
}
table tr:hover{
background-color: #efefef;
color: coral;
}
#iphonex1:hover {
width:100px;
}
#mi8:hover {
width:100px;
}
#r17:hover {
width:100px;
}
#heisha:hover {
width:100px;
}
</style>
</head>
<body>
<h2 style="color: red"> 1.学习php为什么要学习html??</h2>
<p style="color: #0388F1" >答:前台开发是指静态页面的编写,主要用到三个工具:hml,css.JavaScript.</br>
学习php,是为了用来动态生成html代码的.方便网站的管理与开发.</p></br>
<h2 style="color: red"> 2.为什么选择PHP开发动态网站?</h2>
<p style="color: #0388F1" >答:因为快..上手快..开发快..更新快..迭代快..</p></br><hr style="color: aqua" >
<h1>编程题:制作一张表格.</h1>
<ul>
<li>iPhonex</li>
<li>小米8</li>
<li>OPPO R17</li>
<li>黑鲨</li>
</ul>
<table>
<caption>2018手机清单</caption>
<tr>
<th>编号</th>
<th>手机名称</th>
<th>价格</th>
<th>数量</th>
<th>缩略图</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>iPhonex</td>
<td>7288</td>
<td>20</td>
<td><img src="https://2a.zol-img.com.cn/product/186_280x210/536/cet1hjPNo0d6Q.jpg" width="80" title="iPhoneX手机" id="iphonex1"></td>
<td><a href="http://jd.com/">点击买买买</a></td>
</tr>
<tr>
<td>2</td>
<td>小米8</td>
<td>2688</td>
<td>50</td>
<td><img src="http://2c.zol-img.com.cn/product_small/13_120x90/258/ceOwibKXcmuw.jpg" width="80" title="小米8手机" id="mi8"></td>
<td><a href="http://jd.com/">点击买买买</a></td>
</tr>
<tr>
<td>3</td>
<td>OPPO R17</td>
<td>3488</td>
<td>15</td>
<td><img src="http://2f.zol-img.com.cn/product_small/13_120x90/769/ceFS0aVzY4v6.jpg" width="80" title="OPPOr17 手机" id="r17"></td>
<td><a href="http://jd.com/">点击买买买</a></td>
</tr>
<tr>
<td>4</td>
<td>黑鲨</td>
<td>2999</td>
<td>38</td>
<td><img src="http://2d.zol-img.com.cn/product_small/13_120x90/533/ceS7AzYfTSiY.jpg" width="80" title="黑鲨手机" id="heisha"></td>
<td><a href="http://jd.com/">点击买买买</a></td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例