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

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

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

二、作品演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<!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>2020928</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.想要获取本文源码,点击前往吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/439063.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

CrySiS勒索病毒最新变种来袭,加密后缀为kharma

CrySiS勒索病毒&#xff0c;又称Dharma&#xff0c;首次出现是在2016年&#xff0c;2017年5月此勒索病毒万能密钥被公布之后&#xff0c;之前的样本可以解密&#xff0c;导致此勒索病毒曾消失了一段时间&#xff0c;不过随后又马上出现了它的一款最新的变种样本&#xff0c;加密…

H12-821_145

145. OPSF邻接关系建立的过程中需要使用不同的报文&#xff0c;那么请分别将以下各个状态和该状态使用的报文联系起来。 答案&#xff1a; 注释&#xff1a; ExStart状态通过DD报文进行主从选举。 2-way状态通过hello报文知道哪些邻居看到了自己。 Loading状态通过LSR/LSU报文同…

视觉和GPT再碰火花!CVPR`24 | RegionGPT:面向复杂区域理解的VLM(港大英伟达)

文章链接&#xff1a;https://arxiv.org/pdf/2403.02330 视觉语言模型&#xff08;VLMs&#xff09;通过将大语言模型&#xff08;LLMs&#xff09;与图像文本对集成&#xff0c;经历了快速的发展&#xff0c;但由于视觉编码器的空间意识有限以及使用缺乏详细的区域特定字幕的…

从数据到智能:探讨大数据在AI领域的核心作用

前言 大数据和人工智能已经成为当今社会的两大热门话题。它们之间究竟有何关系&#xff1f;又如何在各个领域发挥着重要作用&#xff1f; 概念区别与联系 一、大数据与人工智能的基本概念 大数据&#xff0c;顾名思义&#xff0c;指的是海量的、类型繁多的数据集合。这些数据…

20240304-2-计算机网络

计算机网络 知识体系 Questions 1.计算机网络分层的优点和缺点 优点 各层之间是独立的&#xff1b;灵活性好&#xff1b;结构上可分割开&#xff1b;易于实现和维护&#xff1b;能促进标准化工作。 缺点&#xff1a; 降低效率&#xff1b;有些功能会在不同的层次中重复出现&…

软考 系统分析师系列知识点之系统性能评估(5)

接前一篇文章&#xff1a;软考 系统分析师系列知识点之系统性能评估&#xff08;4&#xff09; 所属章节&#xff1a; 第6章. 系统配置与性能评价 第8节. 系统性能评估 相关试题 1. 以下关于系统型嫩评估方法的描述&#xff0c;错误的是&#xff08; &#xff09;。 A. 指令…

ChatGPT/GPT4科研技术应用与AI绘图(包含Claude3、Gemini、Sora、GPTs中大模型的最新技术)

2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…

51-26 DriveMLM: 多模态大型语言模型与自动驾驶行为规划状态对齐

DriveMLM是来自上海AILab、港中文、商汤、斯坦福、南京大学和清华大学的工作。该模型使用各种传感器(如相机、激光雷达)、驾驶规则和用户指令作为输入&#xff0c;采用多模态LLM对AD系统的行为规划进行建模&#xff0c;做出驾驶决策并提供解释。该模型可以用于闭环自动驾驶&…

Dubbo基本知识

Dubbo 工作原理 工作原理分 10 层&#xff1a; 第一层&#xff1a;service 层&#xff0c;接口层&#xff0c;给服务提供者和消费者来实现的&#xff08;留给开发人员来实现&#xff09;&#xff1b;第二层&#xff1a;config 层&#xff0c;配置层&#xff0c;主要是对 Dubb…

利用tree命令自动保存文件层级结构

tree命令的使用 为了将上图左侧的文件目录&#xff0c;生成上图右侧中的文件夹结构列表&#xff0c;保存在txt中&#xff0c;使用了如下cmd命令&#xff1a; C:\armadillo-12.8.0>tree .>list.txt以上tree命令分为3部分&#xff1a; tree 命令. 在当前目录>list.tx…

✅ Windows11 系统 I 卡独显 A770 安装 深度学习 Pytorch 环境

&#x1f4cb; 文献参考 这里非常感谢知乎上的 ‘丢丢’ 的[**Windows系统下英特尔独显Pytorch的历程**] 为我提供了一开始的 I 卡安装想法&#xff01;但是文中并未介绍如何进行额外的环境变量操作问题&#xff0c;导致很多软件直接安装至系统盘&#xff0c;占用系统盘空间&am…

HTML静态网页成品作业(HTML+CSS)——美食企业介绍设计制作(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…

前端布局方式及其优缺点

前端布局方式多种多样&#xff0c;每种布局方式都有其特定的应用场景、特性和优缺点。以下是一些常见的前端布局方式及其特点和优缺点&#xff1a; 静态布局&#xff1a; 特性&#xff1a;元素的尺寸使用绝对单位&#xff08;如px&#xff09;进行定义&#xff0c;不会随浏览器…

神经网络必备基础

和神经网络介绍相比&#xff0c;本文更侧重于程序实现 理解Keras中的组件 Keras是一个高级的神经网络API&#xff0c;用Python实现的&#xff0c;并且可以运行在TensorFlow、CNTK或Theano等后台之上。 model.compile() compile(self, optimizer, loss, metricsNone, ...) 该…

Python刘诗诗

写在前面 刘诗诗在电视剧《一念关山》中饰演了女主角任如意&#xff0c;这是一个极具魅力的女性角色&#xff0c;她既是一位有着高超武艺和智慧的女侠士&#xff0c;也曾经是安国朱衣卫前左使&#xff0c;身怀绝技且性格坚韧不屈。剧中&#xff0c;任如意因不满于朱衣卫的暴行…

【Spring】Spring状态机

1.什么是状态机 (1). 什么是状态 先来解释什么是“状态”&#xff08; State &#xff09;。现实事物是有不同状态的&#xff0c;例如一个自动门&#xff0c;就有 open 和 closed 两种状态。我们通常所说的状态机是有限状态机&#xff0c;也就是被描述的事物的状态的数量是有…

vue页面刷新问题:返回之前打开的页面,走了create方法(解决)

vue页面刷新问题&#xff1a;返回之前打开的页面&#xff0c;走了create方法&#xff08;解决&#xff09; 直接上图&#xff0c; 我们在开发的时候经常会复制粘贴&#xff0c;导致vue文件的name没有及时修改 我们需要保证name和浏览器的地址一致&#xff0c;这样才能实现缓…

2024 PhpStorm激活,分享几个PhpStorm激活的方案

文章目录 PhpStorm 公司简介我这边使用PhpStorm的理由PhpStorm 2023.3 最新变化AI Assistant 预览阶段结束 正式版基于 LLM 的代码补全测试代码生成编辑器内代码生成控制台中基于 AI 的错误解释 Pest 更新PHP 8.3 支持#[\Override] 特性新的 json_validate() 函数类型化类常量弃…

OpenCascade源码剖析:Standard_Transient根类

Standard_Transient是OCCT继承体系最顶层的根类&#xff0c;Transient在编程中具有一定的语义&#xff0c;与Persistent相对应&#xff0c;通常用于描述数据的持久性或持久性存储。 Transient&#xff0c;意味着数据是临时的或瞬态的&#xff0c;它们不会被持久化保存&#xf…

【C语言基础】:深入理解指针(三)

文章目录 深入理解指针一、冒泡排序二、二级指针三、指针数组3.1 指针数组模拟二维数组 四、字符指针变量五、数组指针变量5.1 数组指针变量是什么&#xff1f;5.2 数组指针变量的初始化 六、二维数组传参的本质 深入理解指针 指针系列回顾&#xff1a; 【C语言基础】&#xf…