代码
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3/22作业</title>
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
.phb{
width: 800px;
height: 450px;
/*background-color: #f99;*/
margin: 10px auto; /*设置外边距上下直接居中
/* background-image: url(bg.jpg);
background-repeat: no-repeat; 背景图片
background-size: cover;*/
}
/*给所有的表格以及单元格加上边框*/
table,th,td {
border: 2px solid #666; /*边框大小 实线 颜色*/
}
table{
border-collapse: collapse; /*单元格之间的边距合并*/
text-align: center; /*表格文本居中*/
width: 100%;
}
th,td{
padding: 10px;
}
.top{
color: red;
box-shadow: 1px 1px 10px red ;
}
.cm{
background-color: red;
}
.demo2{
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
/*margin-bottom: 20px;*/
margin:auto;
}
.demo3{
width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
margin:auto;
box-shadow: 0 0 5px 2px #666 inset;
box-shadow: 8px 8px 5px 2px #444;
}
</style>
</head>
<body>
<div class="phb">
<table>
<caption><h2>热门歌曲排行榜</h2></caption>
<tr>
<th>排名</th>
<th>歌曲名</th>
<th>歌手</th>
<th>专辑</th>
<th >成名曲</th>
<th>头像</th>
<th colspan="2">操作</th>
</tr>
<tr>
<td class="top">top1</td>
<td>我们不一样</td>
<td>大壮</td>
<td>我们不一样</td>
<td class="cm">我们不一样</td>
<td><img src="1.png" width="35"></td>
<td><a href="">播放</a></td>
<td><a href="">下载</a></td>
</tr>
<tr>
<td class="top">top2</td>
<td>演员</td>
<td>薛之谦</td>
<td>绅士</td>
<td class="cm">认真的雪</td>
<td><img src="1.png" width="35"></td>
<td><a href="">播放</a></td>
<td><a href="">下载</a></td>
</tr>
<tr>
<td class="top">top3</td>
<td>今天</td>
<td>刘德华</td>
<td>今天</td>
<td class="cm">忘情水</td>
<td><img src="1.png" width="35"></td>
<td><a href="">播放</a></td>
<td><a href="">下载</a></td>
</tr>
<tr>
<td>top1</td>
<td>忘记你我做不到</td>
<td>张学友</td>
<td>哈哈</td>
<td class="cm">呵呵</td>
<td><img src="1.png" width="35"></td>
<td><a href="">播放</a></td>
<td><a href="">下载</a></td>
</tr>
<tr>
<td>top1</td>
<td>今夜你会不会来</td>
<td>黎明</td>
<td>我们不一样</td>
<td class="cm">我们不一样</td>
<td><img src="1.png" width="35"></td>
<td><a href="">播放</a></td>
<td><a href="">下载</a></td>
</tr>
</table>
<p style="text-align:center;">
<a href="">1</a>
<a href="">2</a>
<a href="">尾</a>
</p>
</div>
<div class="demo2"></div>
<div class="demo3"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
