3月22号作业
效果图：
代码：
实例
<!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>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码：
