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

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

二、poster code

2.1、html:

<!-- 页面一 -->
<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="###">首&nbsp;页</a>
                </li>
                <li>
                    <a href="###">新&nbsp;闻</a>                        
                </li>
                <li>
                    <a href="###">角&nbsp;色</a>
                </li>
                <li>
                    <a href="###">世&nbsp;界</a>
                </li>
                <li>
                    <a href="###">漫&nbsp;画</a>
                </li>
                <li>
                    <a href="###">社&nbsp;区</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>登&nbsp;录</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="###">