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

直接来干货吧，哈哈

可作为摸板

一、实现效果

二、源代码

<!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>

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

网页设计：运用html与css实现水平居中、文字图片重叠混排
每次要写html的时候,总把之前很基础的东西忘了,搞得几乎每次都要现场去网上翻资料熟悉回一些基本操作... 今天写这篇文章就是想一劳永逸的解决问题,也希望顺便给阅读的网友提供一些帮助. 先看成品: 其 ...
DW静态网页设计与制作 JavaScript大作业 HTML静态网页作业——海贼王主题网页设计制作6个页面(HTML+CSS)
HTML静态网页作业--海贼王主题网页设计制作6个页面(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面)
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
HTML5期末大作业：中国传统节日网页设计——端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码学生网页课程设计期末作业下载
HTML5期末大作业:中国传统节日网站设计--端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作 ...
网页设计（三）——DIV+CSS布局2
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作...
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
网页设计实验三（超链接与多媒体文件应用）
网页设计实验三一设计简易灯箱画廊二设计支持音频.视频播放的网页三设计简易网站导航四设计新生课程简介五设计中国名牌大学简介页面 +++点击资源索引[查看其它实验]+++ 一设计简易 ...
html网页大赛小组作品,ACCPT183班HTML网页设计大赛：小页面，大精彩！
原标题:ACCPT183班HTML网页设计大赛:小页面,大精彩! 不会动手的IT工程师不是好的IT工程师!实践出真知,北大青鸟深圳嘉华学校定期举办各类知识竞赛,一是为了提高学生的综合能力,二是为了让学 ...
CSS之Responsive网页设计的三个特性
Responsive网页设计无疑是网页设计中的一个热门话题.某种程度上,他将是一个最受欢迎的网页设计概念,因为随着网站用户日渐多样化的访问方法,比如说"iPad"."iP ...

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

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

一、实现效果

二、源代码

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

最新文章

热门文章