Blogger Information
Blog 59
fans 0
comment 1
visits 48462
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS盒子实战练习-2018年3月23日
白猫警长的博客
Original
533 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS盒子实战练习</title>
	<style>
	table{
		margin: auto;
		width: 60%;
		border: solid 1px;
		background-image: url(../3.22/imager/bg.jpg);
		background-size: cover;
		 box-shadow: 5px 5px 5px #999;

	}

	th,td{
		text-align: center;
		border:solid 1px;
		padding:5px;
	}
	h2{
		text-align: center;
	}
	.imag img{
		border-radius: 80%;
		box-shadow: 3px 3px 3px 2px #888;
	}
	tr th{
		background-color: Chartreuse;
		height: 40px;
	}
	td>span{
		color: red;
	}
	span[class="jiang"]{
		color: forestgreen; 
	}
	</style>
</head>
<body>
	<table cellspacing="0">
		<h2 >2018年中国富豪榜前五名单</h2>
		<tr>
			<th>排名</th>
			<th>姓名</th>
			<th>头像</th>
			<th>财富(亿元人民币)</th>
			<th>全球排行</th>
			<th>主要财产来源</th>
			<th>国籍</th>
		</tr>
		<tr>
			<td>1 <span>↑</span></td>
			<td>马化腾</td>
			<td class="imag"><img src="../3.22/imager/mahuateng.jpg" alt="马化腾" width="70"></td>
			<td>2950</td>
			<td>15</td>
			<td>腾讯</td>
			<td rowspan="5">中国大陆</td>
		</tr>
		<tr>
			<td>2 <span>↑</span></td>
			<td>许家印</td>
			<td class="imag"><img src="../3.22/imager/jiayin.jpg" alt="许家印" width="70"></td>
			<td>2600</td>
			<td>20</td>
			<td>恒大</td>
		</tr>
		<tr>
			<td>3 <span class="jiang">↓</span></td>
			<td>马云</td>
			<td class="imag"><img src="../3.22/imager/mayun.jpg" alt="马云" width="80"></td>
			<td>2000</td>
			<td>26</td>
			<td>阿里巴巴</td>
		</tr>
		<tr>
			<td>4</td>
			<td>李嘉诚</td>
			<td class="imag"><img src="../3.22/imager/jiacheng.jpg" alt="" width="70"></td>
			<td>1900</td>
			<td>32</td>
			<td>长江实业</td>
		</tr>
		<tr>
			<td>5 <span class="jiang">↓</span></td>
			<td>王健林</td>
			<td class="imag"><img src="../3.22/imager/jianlin.jpg" alt="" width="80"></td>
			<td>1700</td>
			<td>36</td>
			<td>万达</td>
		</tr>
	</table>
</body>
</html>

运行实例 »

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


1.jpg2.jpg3.jpg


Correction status:qualified

Teacher's comments:这两天的作业已检查! 博客发布作业中添加了线上运行代码的新功能! 群文中找到入群必读文件夹下的博客如何提交作业.gif图下载了解!!
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