HTML静态网页成品作业(HTML+CSS)——原神介绍设计制作(4个页面)

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

文章目录


一、作品介绍

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

二、作品演示




三、代码目录

四、网站代码

HTML部分代码

c 复制代码
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>原神首页</title>
	<link rel="stylesheet" href="./css/css.css">
</head>
<body>
	
	
	
	<main>
		
		<header>
			<img src="./img/header_img.jpg" alt="" id="header_img">
		</header>
		
		
		<section class="f">
			<aside>
				<ul>
					<li class="t"><a href="index.html">游戏首页</a></li>
					<li><a href="youxijianjie.html">游戏简介</a></li>
					<li><a href="youxixitong.html">游戏系统</a></li>
					<li><a href="youxidenglu.html">游戏登录</a></li>
				</ul>
				<img src="./img/nav_bottom.jpg" id="nav_bottom" alt="">
			</aside>
			
			<section class="z">
				<header>基本信息</header>
				<table border="1">
					<tr>
						<th>中文名</th>
						<td>原神</td>
						<th>玩家人数</th>
						<td>1 人(联机时上限4人)</td>
					</tr>
					<tr>
						<th>原版名称</th>
						<td>原神Project</td>
						<th>游戏画面</th>
						<td>3D</td>
					</tr>
					<tr>
						<th>别    名</th>
						<td>Genshin Impact  、원신</td>
						<th>游戏引擎</th>
						<td>Unity</td>
					</tr>
					<tr>
						<th>游戏类型</th>
						<td>角色扮演</td>
						<th>最新版本</th>
						<td>3.7版本「决斗!召唤之巅!」</td>
					</tr>
					<tr>
						<th>地    区</th>
						<td>全球</td>
						<th>发行阶段</th>
						<td>正式版</td>
					</tr>
					<tr>
						<th>发行公司</th>
						<td>上海米哈游天命科技有限公司</td>
						<th>发行日期</th>
						<td>2020年9月28日</td>
					</tr>
				</table>
				
				
				<header>游戏新闻</header>
				
				<div class="news">
					<div class="news1" >
						<div class="news1bg">
							<div class="news11">
								<img src="./img/news1.jpg" alt="">
							</div>
							<div class="news12">
								《原神》「神铸赋形」活动祈愿现已开启
							</div>
						</div>
					</div>
					<div class="news1" >
						<div class="news1bg">
							<div class="news11">
								<img src="./img/news2.jpg" alt="">
							</div>
							<div class="news12">
								《原神》「华紫樱绯」祈愿活动祈愿现已开启
							</div>
						</div>
					</div>
					<div class="news1" >
						<div class="news1bg">
						<div class="news11">
							<img src="./img/news3.jpg" alt="">
						</div>
						<div class="news12">
							《原神》「焰色天河」活动祈愿现已开启
						</div>
						</div>
					</div>
				</div>
				
			</section>
			<div style="clear: both;"></div>
		</section>
		
		<footer>原神</footer>
	</main>
	
</body>
</html>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!

🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。

💙2.想要获取本文源码,点击前往吧

相关推荐
吞掉星星的鲸鱼38 分钟前
使用高德api实现天气查询
前端·javascript·css
lilye6641 分钟前
程序化广告行业(55/89):DMP与DSP对接及数据统计原理剖析
java·服务器·前端
hello_simon2 小时前
在线小白工具,PPT转PDF支持多种热门工具,支持批量转换,操作简单,高效适合各种需求
pdf·html·powerpoint·excel·pdf转html·excel转pdf格式
zhougl9963 小时前
html处理Base文件流
linux·前端·html
花花鱼3 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_3 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo4 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之6 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端6 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡6 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript