0
点赞
收藏
分享

微信扫一扫

web前端开发技术实验与实践(第三版)储久良编著 项目12 设计简易网站导航

sullay 2022-04-03 阅读 78
htmlcssweb

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>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="https://music.163.com/#/mv?id=281160">留不低——吴雨霏</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="https://music.163.com/#/mv?id=10979776">若是明仔载——曹雅雯 / ?te 坏特</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="https://music.163.com/#/mv?id=14483874">倒流时间——G.E.M.邓紫棋</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="https://music.163.com/#/mv?id=14284650">大风吹——王赫野</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<br>
				<a href="hhttps://music.163.com/#/mv?id=5619835">罪——刘惜君</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="https://music.163.com/#/mv?id=10953786">刻在我心底的名字——卢广仲</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="https://music.163.com/#/mv?id=10967439">991——NINEONE#</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="https://music.163.com/#/mv?id=10938330">小丑女——杨和苏KeyNG</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="https://music.163.com/#/mv?id=499124">PURPOSE: The Movement——Justin Bieber</a>&nbsp;&nbsp;&nbsp;&nbsp;
			</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) 

举报

相关推荐

0 条评论