实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>0322作业</title>
<style type="text/css">
*{
margin: 0;padding: 0;font: "微软雅黑";font-size: 20px;
}
table{
border-collapse: collapse;
text-align:center;
margin: 0 auto;
width: 50%;
/*background: red;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 60px;
border-top-left-radius: 60px;
border-top-right-radius: 50px;
*/
}
caption{
font-weight: bolder;
font-size: 2em;
margin-bottom: 20px;
}
th{
background-color: rgba(22,156,0,0.3);
}
.blue{
/*background-color: lightblue;*/
}
table,th,td{
padding: 20px;
border: 1px solid black;
}
table td img{
width: 50px;
border-radius:50% ;
/*box-shadow: 5px 5px 3px 1px #cccccc;*/
/*box-shadow: 0 0 5px 1px #cccccc inset;*/
box-shadow: -5px -5px 3px 1px #cccccc;
}
</style>
</head>
<body>
<table >
<caption>手机销售排行榜</caption>
<tr>
<th>排名</th>
<th>机型</th>
<th>品牌</th>
<th>价格</th>
<th>销量（万部）</th>
<th>占有率</th>
<th>图片</th>
</tr>
<tr class="blue">
<td>1</td>
<td>IPHONE X</td>
<td>苹果</td>
<td>7000</td>
<td>139</td>
<td>5.1%</td>
<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521740958213&di=5ede9ff0d720dcdcbc5eb54739a1b574&imgtype=0&src=http%3A%2F%2Fimg.sc115.com%2Fuploads%2Fsc%2Fjpgs%2F1409%2Fapic6320_sc115.com.jpg"/></td>
</tr>
<tr>
<td>2</td>
<td>MI_PRO</td>
<td>小米</td>
<td>2999</td>
<td>102</td>
<td>3%</td>
<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521740713367&di=66719b6527754df14517de6834243c9e&imgtype=0&src=http%3A%2F%2Fwww.nvidia.cn%2Fcontent%2Ftegra%2Fimages%2Fsuper-phones%2Fapac%2Fxiaomi-mi3%2Fxiaomi-mi3-mfg-1.png"/></td>
</tr>
<tr class="blue">
<td>3</td>
<td>IPHONE5S</td>
<td>苹果</td>
<td>4000</td>
<td>99</td>
<td>2%</td>
<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521740799309&di=bd48c542b1477d4e687c699c4ba17d47&imgtype=0&src=http%3A%2F%2Fsoomal.com%2Fimages%2Fdoc%2F20130911%2F00035480.jpg"/></td>
</tr>
<tr>
<td>4</td>
<td>MATE</td>
<td>魅族</td>
<td>1999</td>
<td>89</td>
<td>1%</td>
<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521740767112&di=7621f1751658ed2afc53f2bbd4cca578&imgtype=0&src=http%3A%2F%2Fimage.it168.com%2Fn%2F640x480%2F6%2F6697%2F6697067.jpg"/></td>
</tr>
<tr class="blue">
<td>5</td>
<td>A390</td>
<td>联想</td>
<td>2000</td>
<td>69</td>
<td>0.9%</td>
<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1521730807&di=6ba3a251676e279edf167004effa47c7&src=http://img.mp.itc.cn/upload/20161103/ddb99cb834bf4b8a88bbb868cf087e8b_th.jpg"/></td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
