【免费】HTML+CSS仿原神官网源码_原神官网首页html制作资源-CSDN文库

共36个文件

png：19个

jpg：11个

html：2个

需积分: 0 133 浏览量更新于2023-06-21 8 收藏 22.82MB ZIP 举报

HTML 和 CSS 是构建网页的基本技术，本项目是一个利用这两者实现的原神官网前端页面的复刻版，旨在提供一个学习实践的平台。通过分析这个项目，我们可以深入了解 HTML 结构和 CSS 样式的设计原理。 `index.html` 是整个网站的入口文件，它包含了网站的主要结构和内容。HTML（HyperText Markup Language）用于定义网页的结构，包括标题、段落、链接、图像等元素。在 `index.html` 中，可以看到 `<head>` 部分通常包含页面的元信息，如字符集设置（`<meta charset="UTF-8">`）、页面标题（`<title>`）以及引入外部样式表（`<link rel="stylesheet" href="css/main.css">`）。而 `<body>` 部分则是网页的主体，包含各种 HTML 元素，如导航栏、轮播图、内容区域等。原神轮播图在 `原神轮播图.html` 文件中，展示了如何使用 HTML 和 CSS 创建动态效果。轮播图一般使用 `<div>` 元素作为容器，内含多个 `<img>` 图片元素，通过 JavaScript 或 CSS 动画实现切换。CSS 可以设置图片的布局、过渡效果以及隐藏和显示状态。同时，可能还会引入 JavaScript 库，如 jQuery，来增强交互性，例如自动播放、触摸滑动等。 `img.zip` 文件包含了所有图片资源，这些图片可能用于背景、图标、按钮或其他视觉元素。解压后放入 `img` 文件夹，HTML 代码通过 `<img src="img/xxx.png">` 引入这些图片。图片优化是网页性能的关键，应考虑压缩大小、选择合适的格式（JPEG、PNG、SVG 等）以及利用 CSS 背景图像来减少 HTTP 请求。 `js` 文件夹可能包含 JavaScript 代码，用于增加页面的动态功能，比如轮播图的切换、表单验证、响应式布局等。JavaScript 可以通过事件监听（如 `onclick`、`onmouseover`）来响应用户的操作，也可以与服务器进行交互，实现 AJAX 功能。在这个项目中，JavaScript 可能会与 CSS 配合，改变元素的样式或动画效果。 `css` 文件夹中的 `main.css` 是整个项目的样式表，定义了各元素的颜色、字体、布局等样式。CSS（Cascading Style Sheets）让网页具有美观的外观和布局。这里可能包含对 HTML 元素的选择器（如 `.class`、`#id`、`tag`），属性（如 `color`、`font-size`、`background`）以及布局规则（如 `display`、`flexbox`、`grid`）。CSS 也支持媒体查询 (`@media`)，用于实现响应式设计，使网页适应不同设备的屏幕尺寸。这个项目涵盖了 HTML 结构设计、CSS 样式编写、JavaScript 交互实现和资源管理等多个方面，是学习 Web 开发的良好实践案例。通过深入研究和模仿这个项目，你可以提升自己的前端开发技能，理解网页的构建原理，并且掌握如何创建一个具有互动性和响应性的网页。

收起资源包目录

原神官网实战.zip （36个子文件）

原神轮播图.html 4KB

img.zip 4.53MB

img

news2.jpg 771KB

city1.jpg 82KB

city4.jpg 256KB

download_pc_image.png 3KB

city_end.jpg 47KB

loginLogo.png 1KB

person4.png 196KB

download_pc_android.png 3KB

news3.jpg 965KB

bg1.jpg 226KB

person2.png 207KB

Genshin_qr.jfif 3KB

download_pc_ps.png 3KB

poster_button_video.png 1KB

city2.jpg 98KB

news1.jpg 465KB

person3.png 142KB

poster_video_decoration.png 7KB

city3.jpg 362KB

city_dc.png 3KB

news4.jpg 598KB

aixin.png 2KB

download_pc_taptap.png 3KB

download_pc_ios.png 5KB

person1.png 38KB

Genshin_qrCode.png 3KB

bg2.jpg 155KB

header_decoration.png 1KB

Genshin.png 12KB

MusicLogo.png 3KB

posterBadge.png 5KB

css

index.css 9KB

index.html 7KB

video

bg1.mp4 13.75MB

资源推荐

资源预览

