Blogger Information
Blog 19
fans 0
comment 0
visits 10568
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
3.22作业
JcLi的博客
Original
544 people have browsed it

代码:

$]UJMMGIA0KK6(1WPAELGWV.jpg

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>女性消费者最喜爱车型TOP10</title>
    <style type="text/css">
	table,th,td {
		border: 0.5px solid #333;
	}
	table {
		border-collapse: collapse;
		text-align: center;
		margin: 30px auto;
		width: 50%;
		box-shadow: 3px 3px 3px #888;
		background-image: url(../images/背景.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
    table caption {
    	font-size: 2.5em;
    	font-weight: bolder;
    	margin-bottom: 25px; 
    }
    th,td {
    	padding: 10px;
    }
    td img {
    	border-radius: 30%;
        box-shadow: 1px 1px 1px #888;
    }
    th {
    	background-color: rgba(155,155,0,0.2);
    }
    td {
    	font-size: 1.1em;
    }
    th {
    	font-size: 1.3em;
    }
    </style>
</head>
<body>
    <table>
        <caption>2018年度最受女性消费者喜爱车型TOP10排行榜</caption>
        <tr>
            <th colspan="3">车辆信息</th>
            <th colspan="3">车辆数据</th>
            <th colspan="2" rowspan="2">操作</th>
        </tr>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>图片</th>
            <th>发动机</th>
            <th>油耗(L/100km)</th>
            <th>售价(万)</th>
        </tr>
        <tr>
            <td>01</td>
            <td>minicooper</td>
            <td><img src="../images/minicooper.jpg" width="80"></td>
            <td>1.2T/1.5T</td>
            <td>5.3/5.4</td>
            <td>18.50-28.50</td>
            <td><a href="">加入购物车</a></td>
            <td><a href="">去购物车结算</a></td>
        </tr>
        <tr>
            <td>02</td>
            <td>甲壳虫</td>
            <td><img src="../images/甲壳虫.jpg" width="80"></td>
            <td>1.2T/1.4T</td>
            <td>5.6/5.7</td>
            <td>19.58-27.46</td>
            <td><a href="">加入购物车</a></td>
            <td><a href="">去购物车结算</a></td>
        </tr>
        <tr>
            <td>03</td>
            <td>宾利欧陆</td>
            <td><img src="../images/宾利.jpg" width="80"></td>
            <td>4.0T/6.0T</td>
            <td>10.6/14.6</td>
            <td>288.00-459.80</td>
            <td><a href="">加入购物车</a></td>
            <td><a href="">去购物车结算</a></td>
        </tr>
        <tr>
            <td>04</td>
            <td>路虎极光(进口)</td>
            <td><img src="../images/路虎.jpg" width="80"></td>
            <td>2.0T</td>
            <td>11</td>
            <td>69.80</td>
            <td><a href="">加入购物车</a></td>
            <td><a href="">去购物车结算</a></td>
        </tr>
        <tr>
            <td>05</td>
            <td>保时捷911</td>
            <td><img src="../images/保时捷.jpg" width="80"></td>
            <td>3.0T/3.8T</td>
            <td>7.8/-</td>
            <td>131.80-414.20</td>
            <td><a href="">加入购物车</a></td>
            <td><a href="">去购物车结算</a></td>
        </tr>
    </table>
        <p align="center">
            <a href="">首页</a>
            <a href="">上一页</a>
            <a href="">1</a>
            <a href="">2</a>
            <a href="">3</a>
            <a href="">...</a>
            <a href="">下一页</a>
            <a href="">尾页</a>
        </p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手抄:

1.jpg2.jpg3.jpg4.jpg5.jpg

Correction status:qualified

Teacher's comments:作业已检查!
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post