线上培训第六天
代码:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>火影忍者十大高手排行</title> <style type="text/css"> table{ /*background-image: url(image/bg.jpg);*/ background-color: #f8b862; /*background-repeat: no-repeat;*/ /*background-size: cover;*/ border: 2px solid #ff461f; font-family: Arial; font-size: 18px; color: #4d4398; margin: 50px auto; width:70%; } td img{ border-radius: 50%; } table,th,td{ border: 2px solid #ff461f; border-collapse: collapse; text-align: center; } caption{ color: #ff2d51; font-size: 1.5em; } h3{ text-shadow: 5px 2px 6px #ff3300; } .user { /*border: 0px;*/ vertical-align: middle; border-left: hidden; text-align: left; } </style> </head> <body> <table> <caption><h3>火影忍者TOP5排行</h3></caption> <tr> <th rowspan="2">实力排行</th> <th rowspan="2" colspan="2">忍者姓名</th> <th colspan="6">查克拉属性</th> <th rowspan="2">特性</th> </tr> <tr> <td>火</td> <td>风</td> <td>雷</td> <td>土</td> <td>水</td> <td>阴</td> </tr> <tr> <td>Top01</td> <td><img src="image\top1.jpg" width="50" height="50" alt="大筒木辉夜"></td> <td class="user">大筒木辉夜</td> <td>√</td> <td>√</td> <td>√</td> <td>√</td> <td>√</td> <td>√</td> <td>血继网罗、通灵</td> </tr> <tr> <td>Top02</td> <td><img src="image\top2.jpg" width="50" height="50" alt="六道仙人"></td> <td class="user">六道仙人</td> <td>√</td> <td>√</td> <td>√</td> <td>√</td> <td>√</td> <td>√</td> <td>人柱力、仙术、血继网罗、通灵</td> </tr> <tr> <td>Top03</td> <td><img src="image\top3.jpg" width="50" height="50" alt="六道斑"></td> <td class="user">六道斑</td> <td>√</td> <td>√</td> <td>√</td> <td>√</td> <td>√</td> <td>√</td> <td>人柱力、血继限界、通灵</td> </tr> <tr> <td>Top04</td> <td><img src="image\top4.jpg" width="50" height="50" alt="漩涡鸣人"></td> <td class="user">漩涡鸣人</td> <td>√</td> <td>√</td> <td>√</td> <td>√</td> <td></td> <td>√</td> <td>人柱力、仙术、血继限界、通灵</td> </tr> <tr> <td>Top05</td> <td><img src="image\top5.jpg" width="50" height="50" alt="九勾玉轮回眼佐助"></td> <td class="user">九勾玉轮回眼佐助</td> <td>√</td> <td>√</td> <td>√</td> <td>√</td> <td>√</td> <td></td> <td>血继限界、通灵</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄作业: