实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>homework</title> <style type="text/css"> table, th, td { border: 1px solid black; } table { border-collapse: collapse; text-align: center; margin: 50px auto; width: 60%; box-shadow: 8px 8px 8px #888; background-image: url(../images/005.jpg); background-repeat: no-repeat; background-size: cover; } table caption { font-size: 1.6em; font-weight: bolder; } th,td { padding: 10px; } h3 { text-shadow: 8px 8px 8px #888; } *[id] { font-size: 1.2em; } .song { color: #333; } .name { color: grey; } .time { font-size: 0.8em; } td img { border-radius: 50%; box-shadow: 3px 3px 3px #333; } </style> </head> <body> <table> <caption><h3>播放列表</h3></caption> <tr> <th id="songs">歌曲</th> <th id="names">歌手</th> <th id="times">时间</th> <th id="play">播放</th> </tr> <tr> <td class="song">KinjaBang</td> <td class="name">TroyBoi</td> <td class="time">01:46</td> <td><img src="../images/play.png" width="20"></td> </tr> <tr> <td class="song">说散就散</td> <td class="name">袁娅维</td> <td class="time">04:02</td> <td><img src="../images/play.png" width="20"></td> </tr> <tr> <td class="song">小半</td> <td class="name">陈粒</td> <td class="time">04:57</td> <td><img src="../images/play.png" width="20"></td> </tr> <tr> <td class="song">追光者</td> <td class="name">岑宁儿</td> <td class="time">03:55</td> <td><img src="../images/play.png" width="20"></td> </tr> <tr> <td class="song">远走高飞</td> <td class="name">金志文</td> <td class="time">04:01</td> <td><img src="../images/play.png" width="20"></td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码: