收藏
批改状态：合格
老师批语：
前言
经过这么多天以来，领悟了何为多练多写，我所理解的多练都写不是把代码一遍一遍的敲，而是熟悉代码内的标签运用，熟悉用什么标签实现什么功能。
作业内容：
运用<table>,<th>,<td>标签实现表格制作，再用css属性进行修饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<hr>
<style type="text/css">
table {
border-collapse: collapse; /*折叠表格线* 不加这个会出现双线格*/
width: 900px;
text-align: center;
margin: 20px auto;
}
table caption {
font-size: 2rem;
font-weight: bolder;
color: #666;
margin-bottom: 10px;
}
table, th, td {
border: 1px solid #666;
}
table td img{
width: 70px;
height: 50px;
border-radius:10px ;
margin: 2px;
}
table p{
display: block;
width: 400px
}
tr:first-child{
background-color: pink;
}
tr:hover{
background-color: #efefef;
color: coral;
}
table td a{
text-decoration: none;
/*width:140px;
height:40px;*/
padding:5px;
border:1px solid black;
background: white;
color:black;
border-radius: 8px;
}
td a:hover
{
font-size: 18px;
background: black;
color:white;
}
</style>
<p>用HTML标签制作表格</p>
<table >
<caption>购物清单</caption>
<tr>
<th>专辑名</th>
<th>作者</th>
<th>歌曲</th>
<th>简介</th>
<th>约略图</th>
<th>试听</th>
</tr>
<tr>
<td>自传</td>
<td>五月天</td>
<td><ul>
<li>如果我们不曾相遇</li>
<li>成名在望</li>
<li>兄弟</li>
</ul></td>
<td><p >五月天将专辑《自传》看作一部与青春有关的作品，将他们出道以来的人生感悟和心路历程写进了专辑中。同时，五月天也希望将专辑作为生活在21世纪的这一时代的人的自传，</p></td>
<td><img src="C:\Users\Administrator\Desktop\新建文件夹\a1.jpg"></td>
<td><a href="www.jd.com">点击试听</a></td>
</tr>
<tr>
<td>第二人生</td>
<td>五月天</td>
<td><ul>
<li>2012</li>
<li>仓颉</li>
<li>干杯</li>
</ul></td>
<td><p>五月天本来是不相信末世论的，五月天在电视上看见海啸翻卷，甚至引发核电厂爆炸，辐射外泄，这才惊觉，“末日”其实与我们生活的“平日”只有一线之隔，最终确定要采用末日作为专辑的主题。</p></td>
<td><img src="C:\Users\Administrator\Desktop\新建文件夹\a2.jpg"></td>
<td><a href="www.jd.com">点击试听</a></td>
</tr>
<tr>
<td>后青春的试</td>
<td>五月天</td>
<td><ul>
<li>突然好想你</li>
<li>生存以上生活以下</li>
<li>你不是真正的快乐</li>
</ul></td>
<td><p>褪去数不尽的纪录和成绩，五月天静下心回到了地下的录音室，就在专辑制作要正式开始的时候，五月天开会做了一个重大约定，接下来的这张新专辑，不论乐器音色、编曲、乐器弹奏，种种创作音乐的相关方式。</p></td>
<td><img src="C:\Users\Administrator\Desktop\新建文件夹\a3.jpg"></td>
<td><a href="www.jd.com">点击试听</a></td>
</tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
需要注意的地方是：用bodred属性时 要加上 solid 和border-collapse: collapse，不然的话表格的线会有两条
问题1：学习PHP为什么要掌握HTML
答：PHP是用来动态生成HTML代码的，PHP 的运行结果就是html
问题2：为什么选择PHP开发动态网页
答：因为PHP够快,上手快，开发快，更新快，迭代快
总结：
<caption>用来实现表格的标题
<th>是加粗
<td>是正常
hover可以实现鼠标的动画
用bodred属性时 要加上 solid 和border-collapse: collapse，不然的话表格的线会有两条
实现功能要有逻辑，要知道先做什么再做什么，逻辑清晰，代码就容易些了
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
