《原神》主题网页介绍
以对该网页的详细介绍
网页整体结构
- 头部（header）：包含网站的 logo 和导航栏。logo 部分展示了 "原神" 字样，点击可返回首页。导航栏提供了多个页面链接，包括首页、音乐、视频、壁纸、世界、角色等，方便用户快速访问不同的内容板块。
- 主体内容（section） ：分为两个主要部分。
- sect_1：展示了《原神》中的三个世界城邦，分别是蒙德城、璃月港和稻妻城。每个城邦都有对应的图片和名称，并且设置了链接，点击可跳转到相关的详细页面，进一步了解城邦的特色和信息。
- sect_2：是新闻资讯板块，分为左右两部分。左侧展示了一些新闻相关的图片，右侧则是详细的新闻内容分类展示。新闻内容分为最新、新闻、公告、活动四个类别，用户可以通过点击相应的标签切换查看不同类型的资讯，如游戏活动通知、版本更新公告、社区活动新闻等。
- 页脚（footer） ：包含网站的版权信息，标明了作者为 "旅行者"，同时声明网页为课程作品，素材来源于网络，出现问题与作者无关，并提供了 "网页制作教程" 的链接（此处
i标签可能是误写，若为链接可完善相关代码）。
网页样式和资源引用
- 样式表引用 ：在
<head>部分，通过<link>标签引用了多个 CSS 文件，包括base.css、index.css、common.css，这些样式表共同作用于网页，控制网页的布局、颜色、字体等样式，使网页具有统一且美观的视觉效果。 - 图标和脚本引用 ：引用了
favicon.ico作为网页的图标，同时通过<script>标签引入了common.js和index.js两个 JavaScript 文件，用于实现网页的交互功能，如导航栏的选中效果、新闻内容的切换等。
网页功能亮点
- 导航便捷：导航栏清晰明了，用户可以轻松找到并访问自己感兴趣的页面，提升了用户体验。
- 资讯丰富：新闻资讯板块分类详细，方便用户快速获取不同类型的游戏资讯，及时了解游戏的最新动态和活动信息。
效果展示
首页代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>原宝</title>
<!-- 初始化 -->
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="shortcut icon" href="favicon.ico" />
<!-- js -->
<script src="js/common.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<!-- 头部导航栏 start-->
<header>
<!-- logo start -->
<div class="logo">
<h1><a href="index.html" title="原神">原神</a></h1>
</div>
<!-- logo end -->
<!-- 导航栏 start -->
<div class="nav w">
<ul>
<li class="select_pages">
<a href="index.html"><span>首页</span><span>Home</span></a>
</li>
<li>
<a href="pages/music.html"><span>音乐</span><span>Music</span></a>
</li>
<li>
<a href="pages/VideoPage.html"><span>视频</span><span>Video</span></a>
</li>
<li>
<a href="pages/wallpaper.html"><span>壁纸</span><span>Picture</span></a>
</li>
<li>
<a href="pages/world.html"><span>世界</span><span>World</span></a>
</li>
<li>
<a href="pages/megde.html"><span>角色</span><span>Role</span></a>
</li>
</ul>
</div>
<!-- 导航栏 end-->
</header>
<!-- 导航栏 end-->
<!-- index 部分 start-->
<section>
<div class="sect_1">
<h1>世界城邦</h1>
<ul>
<li>
<div class="move mengde">
<h4>蒙德城</h4>
<a href="pages/megde.html"><img src="images/babala.png" alt="" /></a>
</div>
</li>
<li>
<div class="move liyue">
<h4>璃月港</h4>
<a href="pages/liyue.html"><img src="images/ningguang.png" alt="" /></a>
</div>
</li>
<li>
<div class="move daoqi">
<h4>稻妻城</h4>
<a href="pages/daoqi.html"><img src="images/linghua.png" alt="" /></a>
</div>
</li>
</ul>
</div>
<div class="sect_2 ">
<div class="box">
<div class="news_left">
<h1>新闻资讯</h1>
<ul class="tab_move">
<li><a href="javascript:void(0)"><img src="images/news1.png" alt=""></a></li>
<li><a href="javascript:void(0)"><img src="images/news2.png" alt=""></a></li>
<li><a href="javascript:void(0)"><img src="images/news3.png" alt=""></a></li>
<li><a href="javascript:void(0)"><img src="images/news4.png" alt=""></a></li>
<li><a href="javascript:void(0)"><img src="images/news5.png" alt=""></a></li>
</ul>
<ul class="pointer">
</ul>
</div>
<div class="news_right">
<div class="title">
<ul>
<li class="select_title">最新</li>
<li>新闻</li>
<li>公告</li>
<li>活动</li>
</ul>
</div>
<div class="content">
<ul class="newest">
<li>
<p> 原神×知乎｜「绿野萌踪」小动物主题摄影征集活动</p><span>2022/05/11</span>
</li>
<li>
<p>《原神》社区活动丨「绿野萌踪」小动物主题摄影征集活动今日开启</p><span> 2022/05/11</span>
</li>
<li>
<p>《原神》「有香自西来」活动即将开启</p><span>2022/05/11</span>
</li>
<li>
<p>《原神》小红书创作者激励计划即将开启</p><span> 2022/05/10</span>
</li>
<li>
<p>《原神》快手视频征集&直播招募活动即将开启</p><span>2022/05/10</span>
</li>
<li>
<p>《原神》B站视频征集激励计划开启</B></p><span>2022/5/10</span>
</li>
</ul>
<ul class="news">
<li>
<p> 原神×知乎｜「绿野萌踪」小动物主题摄影征集活动</p><span>2022/05/11</span>
</li>
<li>
<p>《原神》交响音乐会特别篇-「映春华章」</p><span> 2022/02/04</span>
</li>
<li>
<p>《原神》「有香自西来」活动即将开启</p><span>2022/05/11</span>
</li>
<li>
<p>《原神："异世相遇，尽享美味"</p><span> 2020/03/01</span>
</li>
<li>
<p>《原神》排面！《国家人文历史》解析原神《神女劈观》，每句词都有典故？</p><span>2022/02/19</span>
</li>
<li>
<p>《原神》B站视频征集激励计划开启</B></p><span>2022/5/10</span>
</li>
</ul>
<ul class="notice">
<li>
<p>《原神》祈愿概率公示</p><span></span>
</li>
<li>
<p>《原神》2.5版本「薄樱初绽时」更新通知</p><span> 2022/02/16</span>
</li>
<li>
<p>《原神》2.5版本「薄樱初绽时」更新通知</p><span>2022/02/14</span>
</li>
<li>
<p>「流光飞彩」海灯节答谢邮件发放问题处理说明</p><span>2022/02/09</span>
</li>
<li>
<p>《原神》2.4版本「飞彩镌流年」更新说明</p><span> 2022/01/05</span>
</li>
<li>
<p>《原神》2.4版本「飞彩镌流年」海灯节活动开启</p><span>2020/01/05</span>
</li>
</ul>
<ul class="activity">
<li>
<p>《原神》「神工天巧」活动即将开启</p><span> 2022/02/28</span>
</li>
<li>
<p>「岩港奇珍行记」网页活动说明</p><span>2020/11/02</span>
</li>
<li>
<p> 《原神》月夕祝颂-万份空月祝福相赠</p><span> 2020/10/01</span>
</li>
<li>
<p> "在尘世的相逢"抖音《原神》公测主播招募</p><span>2020/09/28</span>
</li>
<li>
<p>"在尘世的相逢"快手直播《原神》主播招募活动开启</p><span> 2020/09/16</span>
</li>
<li>
<p>《原神》："异世相遇，尽享美味"线下活动</p><span>2020/09/16</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- index 部分 end-->
<footer>
<div class="copyright w">
<img src="images/logo.png" alt="" width="100px">
<p>作者：旅行者 |免责声明：网页为课程作品，网页素材均来源于网络，出现任何问题与作者无关 |
<i class="link">网页制作教程</i>
</p>
</div>i
</footer>
<div class="code" style="display: none;">
<div class="box">
<img src="images/code.png" alt="">
<button class="close"></button>
</div>
</div>
</body>
</html>