网页设计实现三个页面的跳转，有文字、图片和超链接
发布时间：2023-05-08 10:00
网页设计实现三个页面的跳转，有文字、图片和超链接
直接来干货吧，哈哈
可作为摸板
一、实现效果
二、源代码
<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>
