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

news2024/11/18 1:35:24

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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.coloradmin.cn/o/1499231.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何恢复未保存的Word文档

Microsoft Word 是世界上最流行的软件之一。它不仅是各行业提高生产力的利器&#xff0c;而且广泛应用于我们的日常生活中。因此&#xff0c;当您发现自己工作了数小时和数天的word doc文档被意外未保存、删除或丢失时&#xff0c;大多数人可能都知道恐慌和绝望。 今天我们将向…

HelpLook VS GitBook:知识库优劣详解

在信息爆炸的时代&#xff0c;企业要保持竞争优势&#xff0c;就必须善于管理和利用内部的知识资产。企业知识库作为一种集中存储和共享知识的工具&#xff0c;正在成为现代企业不可或缺的一部分。 HelpLook和Gitbook是提供专业知识库的两个平台&#xff0c;也被大众熟知。它们…

Spring Boot 配置热部署

前言 对于 Spring Boot 项目之中, 在刚开始学习的时候, 每当代码进行变动的时候, 想要生效那就必须要手动重启. 为什么要重启呢 ? 原因在于写的代码是依靠运行之后的 class 文件运行的, 当我们的代码更新以后, 如果不去手动重启, 那么就无法生成新的 class 文件, 执行的就是旧…

Python与FPGA——图像锐化

文章目录 前言一、图像锐化二、Python robert锐化三、Python sobel锐化四、Python laplacian锐化五、FPGA sobel锐化总结 前言 在增强图像之前一般会先对图像进行平滑处理以减少或消除噪声&#xff0c;图像的能量主要集中在低频部分&#xff0c;而噪声和图像边缘信息的能量主要…

结构体:位段(C语言进阶)(二)

目录 前言 2、位段 2.1 什么是位段 2.2 位段的内存分配 2.3 位段的跨平台问题 2.4 位段的应用 总结 前言 C语言除了有其内置类型&#xff0c;还有自定义类型。因为在实际运用中&#xff0c;我们可能会遇到一类数据&#xff0c;它的内容是由多种数据组成的&#xff0c;例如&…

27.基于springboot + vue实现的前后端分离-网上租赁交易系统(项目 + 论文)

项目介绍 本课题是根据用户的需要以及网络的优势建立的一个基于Spring Boot的网上租贸系统&#xff0c;来满足用户网络商品租赁的需求。本网上租贸系统应用Java技术&#xff0c;MYSQL数据库存储数据&#xff0c;基于Spring Boot框架开发。在网站的整个开发过程中&#xff0c;首…

centos离线安装 k8s (实操可用)

全部安装包rpm下载&#xff08;已整理好k8s和docker&#xff09;&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1ATv8BPijhvIKWz4hMnkx6Q?pwdt5db 提取码&#xff1a;t5db 将文件下载以后&#xff0c;解压到服务器 #执行所有docker-rpm包 yum -y localinstall *.rpm…

【你也能从零基础学会网站开发】Web建站之HTML+CSS入门篇 CSS层叠样式表语法基础

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;web开发者、设计师、技术分享 &#x1f40b; 希望大家多多支持, 我们一起学习和进步&#xff01; &#x1f3c5; 欢迎评论 ❤️点赞&#x1f4ac;评论 &#x1f4c2;收藏 &#x1f4c2;加关注 什么是CSS?…

【机器学习】详解正则化思想

我们的生活当中真正有意义或者有价值的部分可以概括为两句话&#xff1a;一句话是&#xff1a;弄清楚某个东西是怎么一回事&#xff0c;另一句话是&#xff0c;弄清楚某个东西是怎么一回事。头一句话&#xff0c;我们弄清楚的那个东西对于我们而言是未知的&#xff0c;但是已经…

(学习总结)如何使用ChatGPT API训练自定义知识库

第一步&#xff1a; 安装OpenAI、GPT Index、PyPDF2和Gradio库 pip install openai pip install gpt_index pip install PyPDF2 pip install gradio 第二步&#xff1a;用VScode代码编辑器写app.py代码 记得替换api密钥 from llama_index import SimpleDirectoryReader, …

企智汇:引领企业项目管理的数字智能化管理系统工具!

随着数字化时代的来临&#xff0c;企业对项目管理的要求也日益增高。面对日益复杂的业务流程和海量数据&#xff0c;如何有效地管理项目、整合资源、优化流程、提高管理效率&#xff0c;成为了摆在企业面前的重要课题。在这样的背景下&#xff0c;专业做了10年项目管理系统的&a…

提高数字化处理质量和效率:重视OCR软件的识别准确率

在当今数字化时代&#xff0c;纸质文件的数字化处理变得尤为重要。而作为纸质文件数字化的关键工具之一&#xff0c;OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;软件的识别准确率对于将大量纸质文件转为Excel具有至关重要的地位。本文将…

Uninty 鼠标点击(摄像机发出射线-检测位置)

平面来触发碰撞&#xff0c;胶囊用红色材质方便观察。 脚本挂载到胶囊上方便操作。 目前实现的功能&#xff0c;鼠标左键点击&#xff0c;胶囊就移动到那个位置上。 using System.Collections; using System.Collections.Generic; using UnityEngine;public class c6 : MonoBe…

2024年AI辅助研发的技术革新与应用展望

文章目录 每日一句正能量前言AI辅助研发的技术进展全球AI应用呈现出百家争鸣、百花齐放态势&#xff0c;加速向各行各业渗透AI应用显著促进效率提升&#xff0c;“劳动替代低创造性脑力替代”正在加速形成 面临的挑战与机遇未来趋势预测后记 每日一句正能量 要理解这样的自己。…

智能部署之巅:Amazon SageMaker 引领机器学习革新

本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 亚马逊云科技开发者社区, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道。 &#xff08;全球 TMT 2023年12月6日讯&#xff09;亚马逊云科技在 2023 re:Invent 全…

IEEE投稿无法上传文件问题(An error has occurred.Please try again......)

投稿上传手稿出现&#xff1a; An error has occurred. Please try again. If the problem persists, please contact the Support Team for more information and instructions. The Support Teams contact information can be obtained by clicking the ‘Help’ link in the…

24/03/07总结

esayx: 贪吃蛇: #include "iostream" #include "cmath" #include "conio.h" #include "easyx.h" #include "time.h" #define NODE_WIDTH 40 using namespace std; typedef struct {int x;int y; }node; enum direction /…

融资项目——通过OpenFeign在分布式微服务框架中实现微服务的远程调用

1.OpenFeign配置 首先&#xff0c;在需要调用其他的微服务的微服务中引入相关依赖。&#xff08;大多数项目中各微服务需要互相调用&#xff0c;可以直接在每个微服务中引入依赖&#xff09; <!--服务调用--><dependency><groupId>org.springframework.clou…

非科班如何系统自学Python?

在数字化时代&#xff0c;Python如一位“全能选手”在编程语言的舞台上大放异彩&#xff0c;无论是数据科学、网站开发还是人工智能&#xff0c;它都能游刃有余地驾驭各种挑战。正因如此&#xff0c;越来越多的人渴望掌握这门兼具强大功能和优雅简洁的语言。 目录 引言 开始 …

pytorch(四、五)用pytorch实现线性回归和逻辑斯蒂回归(分类)

文章目录 线性回归代码过程准备数据设计模型设计构造函数与优化器训练过程训练代码和结果pytorch中的Linear层的底层原理&#xff08;个人喜欢&#xff0c;不用看&#xff09;普通矩阵乘法实现Linear层实现 回调机制 逻辑斯蒂回归模型损失函数代码和结果 线性回归 代码过程 训…