博客列表 >3.22PHP线上培训作业

3.22PHP线上培训作业

小丑的博客
小丑的博客原创
2018年03月23日 14:13:29542浏览

线上培训第六天

代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>火影忍者十大高手排行</title>
	<style type="text/css">
		table{
			/*background-image: url(image/bg.jpg);*/
			background-color: #f8b862;
			/*background-repeat: no-repeat;*/
			/*background-size: cover;*/
			border: 2px solid #ff461f;
			font-family: Arial;
			font-size: 18px;
			color: #4d4398;
			margin: 50px auto;
			width:70%;
		}
		td img{
			border-radius: 50%;					
		}
		table,th,td{
			border: 2px solid #ff461f;
			border-collapse: collapse;
			text-align: center;
		}
		caption{
			color: #ff2d51;
			font-size: 1.5em;

		}
		h3{
			text-shadow: 5px 2px 6px #ff3300;
		}
		.user {
    		/*border: 0px;*/
    		vertical-align: middle;
    		border-left: hidden;
    		text-align: left;
		}
	</style>
</head>
<body>
	<table>
		<caption><h3>火影忍者TOP5排行</h3></caption>
		<tr>
			<th rowspan="2">实力排行</th>
			<th rowspan="2" colspan="2">忍者姓名</th>
			<th colspan="6">查克拉属性</th>			
			<th rowspan="2">特性</th>
		</tr>
		<tr>
			<td>火</td>
			<td>风</td>
			<td>雷</td>
			<td>土</td>
			<td>水</td>
			<td>阴</td>
	
		</tr>
		<tr>
			<td>Top01</td>
			<td><img src="image\top1.jpg" width="50" height="50" alt="大筒木辉夜"></td>	 
			<td   class="user">大筒木辉夜</td>
			<td>√</td>
			<td>√</td>
			<td>√</td>
			<td>√</td>
			<td>√</td>
			<td>√</td>
			<td>血继网罗、通灵</td>
		</tr>
		<tr>
			<td>Top02</td>
			<td><img src="image\top2.jpg" width="50" height="50" alt="六道仙人"></td>		
			<td   class="user">六道仙人</td>
			<td>√</td>
			<td>√</td>
			<td>√</td>
			<td>√</td>
			<td>√</td>
			<td>√</td>
			<td>人柱力、仙术、血继网罗、通灵</td>
		</tr>
		<tr>
			<td>Top03</td>
			<td><img src="image\top3.jpg" width="50" height="50" alt="六道斑"></td>			
			<td   class="user">六道斑</td>
			<td>√</td>
			<td>√</td>
			<td>√</td>
			<td>√</td>
			<td>√</td>
			<td>√</td>
			<td>人柱力、血继限界、通灵</td>
		</tr>
		<tr>
			<td>Top04</td>
			<td><img src="image\top4.jpg" width="50" height="50" alt="漩涡鸣人"></td>		
			<td   class="user">漩涡鸣人</td>
			<td>√</td>
			<td>√</td>
			<td>√</td>
			<td>√</td>
			<td></td>
			<td>√</td>
			<td>人柱力、仙术、血继限界、通灵</td>
		</tr>
		<tr>
			<td>Top05</td>
			<td><img src="image\top5.jpg" width="50" height="50" alt="九勾玉轮回眼佐助"></td>		
			<td   class="user">九勾玉轮回眼佐助</td>
			<td>√</td>
			<td>√</td>
			<td>√</td>
			<td>√</td>
			<td>√</td>
			<td></td>
			<td>血继限界、通灵</td>
		</tr>
		

	</table>
</body>
</html>

运行实例 »

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

手抄作业:
1.jpg2.jpg3.jpg

上一条:3月22日作业下一条:3月22日作业
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议