仿原神官网web作业|前端期末作业，HTML+CSS+JS

屠屠850

已于 2023-07-28 18:21:33 修改

阅读量804

点赞数 5

分类专栏：前端文章标签：前端 html css javascript 开发语言

于 2023-07-28 16:30:55 首次发布

本文链接：https://blog.csdn.net/qq_61636975/article/details/131982521

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、效果展示

主页面：

新闻资讯页面：

左侧为一个轮播图（有小圆点可以通过点击进行切换图片），右边为一个超链接的框（可以点击跳转）

角色卡片页面：

用户登录页面：

本人就是很少女心！粉粉的真好看！

代码框架：

二、代码展示

主页面：

HTML代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>主页面</title>
		<link href="css/index.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="js/index.js"></script>
	</head>
	<body>
		<!-- 页面一 -->
<div class="poster">
	<!-- 头部导航栏 -->
	<div class="header_bar">
		<!-- 头部左边，logo -->
		<div class="header_left">
			<!-- 音乐logo -->
			<div class="musicLogo">
				<a href="###">
					<!--导入音乐-->
					<audio id="music" autoplay="autoplay" loop="loop" src="music/ROSÉ - On The Ground.mp3"></audio>
					<!--导入图标-->
					<img src="img/MusicLogo.png" id="musicico" onclick="musiccc()">
				</a>
			</div>
			<!-- 原神logo -->
			<div class="GenshinLogo">
				<img src="img/Genshin.png"/>
			</div>
		</div>

		<!-- 横向导航栏 -->
		<div class="header_navbar">
			<ul>
				<li>
					<a href="index.html" target="_self">首&nbsp;页</a>
				</li>
				<li>
					<a href="news coe.html" target="_blank">新&nbsp;闻</a>						
				</li>
				<li>
					<a href="person.html" target="_blank">角&nbsp;色</a>
				</li>
				<li>
					<a href="city code.html" target="_blank">世&nbsp;界</a>
				</li>
				<li>
					<a href="https://ys.mihoyo.com/main/manga" target="_blank">漫&nbsp;画</a>
				</li>
				<li>
					<a href="https://www.miyoushe.com/ys/" target="_blank">社&nbsp;区</a>
				</li>
			</ul>
		</div>
		
		<!-- 头部右边 -->
		<div class="header_right">
			<!-- 成长关爱系统 -->
			<a href="###" class="header_cs">
				<span>成长关爱系统</span>
				<img src="img/aixin.png"/>
			</a>
			
			<!-- 登录 -->
			<a href="login.html" class="header_login" target="_blank">
				<span>登&nbsp;录</span>
				<img src="img/loginLogo.png"/>
			</a>
		</div>
	</div>
	
	<!-- 页面一的背景 -->
	<div id="background1" style="height: 1920px; height: 968px;">
		<video id="bg" poster="img/bg1.jpg" loop="loop" muted="muted" autoplay width="1920px" height="1080px">
			<source src="video/bg1.mp4" type="video/mp4"/>
		</video>
	</div>
	
	<!-- 底部标志 -->
	<div class="poster_sign">
		<!-- 播放标志 -->
		<div class="poster_video">
			<button class="poster_video_button">
			</button>
		</div>
		
		<!-- 12+ 标志 -->
		<div class="poster_badge">
			<img src="img/posterBadge.png"/>
		</div>
		
		<!-- 下载标志 -->
		<div class="download_logo">
			<!-- 二维码 -->
			<div class="Genshin_qr">
				<img src="img/Genshin_qrCode.png" class="Genshin_qr_code"/>
				<img src="img/Genshin_qr.jfif" class="Genshin_qr_icon"/>
			</div>
			
			<!-- PS4, ios -->
			<div class="download_pc_group">
				<a href="###">
					<img src="img/download_pc_ps.png" alt="ps4"/>
				</a>
				
				<a href="###">
					<img src="img/download_pc_ios.png" alt="ios"/>
				</a>
			</div>
			
			<!-- taptap, android -->
			<div class="download_pc_group">
				<a href="###">
					<img src="img/download_pc_taptap.png" alt="taptap"/>
				</a>
				<a href="###">
					<img src="img/download_pc_android.png" alt="android"/>
				</a>
			</div>
			
			<div class="download_pc_image">
				<a href="###">
					<img src="img/download_pc_image.png" alt="pc"/>
				</a>
			</div>
		</div>
	</div>
	
</div>

	</body>
</html>

CSS代码如下：

* {
	margin: 0;
	padding: 0;
}

body {
	overflow-x: hidden;
}

/* page1 :start*/
.poster {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: relative;
}


/* 头部栏 :start */
.header_bar {
	background-color: rgba(17, 17, 17, 0.75);
	display: inline-block;
	position: absolute;
	height: 66px;
	width: 1920px;
	z-index: 999;
}

/* 头部导航栏左侧 */
.header_left {
	display: flex;
	float: left;
	width: 300px;
}

