HTML静态网页成品作业(HTML+CSS)——时空中的绘旅人网页设计制作(7个页面)

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

---

一、作品介绍

🏷️本套采用HTML+CSS，未使用Javacsript代码，共有4个页面。

二、作品演示

1、首页

2、子页1

3、子页2

4、子页3

5、子页4

6、子页5

7、子页6

三、代码目录

四、网站代码

HTML部分代码

		<div class="main">
			<div class="main_title">剧情简介</div>
			<div class="main_jieshao">
				<div class="main_jieshao_text">
					<p>
						《时空中的绘旅人》是由广州网易计算机系统有限公司制作发行的一款世界观基于“平行宇宙”概念的剧情恋爱手游。游戏由阿杰、夏磊、姜广涛、谢添天、赵路等声优全程配音，并邀请了国内外画手参与创作，该作于2020年10月23日正式公开测试。
					</p>
					<p>
						玩家扮演的是初入大学的美术系新生，一边是现实世界的温馨校园日常，一边是无意中被卷入异世的末日危机。平行的时空，相似的面孔，迥异的性格。这道关于“爱与拯救”的命题，等待玩家用画笔去描绘出各自的选择。
					</p>
					<p>
						曾经千门崩塌，支柱为之陨落。科技侧世界在探索演化和规律，神秘侧世界寻觅着古老的传承。从庇护的安宁之处醒来，踏上注定通往远方的旅途。你的选择带来的新的变化，也探索着关于未来的可能。最初启程时，内心的相信之物，是你注定守护的宝物.也是你最珍贵的力量。
					</p>
				</div>
				<div class="main_jieshao_img">
					<img src="./images/1.jpeg">
				</div>
			</div>
			<div class="main_title">游戏视频</div>
			<video width="100%" height="600"  poster="./images/fm.png" controls>
			  <source src="./video/1.mp4" type="video/mp4">
			</video>
		</div>

CSS部分代码

.w {
	width: 1260px;
	margin: 0 auto;
	background-color: aliceblue;
}
.header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: black;
}
.header a {
	color: #fff;
	display: inline-block;
	width: 180px;
	text-decoration: none;
	height: 50px;
	line-height: 50px;
	text-align: center;
}
.header a:hover,.header a.t {
	background-color: #fff;
	color: #000;
}
.banner img {
	width: 100%;
	vertical-align: middle;
}

五、源码获取

🥇 ~ 关注我，点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
💙2.想要获取本文源码，点击前往吧