Web前端开发技术实验与实践（第3版）储久良编著实训3

最新推荐文章于 2024-06-23 10:20:53 发布

韩飞扬婉

最新推荐文章于 2024-06-23 10:20:53 发布

阅读量1.4w

点赞数 25

分类专栏： web 文章标签： css3 html web

本文链接：https://blog.csdn.net/weixin_45867761/article/details/109926710

版权

web 专栏收录该内容

19 篇文章 187 订阅

订阅专栏

实训3 超链接与多媒体文件应用

项目10 设计简易灯箱画廊
页面效果截图
在这里插入图片描述

代码

<!--prj_3_1.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简易灯箱画廊设计</title>
		<style type="text/css">
			body {
				text-align: center;
			}

			.div1 {
				width: 900px;
				height: 500px;
				margin: 0 auto;
				text-align: center;
				background-color: #33cc99;
			}

			ul {
				margin: 0 auto;
				width: 800px;
				list-style-type: none;
				height: 120px;
			}

			li {
				float: left;
				width: 110px;
				height: 90px;
				margin: 5px;
			}

			img {
				border: 0;
				width: 100px;
				height: 80px;
			}

			h3 {
				font-size: 24px;
				color: white;
				padding: 10px auto;
			}

			a {
				color: #ffffff;
				text-decoration: none;
			}

			a:link,
			a:visited,
			a:active {
				color: #0033cc;
			}

			a:hover {
				border-bottom: 4px solid #ff0000;
			}
		</style>
	</head>
	<body>
		<embed src="../img/Sleep%20Away.mp3" loop="true" autostart="true" width="0" height="0"></embed>
		<div id="" class="div1">
			<h3>简易灯箱画廊设计</h3>
			<hr color="red">
			<ul>
				<li><a href="../img/t1.jpg" target="iframe">
						T1<br /><img src="../img/t1.jpg" /></li>
				<li><a href="../img/t2.jpg" target="iframe">
						T2<br /><img src="../img/t2.jpg" /></li>
				<li><a href="../img/t3.jpg" target="iframe">
						T3<br /><img src="../img/t3.jpg" /></li>
				<li><a href="../img/t4.jpg" target="iframe">
						T4<br /><img src="../img/t4.jpg" /></li>
				<li><a href="../img/t5.jpg" target="iframe">
						T5<br /><img src="../img/t5.jpg" /></li>
				<li><a href="../img/t6.jpg" target="iframe">
						T6<br /><img src="../img/t6.jpg" /></li>
				<li><a href="../img/t7.jpg" target="iframe">
			</ul>
			<iframe name="iframe" src="../img/t1.jpg" width="500px" height="300px" frameborder="0"></iframe>
		</div>
	</body>
</html>

项目11 设计支持音频、视频播放的网页
页面效果截图（我用的谷歌浏览器，要在浏览器设置下的隐私设置与安全性中的网站设置的Flash由禁止改为先询问）
在这里插入图片描述

代码

<!--prj_3_2.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				text-align: center;
			}

			ul {
				list-style-type: none;
			}

			li {
				float: left;
				margin: 20px;
			}

			div {
				height: 250px;
				background-color: #99cc00;
				text-align: center;
			}

			marquee {
				font-size: 16px;
				padding: 4px auto;
			}
		</style>
	</head>
	<body>
		<h2>明月几时有</h2>
		<hr>
		<font size="4" color="" face="隶书">明月几时有？把酒问青天。<br>
			不知天上宫阙，今夕是何年。<br>
			我欲乘风归去，又恐琼楼玉宇，<br>
			高处不胜寒，起舞弄清影，何似在人间。 <br>
			转朱阁，抵绮户，照无眠。<br>
			不应有恨，何事偏向别时圆。 <br>
			人有悲欢离合，月有阴晴圆缺，此事古难全。 <br>
			但愿人长久，千里共婵娟。<br>

		</font>
		<div id="">
			<ul>
				<li><embed src="../img/62.swf" loop="true" autostart="true" width="200px" height="200px"></embed></li>
				<li><embed src="../img/蔡琴明月几时有.mp3" loop="true" autostart="true" width="200px" height="200px"></embed></li>
				<li><embed src="../img/0303.swf" loop="true" autostart="true" width="200px" height="200px"></embed></li>
			</ul>
		</div>
		<marquee direction="left" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">欢迎来到我的多媒体世界！</marquee>
	</body>
</html>

项目12 设计简易导航网站
页面效果截图
在这里插入图片描述

代码

<!--prj_3_3.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网站导航</title>
		<style type="text/css">
			ul {
				list-style-type: none;
				text-align: center;
			}

			li {
				float: left;
				width: 110px;
				display: inline;
			}

			li a {
				padding: 0 20px;
			}

			div {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="">
			<p align="left">使用段落标记和超链接实现网站导航</p>
			<p>
				<a href="http://www.baidu.com/">百度</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="http://www.sina.com.cn/">新浪</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="http://www.qq.com/">腾讯</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="http://www.sohu.com/">搜狐</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="http://www.163.com/">网易</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="http://www.google.com.hk/">360搜索</a>
			</p>
			<hr align="center" size="3" color="#0066ff">
			<p align="left">利用无序列表实现水平导航条</p>
			<ul>
				<li><a href="http://www.baidu.com/">百度</a></li>
				<li><a href="http://www.sina.com.cn/">新浪</a></li>
				<li><a href="http://www.qq.com/">腾讯</a></li>
				<li><a href="http://www.sohu.com/">搜狐</a></li>
				<li><a href="http://www.163.com/">网易</a></li>
				<li><a href="http://www.google.com.hk/">360搜索</a></li>
			</ul>
		</div>
	</body>
</html>

项目13 设计专业课程导航
页面效果截图
在这里插入图片描述

代码

<!--prj_3_4.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>专业课程导航</title>
	</head>
	<body>
		<h2 align="center">专业课程导航</h2>
		<a name="dir0">专业课程导航</a>
		<ul>
			<li><a href="#dir1">英语</a></li>
			<li><a href="#dir2">高数</a></li>
			<li><a href="#dir3">大学物理</a></li>
		</ul>
		<h3><a name="dir1">英语</a></h3>
		<p>基础英语、高级英语、报刊选读、视听、口语、英语写作、翻译理论与实践、语言理论、语言学概论、主要英语国家文学史及文学作品选读、主要英语国家国情等。<strong><a href="#dir0">返回</a></strong></p>
		<h3><a name="dir2">高数</a></h3>
		<p>《高等数学》课程介绍随着科学技术的迅猛发展，数学正日益成为各学科进行科学研究的重要手段和工具。高等数学是近代数学的基础，是理科各专业和经济管理专业类学生的必修课，也是在现代科学技术、经济管理、人文科学中应用最广泛的一门课程。因此学好这门课程对学生今后的发展是至关重要的。本课程是学生进入大学后学习的第一门重要的数学基础课。通过本课程的教学，使学生掌握处理数学问题的思想和方法，培养学生科学思维能力，同时为后续课程的学习奠定良好的基础。<strong><a
				 href="#dir0">返回</a></strong></p>
		<h3><a name="dir3">大学物理</a></h3>
		<p>以物理学基础为内容的大学物理课程，是理工科各专业学生一门重要的通识性的必修基础课。大学物理课程既为学生打好必要的物理基础，又在培养学生科学的世界观，增强学生分析问题和解决问题的能力，培养学生的探索精神、创新意识等方面，具有其他课程不能替代的重要作用。<strong><a
				 href="#dir0">返回</a></strong></p>
	</body>
</html>