网页设计实现三个页面的跳转,有文字、图片和超链接
直接来干货吧,哈哈
可作为摸板
一、实现效果
二、源代码
<!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>