Blogger Information
Blog 10
fans 0
comment 0
visits 5137
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
3月22号作业
小议的博客
Original
480 people have browsed it

3月22号作业

效果图:

作业效果图.png

代码:

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>php开发工具</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
	table {
		margin: 30px auto;
		border-collapse: collapse;
		background-image: url(./images/bj.jpg);
		background-repeat: no-repeat;
		background-color:rgba(255, 151, 151, 0.9);
		background-position: -10px -10px;	/*背景偏移*/
		background-size: 102%;
		font-size: 1.3em;
		box-shadow: 3px 3px 3px #888; /*设置阴影*/
	}
	th,td,table {
		border: 1px solid;

	}
	th,td {
		padding: 10px;
	}
	#title {
		font-size: 1.4em;
		font-weight: bold;
		margin-bottom: 10px;
		color: blue;
	}
	img {
		width: 50px;
		border-radius: 50%;		/*设置圆角*/
		box-shadow: 2px 2px 2px #888; /*设置阴影*/
		
	}
	.xz {
		background-color: red;
		padding: 10px;
		font-weight: bold;
		text-decoration: none;
	}
	.mf {
		text-align: center;
	}
</style>
</head>
<body>
    <table>
    	<caption id="title">PHP开发工具</caption>
    	<tbody>
    	<tr>
    		<th>LOGO</th>
    		<th>名称</th>
    		<th>特点</th>
    		<th>支持系统</th>
    		<th>是否免费</th>
    		<th>下载地址</th>
    	</tr>
    	<tr>
    		<td class="images"><img src="./images/1.jpg"></td>
    		<td>Notepad++7.3.1</td>
    		<td>好用且免费的代码编辑器</td>
    		<td>Windows版</td>
    		<td class="mf">免费</td>
    		<td><a class="xz" href="">本地下载</a></td>
    	</tr>
    	<tr>
    		<td class="images"><img src="./images/2.jpg"></td>
    		<td>SublimeText3汉化版</td>
    		<td>神级代码编辑软件(SublimeText3)</td>
    		<td>Windows版</td>
    		<td class="mf">免费</td>
    		<td><a class="xz" href="">本地下载</a></td>
    	</tr>
    	<tr>
    		<td class="images"><img src="./images/3.jpg"></td>
    		<td>Zend Studio 13.0.1</td>
    		<td>功能强大的PHP集成开发环境</td>
    		<td>Windows版</td>
    		<td class="mf">免费</td>
    		<td><a class="xz" href="">本地下载</a></td>
    	</tr>
    	<tr>
    		<td class="images"><img src="./images/4.png"></td>
    		<td>WebStorm Mac版</td>
    		<td>好用的JavaScript开发工具</td>
    		<td>Mac版</td>
    		<td class="mf">免费</td>
    		<td><a class="xz" href="">本地下载</a></td>
    	</tr>
    	</tbody>
    </table>
</body>
</html>

运行实例 »

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

手抄代码:

IMG_0011.JPG

IMG_0012.JPG

IMG_0013.JPG

IMG_0014.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