3月22日作业
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格-user表</title>
<style>
table, th, td{
border:1px solid #333;
}
table{
border-collapse: collapse; //边框变成一根线
text-align: center;
margin:50px auto; //表格居中显示
width: 80%;
box-shadow: 5px 5px 5px #888;
background-image: url('/images/gufeng.jpg');
background-repeat: no-repeat; //不缩放
background-size: cover;
}
table caption{
font-size: 1.6em;
font-weight: bolder;
margin-bottom: 30px;
}
th{
background-color: rgba(155,155,0,0.3)
}
th,td {
padding: 10px;
}
td img{
width: 40px;
border-radius: 50px;
}
.box1{
width: 150px;
height: 150px;
background-color: lightskyblue;
margin-left: 50px;
/*border-width: 4px;
border-style: solid;
border-color:green;*/
border:3px dashed yellow;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
padding: 20px;
/*border-radius: 60px;*/
/*box-shadow: -8px -8px 8px 3px #888;*/
box-shadow:0px 0px 8px 3px #888 inset;
/*边框设置和图片一样，内边距随便设置*/
}
div img{
border-radius: 30%;
}
</style>
</head>
<body>
<table style="width: 80%">
<caption>§ 用户表§ </caption>
<tr">
<th>ID</th>
<th>用户名</th>
<th>头像</th>
<th>邮箱</th>
<th>密码</th>
<th>状态</th>
<th>级别</th>
<th>创建时间</th>
<th>更新时间</th>
</tr>
<tr>
<td>1</td>
<td>user</td>
<td><img src="/images/001.jpg"></td>
<td>nihao@php.com</td>
<td>123456</td>
<td>1</td>
<td>1</td>
<td>20180322</td>
<td>20180322</td>
</tr>
<tr>
<td>2</td>
<td>peter</td>
<td><img src="/images/002.jpeg"></td>
<td>peter@php.com</td>
<td>123456</td>
<td>1</td>
<td>0</td>
<td>20180322</td>
<td>20180322</td>
</tr>
<tr>
<td>3</td>
<td>session</td>
<td><img src="/images/003.jpg"></td>
<td>session@php.com</td>
<td>123456</td>
<td>1</td>
<td>1</td>
<td>20180322</td>
<td>20180322</td>
</tr>
<tr>
<td>4</td>
<td>block</td>
<td><img src="/images/004.jpg"></td>
<td>block@php.com</td>
<td>123456</td>
<td>1</td>
<td>1</td>
<td>20180322</td>
<td>20180322</td>
</tr>
<tr>
<td>5</td>
<td>xinxin</td>
<td><img src="/images/005.jpg"></td>
<td>xinxin@php.com</td>
<td>123456</td>
<td>1</td>
<td>1</td>
<td>20180322</td>
<td>20180322</td>
</tr>
</table>
<div class="box">
<div class="box1">
<img src="/images/xinxin.jpg" style="height: 150px; width: 150px;" alt="">
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
