首页 前端知识 HTML静态网页成品作业(HTML CSS)——古诗词网设计制作(5个页面)

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

2024-05-19 09:05:18 前端知识 前端哥 98 758 我要收藏

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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.想要获取本文源码,点击前往吧

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8890.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!