【HTML + CSS】实现原神纯静态官网

最新推荐文章于 2025-03-17 20:30:46 发布

程序小圆圆

最新推荐文章于 2025-03-17 20:30:46 发布

阅读量3.4k

点赞数 16

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_64460287/article/details/134557714

版权

本文档详细介绍了如何使用HTML和CSS构建一个原神主题的静态网站，包括首页、新闻页面和城市页面的设计。首页包含了头部导航栏、背景视频、播放按钮和下载标志；新闻页面展示了新闻列表；城市页面则展示了多个城市的图片和名称。通过这段代码，读者可以学习到如何运用HTML和CSS创建具有专业视觉效果的网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录
一、网页效果演示

二、poster code

2.1、html:

<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="###">