网页设计实现三个页面的跳转，有文字、图片和超链接

最新推荐文章于 2024-07-26 21:15:01 发布

木头科技

最新推荐文章于 2024-07-26 21:15:01 发布

阅读量1.3w

点赞数 29

分类专栏：网页设计文章标签： html

本文链接：https://blog.csdn.net/wkt1105436760/article/details/115409181

版权

网页设计专栏收录该内容

5 篇文章 13 订阅

订阅专栏

这是一个关于网页设计的实例，展示了如何创建包含文字描述、图片展示和超链接跳转的三页面布局。第一部分描述了作者的家乡，配以图片和相关诗句的链接；第二部分呈现了李白的《将进酒》诗句；第三部分展示了旋转图片的列表。通过简单的HTML和CSS，实现了视觉和交互效果。

摘要由CSDN通过智能技术生成

网页设计实现三个页面的跳转，有文字、图片和超链接

直接来干货吧，哈哈

可作为摸板

一、实现效果

在这里插入图片描述

二、源代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style tyle="html">
		img{
			width: 300px;
			height: 200px;
		}
		#test{
			letter-spacing: 2px;
			line-height:1.5em;
		}
		a{
			text-decoration:none;
		}
		*{
			 text-align:center;
		}

	</style>
</head>
<body>
	<h1>我的家乡</h1>
	<h2>梦醒的地方</h2>
	<p  id="test">
		我从小生长在大山的怀抱里，还记得屋近处的山布满了松衫和毛竹，<br/>
		还有千万种杂树，山风一吹，一片浓绿，一棵棵树像扭动身体在跳舞呢！ <br/>
		屋远处的山，苍黑似铁，<br/>如巨人、如铁塔、如宝剑，奇峰罗列、形态万千、十分壮观。<br />
		山下还有一条清澈见底的小溪，奔腾着、跳跃着，叮叮咚咚地唱起歌儿，<br/>
		真可以比得上“林中小河，野花夹岸”了。<br/>
		溪水从高处流下来，撞击着路旁的岩石，<br/>
		水花飞溅，如飞珠滚玉一般。山里还有一些奇形怪状的石头，<br/>
		如：石和尚念经、狗指远路，<br/>
		还有一些叫不出名字的石头正等着你去给它取名儿呢！<br />
		
		
		这就是我美丽的家乡，我爱我的家乡。</p>
	<div>
	<img src="1.jpg" alt="">
	</div>
	<br>
	<a href="ww.html">相关诗句</a>
	
	<a href="T.html">相关图片</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body{
	      letter-spacing:2px;
	      line-height:1.5em;
	      text-align:center;
	      font-size:20px;
	     }
		
	</style>
	</head>
<body>
	
			<pcolor:green>将进酒|送友人|静夜思</p>
			<hr width="400" width="200"/>
			<h1 style="color:red;text-decoration:underline">
			将进酒</h1>
			<p>君不见黄河之水天上来，奔流到海不复回。</p>
			<p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
			<p>人生得意须尽欢，莫使金樽空对月。</p>
			<p>天生我材必有用，千金散尽还复来。</p>
			<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
			<p>岑夫子，丹丘生，将进酒，杯莫停。</p>
			<p>与君歌一曲，请君为我倾耳听。</p>
			<p>钟鼓馔玉不足贵，但愿长醉不复醒。</p>
			<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
			<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
			<p>主人何为言少钱，径须沽取对君酌。</p>
			<p>五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
			<hr width="500" width="200"/>
			<b><p style="font-style:italic;font-weight:italic">
			1.岑夫子：人名</p></b>
			<b><p style="font-style:italic;font-weight:italic">
			2.但求生：人名</p></b>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#imglist{
			width: 130px;
			margin:0 auto;
		}
		.pol{
			width: 132px;
			padding: 10px;
			background-color: #eee;
			border: 1px solid #dfdfdf;
			box-shadow: 10px 10px 5px #aaa;
			border-radius:10px;

		}
		#imglist img{
			height: 150px;
			width: 132px;
			margin: 0 auto;

		}
		.rotate-left{
			-webkit-transform: rotate(7deg);
			-ms-transform: rotate(7deg);
			-o-transform: rotate(7deg);
			transform: rotate(7deg);
			
		}
		.rotate-right{
			-webkit-transform: rotate(-7deg);
			-ms-transform: rotate(-7deg);
			-o-transform: rotate(-7deg);
			transform: rotate(-7deg);
			
		}
		 div img:hover{  
                transform: scale(1.4);  
            }  
	</style>
</head>
	<div id="imglist">
		<div class="pol rotate-left"><img src="2.webp" alt=""></div>
		<div class="pol rotate-right"><img src="3.webp" alt=""></div>
		<div class="pol rotate-left"><img src="4.webp" alt=""></div>
		<div class="pol rotate-right"><img src="5.webp" alt=""></div>
	</div>
</body>
</html>

在这里插入图片描述

木头科技

关注

29
点赞
踩
168

收藏

觉得还不错? 一键收藏
打赏
0
评论
网页设计实现三个页面的跳转，有文字、图片和超链接

网页设计实现三个页面的跳转，有文字、图片和超链接直接来干活吧，哈哈可作为摸板一、实现效果二、源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style tyle="html"> img{ width: 300px; height: 200px; }
复制链接

扫一扫