一、效果1展示
点击对应的古诗名，会跳转到对应的古诗部分
HTML代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现古诗跳转</title>
<style>
p{
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<p id="gsjs">古诗鉴赏</p>
<p>单击学习<a href="#libai">《静夜思》</a></p>
<p>单击学习<a href="#chunxiao">《春晓》</a></p>
<p>单击学习 <a href="#kezhi">《客至》</a></p>
<p>单击学习<a href="#xrjj">《夏日绝句》</a></p>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<p id="libai">《静夜思》</p>
<p>[唐]李白</p>
<p>床前明月光,</p>
<p>疑是地上霜。</p>
<p>举头望明月,</p>
<p>低头思地乡。</p>
<img src="libai.png" alt="李白" width="150px"><br>
<a href="#gsjs"">我要回顶部</a>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<p id="chunxiao">《春晓》</p>
<p>[唐]孟浩然</p>
<p>春眠不觉晓,</p>
<p>处处闻啼鸟。</p>
<p>夜来风雨声,</p>
<p>花落知多少。</p>
<img src="mhr.png" alt="孟浩然" width="150px"><br>
<a href="#gsjs"">我要回顶部</a>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<p id="kezhi">《客至》</p>
<p>[唐]杜甫</p>
<p>舍南舍北皆春水，但见群鸥日日来。</p>
<p>花径不曾缘客扫，蓬门今始为君开。</p>
<p>盘餐市远无兼味，樽酒家贫只旧酷。</p>
<p>肯与邻翁相对饮，隔篱呼取尽余杯。</p>
<img src="tf.png" alt="杜甫" width="150px"><br>
<a href="#gsjs"">我要回顶部</a>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<p id="xrjj">《夏日绝句》</p>
<p>[宋]李清照</p>
<p>生当作人杰,</p>
<p>死亦为鬼雄。</p>
<p>至今思项羽,</p>
<p>不肯过江东。</p>
<img src="lqz.png" alt="李清照" width="150px"><br>
<a href="#gsjs"">我要回顶部</a>
</body>
</html>二、效果2展示
点击对应的部分会跳到相应的小吃，锻炼锚链接
HTML代码展示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三大国民小吃相对势力分布</title>
<base href="#" target="_blank">
</head>
<body>
<img src="./map.jpg" alt="" width="500" usemap="#Map"/>
<map name="Map">
<area shape="poly" coords="145,99,63,190,91,221,159,201,201,155" href="https://baijiahao.baidu.com/s?id=1695203809518004961&wfr=spider&for=pc">
<area shape="poly" coords="204,156,260,167,291,157,302,150,307,137,330,128,346,125,356,123,351,111,333,109,333,96,345,88,354,82,361,71,359,62,367,58,380,74,386,77,392,87,386,97,376,111,371,123,373,137,375,151,370,157,358,164,343,169,327,161,312,176,307,180,291,188,277,198,276,210,278,218,264,230,262,238,255,240,247,230,233,234,228,240,221,234,214,229,207,242,215,250,216,257,214,269,206,271,201,275,193,278,182,282,171,277,155,280,147,276,125,266,107,255,88,242,91,232,100,226,110,223,129,213,147,213,159,211,167,209,174,200" href="./lzlm.html">
<area shape="poly" coords="379,54,385,55,390,61,405,88,422,106,429,115,449,109,446,118,438,136,430,144,423,156,415,164,390,174,377,182,369,189,365,186,368,181,361,178,357,178,348,186,339,191,342,195,344,200,350,203,361,198,368,204,369,209,360,212,357,216,354,228,358,234,364,245,363,249,356,251,352,255,345,258,336,261,328,259,323,252,306,240,298,234,285,234,283,238,270,246,269,252,266,259,265,262,262,269,259,277,252,288,255,297,260,304,242,312,233,317,224,311,209,299,220,282,221,273,221,264,222,253,230,244,245,236,254,239,270,232,281,213,289,190,311,191,320,175,327,170,334,168,347,168,357,168,375,154,377,138,376,122,384,100,389,91,390,86,382,68,371,59,370,56,370,53,375,50" href="https://baijiahao.baidu.com/s?id=1695203809518004961&wfr=spider&for=pc">
<area shape="poly" coords="269,259,284,249,292,241,299,236,318,250,330,263,357,258,370,251,373,256,369,271,357,280,344,295,327,309,312,314,297,318,296,328,299,337,292,338,282,338,289,330,290,325,283,322,279,321,268,316,265,304,262,295,262,287,261,279,267,267,268,264" href="https://baike.baidu.com/item/%E6%B2%99%E5%8E%BF%E5%B0%8F%E5%90%83/3311528?fr=aladdin">
</map>
</body>
</html>三、效果3展示
HTML代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 980px;
height: 350px;
background-color: #fff;
box-shadow:1px 1px 5px 1px #888 ;
}
</style>
</head>
<body>
<div>
<a href="https://baike.baidu.com/item/%E9%81%87%E8%A7%81%C2%B7%E7%92%80%E7%92%A8%E7%9A%84%E4%BD%A0/24256183?fr=aladdin" target="_blank"><img src="./img/1.png" alt=""></a>
<a href="https://baike.baidu.com/item/%E7%8B%AE%E5%AD%90%E5%B1%B1%E4%B8%8B%E7%9A%84%E6%95%85%E4%BA%8B" target="_blank"><img src="./img/2.png" alt=""></a>
<a href="https://v.qq.com/x/cover/mzc00200eykcej6/z0043i6hetz.html?n_version=2021&ptag=10523" target="_blank"><img src="./img/3.png" alt=""></a>
<a href="https://v.qq.com/x/cover/mzc00200xahwmw1/a0043q8zbrw.html?n_version=2021" target="_blank"><img src="./img/4.png" alt=""></a>
</div>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/46298.html
