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

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

直接来干货吧,哈哈

可作为摸板

一、实现效果

网页设计实现三个页面的跳转,有文字、图片和超链接_第1张图片

网页设计实现三个页面的跳转,有文字、图片和超链接_第2张图片
网页设计实现三个页面的跳转,有文字、图片和超链接_第3张图片

二、源代码


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<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>

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<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>

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<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>

网页设计实现三个页面的跳转,有文字、图片和超链接_第4张图片

你可能感兴趣的:(网页设计,html)