HTML静态网页成品作业(HTML+CSS)——古诗词网设计制作(5个页面)

🎉不定期分享源码，关注不丢失哦

文章目录

一、作品介绍
二、作品演示
三、代码目录
四、网站代码
- HTML部分代码
- CSS部分代码
五、源码获取

一、作品介绍

🏷️本套采用HTML+CSS，未使用Javacsript代码，共有5个页面。
🏷️想要获取本文源码，点击前往吧

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>古诗词</title><link rel="stylesheet" href="./css/style.css">
</head>
<body><div class="header"><div class="box"><h2>古诗词</h2><ul><li><a href="index.html" class="on">首页</a></li><li><a href="shiwen.html">诗文</a></li><li><a href="mingju.html">名句</a></li><li><a href="shiren.html">诗人</a></li><li><a href="guji.html">古籍</a></li></ul></div></div><div class="banner"><img src="./images/banner.jpg" alt=""></div><div class="main"><div class="box"><h2 class="main_title">今日推荐</h2><div class="tuijian"><div class="tuijian_i"><h4>虞美人</h4><div>作者：李煜</div><p>春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。</p><p>雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流。</p></div><div class="tuijian_i"><h4>破阵子·为陈同甫赋壮词以寄之</h4><div>作者：辛弃疾</div><p>醉里挑灯看剑，梦回吹角连营。八百里分麾下炙，五十弦翻塞外声，沙场秋点兵。</p><p>马作的卢飞快，弓如霹雳弦惊。了却君王天下事，赢得生前身后名。可怜白发生！</p></div><div class="tuijian_i"><h4>闻官军收河南河北</h4><div>作者：杜甫</div><p>剑外忽传收蓟北，初闻涕泪满衣裳。却看妻子愁何在，漫卷诗书喜欲狂。</p><p>白日放歌须纵酒，青春作伴好还乡。即从巴峡穿巫峡，便下襄阳向洛阳。</p></div></div><div class="main2"><div class="main2_remen"><h2 class="main_title">热门诗词</h2><div class="remen_i"><h4>水调歌头</h4><div>作者：苏轼</div><p>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</p><p>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p></div><div class="remen_i"><h4>天净沙·秋思</h4><div>作者：马致远</div><p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马。夕阳西下，断肠人在天涯。</p></div><div class="remen_i"><h4>游子吟</h4><div>作者：孟郊</div><p>慈母手中线，游子身上衣。临行密密缝，意恐迟迟归。谁言寸草心，报得三春晖。</p></div><div class="remen_i"><h4>望月怀远</h4><div>作者：张九龄</div><p>海上生明月，天涯共此时。情人怨遥夜，竟夕起相思。灭烛怜光满，披衣觉露滋。不堪盈手赠，还寝梦佳期。</p></div><div class="remen_i"><h4>春望</h4><div>作者：杜甫</div><p>国破山河在，城春草木深。感时花溅泪，恨别鸟惊心。烽火连三月，家书抵万金。白头搔更短，浑欲不胜簪。</p></div></div><div class="main2_shiren"><h2 class="main_title">名人推荐</h2><div class="shiren"><div class="shiren_i"><img src="./images/1.jpg" alt=""><div>李白</div></div><div class="shiren_i"><img src="./images/2.jpg" alt=""><div>杜甫</div></div><div class="shiren_i"><img src="./images/3.jpg" alt=""><div>苏轼</div></div><div class="shiren_i"><img src="./images/4.jpg" alt=""><div>白居易</div></div><div class="shiren_i"><img src="./images/5.jpg" alt=""><div>孟浩然</div></div><div class="shiren_i"><img src="./images/6.jpg" alt=""><div>欧阳修</div></div></div></div></div></div></div><div class="footer">©copyright 古诗词网 版权所有</div>
</body>
</html>

CSS部分代码

* {padding: 0;margin: 0;
}
li {list-style: none;
}
body {background-color:#D3D2B9;
}
.box {width: 1200px;margin: 0 auto;
}
.header {position: absolute;top: 0;left: 0;width: 100%;background-color: rgba(255, 255, 255, 0.6);
}
.header .box {display: flex;align-items: center;justify-content: space-between;height: 65px;
}
.header ul {display: flex;align-items: center;
}
.header ul li {margin-left: 55px;
}
.header ul li a {color: #553516;text-decoration: none;font-weight: bold;
}
.header ul li a:hover , .header ul li a.on {border-bottom: 3px solid #553516
}
.banner {width: 100%;height: 650px;display: inline-block;overflow: hidden;
}
.banner img {object-fit: cover;width: 100%;height: 100%;
}