刚学完Html5,为了加深对Html5的理解，便突发奇想的使用纯Html写了一个纯静态的页面，代码通俗易懂，适合小白进行研究学习。
代码效果：代码index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MUSIC AND MOVIE AND STUDY 导航</title>
<style>
body {
margin: 0;
}
/* 头部样式 */
.header {
background-color: #00BFFF;
padding: 20px;
text-align: center;
}
/* 导航条 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 导航链接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 链接 - 修改颜色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="header">
<h1><font color=" #696969"><i>MUSIC AND MOVIE AND STUDY 导航</i></font></h1>
</div>
<div class="topnav">
<a href="index.jsp">首页</a>
<a href="guanyuwomen.html">关于我们</a>
</div>
<!-- <div id="menu" style="background-color:#1E90FF;height:450px;width:150px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div> -->
<div id="content" style="background-color:#EEEEEE;height:450px;width:1340px;float:left;">
<br>
<font color="#00CED1" size="4px">在线音乐与影视</font>
<br>
<div style="background-color:#EEEEEE;height:170px;width:1330px;float:left;border:3px solid #1E90FF;">
<table cellspacing="10">
<tr>
<td>
<a href="//www.kugou.com">
<img src="image/kg.png" width="120" height="120"></a>
<br>
<div style="text-align:center">酷狗音乐</div>
<td/>
<td>
<a href="https://y.qq.com/">
<img src="image/QQ.jpg" width="120" height="120"></a>
<br>
<div style="text-align:center">QQ音乐</div>
<td/>
<td>
<a href="https://music.163.com/">
<img src="image/wyy.png" width="120" height="120"></a>
<br>
<div style="text-align:center">网易云音乐</div>
<td/>
<td>
<a href="http://www.kuwo.cn/">
<img src="image/kw.png" width="120" height="120"></a>
<br>
<div style="text-align:center">酷我音乐</div>
<td/>
<td>
<a href="https://www.xiami.com/">
<img src="image/xm.png" width="120" height="120"></a>
<br>
<div style="text-align:center">虾米音乐</div>
<td/>
<td>
<a href="https://m.iqiyi.com/">
<img src="image/aqy.jpg" width="120" height="120"></a>
<br>
<div style="text-align:center">爱奇艺</div>
<td/>
<td>
<a href="https://m.youku.com/">
<img src="image/yk.png" width="120" height="120"></a>
<br>
<div style="text-align:center">优酷视频</div>
<td/>
<td>
<a href="https://m.v.qq.com/">
<img src="image/tx.jpg" width="120" height="120"></a>
<br>
<div style="text-align:center">腾讯视频</div>
<td/>
<td>
<a href="https://m.mgtv.com/">
<img src="image/mg.jpg" width="120" height="120"></a>
<br>
<div style="text-align:center">芒果视频</div>
<td/>
</tr>
</table>
</div>
<br>
<br>
<br>
<br>
<hr>
<font color="#00CED1" size="3px"><em>网址导航</em></font>
<div style="background-color:#EEEEEE;height:190px;width:1330px;float:left;border:3px solid #1E90FF;">
<table border="1px" style="background-color:#EEEEEE;height:10px;width:1330px;" >
<tr>
<th >IT学习网站</th>
<th >软件下载</th>
<th >视频解析</th>
<th >网站源码</th>
</tr>
<tr>
<td><a href="http://www.pzit.store"><div style="text-align:center;">www.pzit.store</div></a></td>
<td><a href="https://www.pzit.store"><div style="text-align:center;">www.pzit.store</div></a></td>
<td><a href="http://www.pzit.store/jx"><div style="text-align:center;">www.pzit.store</div></a></td>
<td><a href="http://www.pzit.store"><div style="text-align:center;">www.pzit.store</div></a></td>
</tr>
<tr>
<td>w</td>
<td>w</td>
<td><a href="m3u8.html"></a></td>
<td>w</td>
</tr>
<tr>
<td>w</td>
<td>w</td>
<td>w</td>
<td>w</td>
</tr>
<tr>
<td></td>
<td>w</td>
<td>w</td>
<td>w</td>
</tr>
<tr>
<td>w</td>
<td>w</td>
<td>w</td>
<td>w</td>
</tr>
<tr>
<td>w</td>
<td>w</td>
<td>w</td>
<td>w</td>
</tr>
</table>
</div>
</div>
<div id="button" style="background-color:#696969;height:471px;width:1350px;text-align:center;">版权所有：<a href="http://www.pzit.store">www.pzit.store </a></div>
</body>
</html>