纯HTMLCSS静态网站——元神
《原神》主题网页介绍
以对该网页的详细介绍
网页整体结构
- 头部（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>