🎉
不定期分享源码,关注不丢失哦
文章目录
- 一、作品介绍
- 二、作品演示
- 三、代码目录
- 四、网站代码
- 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%;
}
五、源码获取
🥇 ~ 关注我,点赞博文~
每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]
三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