HTML部分代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>音乐站</title>
<link rel="stylesheet" href="../CSS/css_test.css">
</head>
<body>
<table class="outer">
<tr>
<td><img src="../images/bg.jpg" alt=""></td>
</tr>
<tr>
<td>
<table class="inner">
<tr>
<td class="left">
<ul>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">流行音乐</a>
</li>
<li>
<a href="">爵士音乐</a>
</li>
<li>
<a href="">乡村音乐</a>
</li>
<li>
<a href="">70后音乐</a>
</li>
<li>
<a href="">80后音乐</a>
</li>
<li>
<a href="">90后音乐</a>
</li>
</ul>
</td>
<td class="right">
<img src="../images/1.jpg" alt="">
</td>
</tr>
</table>
</td>
<tr>
<td class="footer">
<p> 联系我们 | 关于我们 |</p>
<p>有你的日子更开心！</p>
</td>
</tr>
</tr>
</table>
</body>
</html>
CSS代码部分：
body {
background: #e0e0e0;
text-align: center;
}
.outer {
800px;
margin: 0 auto;
border: 1px solid #616161;
}
.footer {
background: rgb(136, 222, 243);
font-size: 12px;
color: blue;
text-align: center;
}
.inner .left {
150px;
/* border: 1px solid */
background-color: red;
text-align: center;
}
.inner .right {
650px;
border: 1px solid #333;
}
.inner .left li {
list-style-type: none;
height: 30px;
}
.inner .left li a {
text-decoration: none;
color: black;
margin-left: -30px;
}
