3-22作业
代码
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>销售榜</title>
<style type="text/css">
.bg {
margin:20px auto;
background-image:url(https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/bg.jpg);
height:480px;
width:960px;
box-shadow:0 0 5px 2px #aeb7b7;
}
.logo {
padding:15px 0 0 20px;
}
.rt {
font-family:微软雅黑;
font-size:1em;
color:#fff;
float:right;
padding:10px 20px 0 0 ;
}
.tab {
width:480px;
height:320px;
background:#fff;
margin-top:80px;
margin-right:40px;
float:right;
border-radius:2%;
}
table {
width:480px;
border:0px solid #333;
text-align:center;
padding:3px;
margin:18px auto;
}
td img {
width:65px;
height:95px;
box-shadow: 1px 1px 1px 1px #d2d2d2;
}
td span {
font-size:8px;
color:#9e9b9b;
}
.tds {
width:390px;
height:370px;
margin-left:30px;
}
</style>
</head>
<body>
<div class="bg">
<div class="logo">
<img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/logo.png" alt="logo">
<div class="rt">
2018年1月1日
</div></div>
<div>
<span class="tds"> <img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/td.png" alt=""></span>
<div class="tab">
<table>
<tr>
<td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/1.jpg" alt=""><br>
<span>姓名:周一</span><br>
<span>职务:销售</span></td>
<td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/2.jpg" alt="">
<br><span>姓名:孙二</span><br>
<span>职务:销售</span></td>
<td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/3.jpg" alt="">
<br><span>姓名:李三</span><br>
<span>职务:销售</span></td>
<td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/4.jpg" alt="">
<br><span>姓名:小四</span><br>
<span>职务:销售</span></td>
<td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/5.jpg" alt="">
<br><span>姓名:赵五</span><br>
<span>职务:销售</span></td>
</tr>
<tr>
<td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/6.jpg" alt="">
<br><span>姓名:刘六</span><br>
<span>职务:销售</span></td>
<td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/7.jpg" alt="">
<br><span>姓名:秦七</span><br>
<span>职务:销售</span></td>
<td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/8.jpg" alt="">
<br><span>姓名:王八</span><br>
<span>职务:销售</span></td>
<td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/9.jpg" alt="">
<br><span>姓名:钱九</span><br>
<span>职务:销售</span></td>
<td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/10.jpg" alt="">
<br><span>姓名:吴十</span><br>
<span>职务:销售</span></td>
</tr>
</table>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写