资源评论

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>原神官网</title> <link rel="stylesheet" href="css/index.css"/> </head> <body>  <div class="poster">  <div class="header_bar">  <div class="header_left">  <div class="musicLogo"> <a href="###"> <img src="img/MusicLogo.png"> </a> </div>  <div class="GenshinLogo"> <img src="img/Genshin.png"/> </div> </div>  <div class="header_navbar"> <ul> <li> <a href="###">首 页</a> </li> <li> <a href="###">新 闻</a> </li> <li> <a href="###">角 色</a> </li> <li> <a href="###">世 界</a> </li> <li> <a href="###">漫 画</a> </li> <li> <a href="###">社 区</a> </li> </ul> </div>  <div class="header_right">  <a href="###" class="header_cs"> <span>成长关爱系统</span> <img src="img/aixin.png"/> </a>  <a href="###" class="header_login"> <span>登 录</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>  <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>  <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>  <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>  <div class="news"> <h3>新闻资讯</h3>  <div class="news_main">  <div class="carousel_map"> <div class="slide"> <input type="radio" name="pic" id="pic1" checked/> <input type="radio" name="pic" id="pic2"/> <input type="radio" name="pic" id="pic3"/> <input type="radio" name="pic" id="pic4"/> <div class="labels"> <label for="pic1"></label> <label for="pic2"></label> <label for="pic3"></label> <label for="pic4"></label> </div> <ul class="list"> <li class="item"> <a href="###"> <img src="img/news1.jpg" style="height: 100%; width: 100%;"/> </a> </li> <li class="item"> <a href="###"> <img src="img/news2.jpg" style="height: 100%; width: 100%;"/> </a> </li> <li class="item"> <a href="###"> <img src="img/news3.jpg" style="height: 100%; width: 100%;"/> </a> </li> <li class="item"> <a href="###"> <img src="img/news4.jpg" style="height: 100%; width: 100%;"/> </a> </li> <li class="item"> <a href="###"> <img src="img/news1.jpg" style="height: 100%; width: 100%;"/> </a> </li> </ul> </div> </div>  <div class="news_content"> <ul class="news_table_list"> <li id="t1">最新</li> <li id="t2">新闻</li> <li id="t3">公告</li> <li id="t4">活动</li> </ul> <ul class="news_list" id="news_1"> <li> <a href="###" class="news_item" title="凯亚生日快乐｜如果山上风大的话，可以把披风借给你。"> <p class="news_title">凯亚生日快乐｜如果山上风大的话，可以把披风借给你。</p> <p class="news_date">2022/11/30</p> </a> </li> <li> <a href="###" class="news_item" title="《原神》新玩法预告PV：「来一局七圣召唤吧！」"> <p class="news_title">《原神》新玩法预告PV：「来一局七圣召唤吧！」</p> <p class="news_date">2022/11/30</p> </a> </li> <li> <a href="###" class="news_item" title="《原神》「无相交响诗」活动小贴士回旋曲·森郁之笼"> <p class="news_title">《原神》「无相交响诗」活动小贴士回旋曲·森郁之笼</p> <p class="news_date">2022/11/30</p> </a> </li> <li> <a href="###" class="news_item" title="《原神》「花坂豪快」荒泷一斗同人绘画作品征集开启"> <p class="news_title">《原神》「花坂豪快」荒泷一斗同人绘画作品征集开启</p> <p class="news_date">2022/11/28</p> </a> </li> <li> <a href="###" class="news_item" title="《原神》「无相交响诗」活动小贴士谐谑曲·束浪之池"> <p class="news_title">《原神》「无相交响诗」活动小贴士谐谑曲·束浪之池</p> <p class="news_date">2022/11/28</p> </a> </li> </ul> </div> </div> </div>  <div class="city"> <ul class="city_list">  <li class="city_list_item"> <div class="city_bg1"></div> <a href="###"> <p>蒙德城</p> </a> </li>  <li class="city_list_item"> <div class="city_bg2"></div> <a href="###"> <p>璃月港</p> </a> </li>  <li class="city_list_item"> <div class="city_bg3"></div> <a href="###"> <p>稻妻城</p> </a> </li>  <li class="city_list_item"> <div class="city_bg4"></div> <a href="###"> <p>须弥城</p> </a> </li>  <li class="city_list_item"> <div class="city_end"></div> <a href="###"> <p>敬请期待</p> </a> </li> </ul> </div> </body> </html>