/* 音乐Logo */
.musicLogo {
	display: flex;
	align-items: center;
	height: 66px;
	position: relative;
	left: 80px;
}

/* 音乐播放和暂停 */
img#musicico{
	animation-name: music; //这个名称是下方的动画名称
	animation-timing-function: linear;  //linear代表均速旋转
	animation-duration: 3s;  //3秒旋转完一圈
	animation-iteration-count: infinite; //旋转无数次
}

/* 实现动画的旋转 */
@keyframes music{
	0%{
		transform: rotate(0deg);
	}
	50%{
		transform: rotate(180deg);
	}
	100%{
		transform: rotate(365deg);
	}
}

.musicLogo a {
	padding: 0;
}

.musicLogo img {
	height: 30px;
	width: 30px;
}

/* 原神Logo */
.GenshinLogo {
	display: inline-block;
}

/* 头部导航栏 nav*/
.header_navbar {
	float: left;
	display: inline-block;
	height: 66px;
	line-height: 66px;
	text-indent: 20px;
}

/* 头部导航栏右侧 */
.header_right {
	position: absolute;
    right: 30px;
    height: 100%;
    display: flex;
    align-items: center;
}

/* 头部导航栏右侧标签 a 动画特效 */
.header_right a:hover {
	opacity: 1;
}

/* 成长关爱系统 */
.header_cs {
	margin-right: 20px;
	padding: 0px;
	display: flex;
	align-items: center;
}

/* 成长关爱系统图像 */
.header_cs img {
	margin-left: 18px;
	width: 27px;
	height: 27px;
	opacity: 0.6;
}

/* 头部导航栏右侧登录 */
.header_login {
	margin-right: 20px;
	padding: 0px;
	display: flex;
	align-items: center;
}

/* 右侧登录Logo */
.header_login img {
	margin-left: 18px;
	width: 27px;
	height: 27px;
	opacity: 0.6;
}


ul {
	list-style: none;
	overflow: hidden;
}

ul li {
	float: left
}

a {
	font-size: 17px;
	color: #ccc;
	text-decoration: none;
	padding: 22px 16px;
	opacity: 0.8;
}

/* 导航栏窗口字体鼠标接触特效 */
.header_navbar a:hover {
	text-shadow: 0 0 20px skyblue,0 0 20px skyblue,0 0 20px skyblue,0 0 20px skyblue;
	color: white;
}
/* 头部栏 :end */




.poster_sign {
	display: flex;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	align-items: center;
	justify-content: center;   /* 居中排列 */
	flex-direction: column;    /* 灵活的项目将垂直显示，正如一个列一样。 */
	box-sizing: border-box;
}


/* page1的播放按钮 :start*/
.poster_video {
	position: absolute;
	bottom: 200px;
	width: 356px;
	height: 76px;
	background: url("../img/poster_video_decoration.png") no-repeat center center;
	margin-bottom: 20px;
}

.poster_video_button {
	position: relative;
	height: 48px;
	width: 48px;
	border-radius: 50%;
	border: 0;
	display: block;
	cursor: pointer;
	left: 154px;
	bottom: -14px;
}

.poster_video_button::before {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	background: url("../img/poster_button_video.png");
	width: 28px;
	height: 28px;
	transform: translate(-50%, -50%);	/* 2D转换 向左上移动*/
	background-position: center top;
}

.poster_video_button:hover {
	opacity: 0.5;
}
/* page1的播放按钮 :end*/


.poster_badge {
	position: absolute;
	width: 100px;
	bottom: 20px;
	left: 20px;
	cursor: pointer;
}

.poster_badge img {
	width: 100%;
}



/* 下载标志 :start*/
.download_logo {
	display: flex;
	position: absolute;
	width: 540px;
	height: 125px;
	bottom: 70px;
	align-items: center;
}

.Genshin_qr {
	height: 102px;
	width: 102px;
	position: relative;
}
/* 二维码上的派蒙图片 */
.Genshin_qr_icon {
	position: relative;
	left: 50%;
	top: -66px;
	width: 26px;
	height: 26px;
	border: 2px solid gray;
	border-radius: 4px;
	transform: translateX(-50%);
}
/* 二维码 */
.Genshin_qr_code {
	width: 100%;
	display: block;
}

/* 下载路径组（ps4和ios一组，TapTap和Android一组） */
.download_pc_group {
	display: flex;
	height: 112px;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 3px;
}

.download_pc_group a {
	padding: 0px;
	width: 160px;
	height: 52px;
}

.download_pc_group a img {
	width: 100%;
	height: 100%;
}

.download_pc_group a img:hover {
	opacity: 0.8;
}

/* PC 下载路径 */
.download_pc_image {
	width: 111px;
	height: 111px;
}

.download_pc_image a {
	padding: 0px;
}

.download_pc_image a img:hover {
	opacity: 0.8;
}