<!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">
<!-- 头部左边，logo -->
<div class="header_left">
<!-- 音乐logo -->
<div class="musicLogo">
<a href="###">
<img src="img/MusicLogo.png">
</a>
</div>
<!-- 原神logo -->
<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>
<!-- 12+ 标志 -->
<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>
<!-- PS4, ios -->
<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>
<!-- taptap, android -->
<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">
<!-- city1 -->
<li class="city_list_item">
<div class="city_bg1"></div>
<a href="###">
<p>蒙德城</p>
</a>
</li>
<!-- city2 -->
<li class="city_list_item">
<div class="city_bg2"></div>
<a href="###">
<p>璃月港</p>
</a>
</li>
<!-- city3 -->
<li class="city_list_item">
<div class="city_bg3"></div>
<a href="###">
<p>稻妻城</p>
</a>
</li>
<!-- city4 -->
<li class="city_list_item">
<div class="city_bg4"></div>
<a href="###">
<p>须弥城</p>
</a>
</li>
<!-- city-end -->
<li class="city_list_item">
<div class="city_end"></div>
<a href="###">
<p>敬请期待</p>
</a>
</li>
</ul>
</div>
</body>
</html>
HTML+CSS 仿原神官网源码
需积分: 0 181 浏览量
2023-06-21
21:52:19
上传
评论 3
收藏 22.82MB ZIP 举报
原神官网实战.zip （36个子文件） 
原神轮播图.html 4KB
js 
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资源评论
