03超链接与浮动框架&图像与多媒体技术

大晴的上分之旅

于 2023-09-07 11:57:48 发布

阅读量1.1k

点赞数 2

分类专栏： web练习文章标签： html5 html

本文链接：https://blog.csdn.net/snowy_and_sunny/article/details/132733557

版权

web练习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

作业 1

根据提供的图像和超链接资源完成图像导航设计，资源与对应的超链接如下表所示；展现效

果如下图所示。

编写符合以下要求要求的文档，在 html 文档中插入一张图片，为图片加上链接，指向它所

在的网站。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>apple网站</title>
	</head>
	<body>
		<h2 style="text-align: center;">apple网站</h2>
		<hr color="lawngreen">
		<a href="https://www.apple.com.cn/iphone-12/"><img src="img/iPhone.png" style="max-width:300px;"></a>
		<a href="https://www.apple.com.cn/ipad-pro/"><img src="img/ipadpro.png" style="max-width:300px;"></a>
		<a href="https://www.apple.com.cn/watch/"><img src="img/watch.png" style="max-width:300px;"> </a>
		<a href="https://www.apple.com.cn/imac-24/"><img src="img/imac.png" style="max-width:300px;"></a>
		<hr color="lawngreen">
	</body>
</html>

作业2

按如下要求设计 Web 页面，实现下图所示的页面效果。

1）页面标题为：桂林山水风景图片；

2）正文标题为红色“桂林山水风景图片”，图片分别为 5_2_1.jpg, 5_2_2.jpg, 5_2_3.jpg,

5_2_4.jpg,采用无序列表布局，每一个列表项的内容为图像链接，点击小图可以浏览大图。

3）定义样式。img 标记样式为“宽度 100px、高度 100px，边框 0px“,h3 标记样式为：”红色，

居中“；ul 样式为”去除列表项前的符号，内容居中显示“；li 样式为”显示方式靠左显示

（float:left;）、宽度为 120px,行高 30px“

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>桂林山水风景图片</title>
		<style>
			img{
				width: 100px;
				height: 100px;
				border: 0px;
			}
			h3{
				color: red;
				text-align: center;
			}
			ul{
				text-align: center;
				list-style-type: none;
			
			}
			li{
				float:left;
				width: 120px;
				height:30px;
				
			}
		</style>
	</head>
	<body>
		<h3>桂林山水风景图片</h2>
		<ul>
			<li><a href="img/5_2_1.jpg"><img src="img/5_2_1.jpg"></a></li>
			<li><a href="img/5_2_2.jpg"><img src="img/5_2_2.jpg"></a></li>
			<Li><a href="img/5_2_3.jpg"><img src="img/5_2_3.jpg"></a></Li>
			<li><a href="img/5_2_4.jpg"><img src="img/5_2_4.jpg"></a></li>
		</ul>
		<br>		
		<ul style="margin-top: 100px;">
			<li><a href="img/5_2_1.jpg">桂林山水1</a></li>
			<li><a href="img/5_2_2.jpg">桂林山水2</a></li>
			<Li><a href="img/5_2_3.jpg">桂林山水3</a></Li>
			<li><a href="img/5_2_4.jpg">桂林山水4</a></li>
			
		</ul>

	</body>
</html>

作业3

按如下要求设计 Web 页面,要求：

1）页面标题为：浮动框架的应用

2）页面内容为：一个标题，网页内嵌入两个 html 页面，两个超链接。标题内容：三号标题

显示“浮动框架中打开新页面“；两个浮动框架名称分别为 left\right，初始内容分别为：

job_5_1.html 和 job_5_2.html ；两个超链接分别在左右两个浮动框架中打开两个网页，

分别是：job_5_2.html 和 job_5_1.html，两个超链接的 target 属性分别指向两个浮动框

架 left\right。

程序名称为：job_5_3.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>浮动框架应用</title>
	</head>

	<body>
		<h3 style="text-align: center;">浮动框架中打开新页面</h3>
		<div style="margin: auto;text-align: center;">
			<iframe name="left" src="job_5_2.html"></iframe>
			<iframe name="right" src="job_5_1.html"></iframe>
			<p>
				<a href="job_5_2.html">在左边浮动框架中打开job_5_2.html</a>
				<a href="job_5_1.html">在左边浮动框架中打开job_5_1.html</a>
			</p>
		</div>

	</body>

</html>

作业4

按如下要求设计 Web 页面,要求：

1）页面标题为：中国名牌大学简介，页面首行 3 号标题字显示，内容为：中国名牌大学简

介

2）页面中间插入两条水平分割线，分割线之间设置滚动文字标记，滚动方式为来回滚动。

滚动文字内插入 7 个大学的超链接，分别为：清华大学、北京大学、南京大学、浙江大

学、复旦大学、上海交通大学、中国科技大学。

3）将鼠标悬停在滚动文字上时会停止滚动，鼠标从文字移出时会继续滚动，单机超链接时

访问相关大学的网站。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>中国名牌大学简介</title>
	</head>

	<body>
		<h3 style="text-align: center;">中国名牌大学简介</h3>
		<hr>
		<marquee onmouseover="stop()" onmouseout="start()" behavior="alternate">
			<a href="http://www.tsinghua.edu.cn/">清华大学</a>&nbsp;
			<a href="http://www.pku.edu.cn/">北京大学</a>&nbsp;
			<a href="http://www.sjtu.edu.cn/">上海交通大学</a>&nbsp;
			<a href="https://www.fudan.edu.cn/">复旦大学</a>&nbsp;
			<a href="http://www.nju.edu.cn/">南京大学</a>&nbsp;
			<a href="https://www.zju.edu.cn/">浙江大学</a>&nbsp;
			<a href="https://www.ustc.edu.cn/">中国科技大学</a>
		</marquee>
		<hr>
	</body>

</html>

作业5

按如下要求设计 Web 页面,要求：

1）页面标题为：图像画廊，页面首行 3 号标题字显示，内容为：图像画廊

2）无序列表加载五幅图片，并用滚动文字实现五幅图像从右向左交替滚动显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图像画廊</title>
		<style>
			h3{
				text-align: center;
			}
			
			img{
				width: 100px;
				height: 100px;
			}
			ul{
				text-align: center;
				list-style-type: none;
			
			}
			li{
				float:left;
				width: 120px;
				height:30px;	
			}
		</style>
	</head>
	<body>
		<h3>图像画廊</h3>
		<hr style="border: 2px solid #5aff1d;">
		<marquee style="height: 130px;direction: left;">
		<ul>
			<li><img src="img/达芬奇.webp"></li>
			<li><img src="img/毕加索.jpg"></li>
			<Li><img src="img/1.jpg"></Li>
			<li><img src="img/2.webp"></li>
			<li><img src="img/3.webp"></li>
		</ul>
		</marquee>
		<hr style="border: 2px solid #5aff1d;">
	</body>
</html>