web前端开发技术实验与实践（第三版）储久良编著 项目12 设计简易网站导航
实训三 项目12 设计简易网站导航
一、页面文字素材：
| 序号 | 网站名称 | URL |
| 1 | 百 度 | http://www.baidu.com/ |
| 2 | 新 浪 | http://www.sina.com.cn/ |
| 3 | 腾 讯 | http://www.qq.com/ |
| 4 | 搜 狐 | http://www.sohu.com/ |
| 5 | 网 易 | http://www.163.com/ |
| 6 | 谷 歌 | http://www.google.com.hk/ |
二、代码：
<!--prj_3_3.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简易网页导航</title>
<style type="text/css">
body{
background-color: orange;
}
h1{
color: #99CC00;
margin-top: 80px;
}
h2{
color: #99CC00;
margin-top: 80px;
}
ul{
list-style-type: none;
text-align: center;
font-size: 22px;
line-height: 33px;
}
li{
float: left;
width: 185px;
display: inline;
}
li a{
padding: 0 0px;
}
div{
text-align: center;
}
</style>
</head>
<body>
<div>
<h1 align="center">我的喜欢列表(段落标记版)</h1>
<br>
<p align="center">
<a href="https://music.163.com/#/mv?id=5779620">凭什么说——刘心</a>
<a href="https://music.163.com/#/mv?id=281160">留不低——吴雨霏</a>
<a href="https://music.163.com/#/mv?id=10979776">若是明仔载——曹雅雯 / ?te 坏特</a>
<a href="https://music.163.com/#/mv?id=14483874">倒流时间——G.E.M.邓紫棋</a>
<a href="https://music.163.com/#/mv?id=14284650">大风吹——王赫野</a>
<br>
<a href="hhttps://music.163.com/#/mv?id=5619835">罪——刘惜君</a>
<a href="https://music.163.com/#/mv?id=10953786">刻在我心底的名字——卢广仲</a>
<a href="https://music.163.com/#/mv?id=10967439">991——NINEONE#</a>
<a href="https://music.163.com/#/mv?id=10938330">小丑女——杨和苏KeyNG</a>
<a href="https://music.163.com/#/mv?id=499124">PURPOSE: The Movement——Justin Bieber</a>
</p>
<br>
<hr align="center" size="3" color="#FFFFFF">
<h2 align="center">我的喜欢列表（无序列表版）</h2>
<ul type="disc">
<li><a href="https://music.163.com/#/mv?id=5779620">凭什么说</a></li>
<li><a href="https://music.163.com/#/mv?id=281160">留不低</a></li>
<li><a href="https://music.163.com/#/mv?id=10979776">若是明仔载</a></li>
<li><a href="https://music.163.com/#/mv?id=14483874">倒流时间</a></li>
<li><a href="https://music.163.com/#/mv?id=14284650">大风吹</a></li>
<li><a href="hhttps://music.163.com/#/mv?id=5619835">罪</a></li>
<li><a href="https://music.163.com/#/mv?id=10953786">刻在我心底的名字</a></li>
<li><a href="https://music.163.com/#/mv?id=10967439">991</a></li>
<li><a href="https://music.163.com/#/mv?id=10938330">小丑女</a></li>
<li><a href="https://music.163.com/#/mv?id=499124">Loveyourself</a></li>
</ul>
<br />
<hr align="center" size="3" color="#FFFFFF">
<br />
</div>
</body>
</html>
三、页面效果截图：
别的不说，一句话，快乐最大！！！
（把链接和文字替换一下就好啦，我的链接是网易云的MV）
