批改状态:未批改
老师批语:
重点未知:
border-collapse: collapse(取消表格重叠的间隙)
background-size: cover;(平铺且按背景格子大小铺满)
font-size: 3em;(字体大小设置)
font-weight: bold;(字体加粗,缩小设置)
border-radius:50%;(背景/图片,设置成为圆球)
box-shadow:box-shadow:0 0 8px 3px #888(设置阴影,值分别为:X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色)
代码部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>海贼王最新战力排行</title>
<style type="text/css">
table {
border: solid black 1px;
margin: 80px auto;
border-collapse: collapse;
width: 1100px;
height: 500px;
background-image: url(images/QQ图片20180316130637.jpg);
background-repeat: no-repeat;
background-size: cover;
}
caption {
color: #DC143C;
margin-bottom: 30px;
font-size: 3em;
font-weight: bold;
}
td {
height: 40px;
border: solid black 1px;
text-align: center;
}
.tr1>td{
width:10%;
}
img{
width: 80px;
border-radius:50%;
}
.td6{
width: 40%;
}
colgroup{
background: #008B8B;
}
</style>
</head>
<body>
<table cellpadding="5" cellspacing="4">
<colgroup span="1"></colgroup>
<caption>
海贼王最新战力排行
</caption>
<thead>
<tr class="tr1">
<td>海贼名称</td>
<td>海贼logo</td>
<td class="td6">战力指数</td>
<td>海贼事迹</td>
<td>恶魔果实</td>
<td>擅长武器</td>
</tr>
</thead>
<tbody>
<tr class="tr2">
<td>雷利</td>
<td><img src="logo321/雷利.jpg"/></td>
<td>1600</td>
<td class="td6">辅佐曾经的海贼王</td>
<td>无果实</td>
<td>刀</td>
</tr>
<tr class="tr3">
<td>索隆</td>
<td><img src="logo321/索隆.jpg"/></td>
<td>800</td>
<td class="td6">打败鹰眼</td>
<td>无果实</td>
<td>刀</td>
</tr>
<tr class="tr4">
<td>女帝</td>
<td><img src="logo321/女帝.png"/></td>
<td>1000</td>
<td class="td6">嫁给路飞</td>
<td>魅力果实</td>
<td>无武器</td>
</tr>
<tr class="tr5">
<td>罗</td>
<td><img src="logo321/罗.jpg"/></td>
<td>900</td>
<td class="td6">成为野心家</td>
<td>手术果实</td>
<td>刀</td>
</tr>
<tr class="tr5">
<td>路飞</td>
<td><img src="logo321/路飞.jpg"/></td>
<td>1300</td>
<td class="td6">成为海贼王</td>
<td>橡胶果实</td>
<td>拳头</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手抄部分:
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号