收藏
批改狀態(tài)：未批改
老師批語：
重點(diǎn)未知：
border-collapse: collapse（取消表格重疊的間隙）
background-size: cover;（平鋪且按背景格子大小鋪滿）
font-size: 3em;（字體大小設(shè)置）
font-weight: bold;（字體加粗，縮小設(shè)置）
border-radius:50%;（背景/圖片，設(shè)置成為圓球）
box-shadow：box-shadow:0 0 8px 3px #888（設(shè)置陰影，值分別為：X軸位移 Y軸位移 陰影大小 陰影擴(kuò)展 陰影顏色）
代碼部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>海賊王最新戰(zhàn)力排行</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>
海賊王最新戰(zhàn)力排行
</caption>
<thead>
<tr class="tr1">
<td>海賊名稱</td>
<td>海賊logo</td>
<td class="td6">戰(zhàn)力指數(shù)</td>
<td>海賊事跡</td>
<td>惡魔果實(shí)</td>
<td>擅長武器</td>
</tr>
</thead>
<tbody>
<tr class="tr2">
<td>雷利</td>
<td><img src="logo321/雷利.jpg"/></td>
<td>1600</td>
<td class="td6">輔佐曾經(jīng)的海賊王</td>
<td>無果實(shí)</td>
<td>刀</td>
</tr>
<tr class="tr3">
<td>索隆</td>
<td><img src="logo321/索隆.jpg"/></td>
<td>800</td>
<td class="td6">打敗鷹眼</td>
<td>無果實(shí)</td>
<td>刀</td>
</tr>
<tr class="tr4">
<td>女帝</td>
<td><img src="logo321/女帝.png"/></td>
<td>1000</td>
<td class="td6">嫁給路飛</td>
<td>魅力果實(shí)</td>
<td>無武器</td>
</tr>
<tr class="tr5">
<td>羅</td>
<td><img src="logo321/羅.jpg"/></td>
<td>900</td>
<td class="td6">成為野心家</td>
<td>手術(shù)果實(shí)</td>
<td>刀</td>
</tr>
<tr class="tr5">
<td>路飛</td>
<td><img src="logo321/路飛.jpg"/></td>
<td>1300</td>
<td class="td6">成為海賊王</td>
<td>橡膠果實(shí)</td>
<td>拳頭</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
手抄部分：
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)