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

web 专栏收录该内容
19 篇文章 14 订阅

实训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>

  • 12
    点赞
  • 0
    评论
  • 33
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值