纯html+js+css原神官网

至尊鸡

已于 2024-06-20 23:53:47 修改

阅读量380

点赞数 2

分类专栏：静态项目（js）文章标签： html javascript css

于 2024-01-29 18:00:32 首次发布

本文链接：https://blog.csdn.net/m0_72190449/article/details/135918075

版权

静态项目（js）专栏收录该内容

9 篇文章

订阅专栏

本文详细描述了原神主页的头部设计，包括音乐控制、logo、导航栏以及登录选项（包括验证码和密码登录），同时提及了社交媒体链接中的微信二维码。

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

首页部分

 <!-- 头部开始 -->
    <div class="header">
        <!-- 音乐按钮 -->
        <div class="audio-controller" id="audio_on">
            <img src="./images/musicon.png" alt="" id="audio_heaserimg" style="width: 100%;">
        </div>
        <div class="audio-controller" id="audio_off" style="display: none;">
            <img src="./images/musicoff.png" alt="" id="audio_heaserimg" style="width: 100%;">
        </div>
        <!-- 音乐按钮结束 -->
        <!-- logo -->
        <div class="header__logo--cut">
            <img src="./images/原神主页logo.png">
        </div>
        <div class="header__logo--full">
            <img src="images/原神主页logo.png">
        </div>
        <!-- 导航 -->
        <div class="header__navbar">
            <div class="header_Cloud"></div>
            <div class="header_navitem">
                <a href="#" class="a1">首&nbsp;页</a>
                <a href="./ysnews.html" class="a2">新&nbsp;闻</a>
                <a href="./ysnews.html" class="a3">角&nbsp;色</a>
                <a href="./ysnews.html" class="a4">世&nbsp;界</a>
                <a href="./ysnews.html" class="a5">漫&nbsp;画</a>
                <a href="./ysnews.html" class="a6">社&nbsp;区</a>
            </div>
        </div>
        <button class="header__login">
            <span>登&nbsp;录</span>
            <img src="images/登录.png">
        </button>
        <div class="mhy-account-flow mhy-account-flow-dialog ys-theme is-pc" style="display: none;" id="login">
            <div class="mhy-account-flow-dialog-content">
                <div class="mhy-account-flow-login">
                    <img src="images/mihuayouLOGo.png" class="logo">
                    <img src="images/X.png" class="close-icon">
                </div>
                <div class="mhy-account-flow-tabs tabs-flex">
                    <div class="tab-item active">
                        <span>验证码登录</span>
                    </div>
                    <div class="tab-item">
                        <span id="mimaloginers">密码登录</span>
                    </div>
                </div>
                <form>
                    <div class="mhy-account-flow-form-input">
                        <div class="input-container">
                            <input type="tel" placeholder="手机号注册/登录" id="containerinput" maxlength="11">
                        </div>
                        <p class="error-text">*手机号不能为空</p>
                        <p class="error-text" style="display: none;" id="MobilePhoneFormat">*手机格式错误</p>
                    </div>
                    <div class="mhy-account-flow-form-input">
                        <div class="input-container">
                            <div class="mhy-toast" style="display: none;">请输入正确的手机号</div>
                            <input type="tel" placeholder="验证码" maxlength="6">
                            <div class="input-inner-btn captcha-login-inner-btn" id="VerificationCode">
                                获取验证码
                            </div>
                        </div>
                    </div>
                    <div></div>
                    <div class="mhy-login-button">
                        <button type="submit" class="login-btn">登录</button>
                    </div>
                </form>
                <div class="register-bar">
                    <a href="">登录遇到问题？</a>
                    <a href="" class="to-register">立即注册</a>
                </div>
                <p class="login-tip">
                    <span>未注册的手机验证后将自动登录。注册/登录即代表<br>您同意并遵守</span>
                    <a>《米哈游通行证用户服务协议》</a>
                    <a href="">《米<br>哈游通行证用户个人信息及隐私保护政策》</a>
                </p>
            </div>
            <!-- 密码登录 -->
            <div class="mhy-account-flow-dialog-content" id="mimalogin" style="display: none;">
                <div class="mhy-account-flow-login">
                    <img src="images/mihuayouLOGo.png" class="logo">
                    <img src="images/X.png" class="close-icon" id="x2">
                </div>
                <div class="mhy-account-flow-tabs tabs-flex">
                    <div class="tab-item">
                        <span id="yzmloginer">验证码登录</span>
                    </div>
                    <div class="tab-item">
                        <span id="mimaloginer">密码登录</span>
                    </div>
                </div>
                <form>
                    <div class="mhy-account-flow-form-input">
                        <div class="input-container">
                            <input type="tel" placeholder="手机号/邮箱">
                        </div>
                    </div>
                    <div class="mhy-account-flow-form-input">
                        <div class="input-container">
                            <input type="tel" placeholder="密码" maxlength="6">
                            <div class="input-inner-btn captcha-login-inner-btn">

                            </div>
                        </div>
                    </div>
                    <div></div>
                    <div class="mhy-login-button">
                        <button type="submit" class="login-btn">登录</button>
                    </div>
                </form>
                <div class="register-bar">
                    <a href="">登录遇到问题？</a>
                    <a href="" class="to-register">立即注册</a>
                </div>
                <p class="login-tip">
                    <span>登录即代表您同意并遵守<br>您同意并遵守</span>
                    <a>《米哈游通行证用户服务协议》</a>
                    <a href="">《米<br>哈游通行证用户个人信息及隐私保护政策》</a>
                </p>
            </div>
        </div>
    </div>
    <!-- 头部结束 -->
    <div class="social">
        <!-- 列表 -->
        <ul class="social_wx">
            <button class="social__btn_off">
                <img src="./images/箭头.png" alt="" class="social__btn_on_img1">
            </button>
            <button class="social__btn_on">
                <!-- 转换方向 180度 -->
                <img src="./images/箭头.png" alt="" class="social__btn_on_img2">
            </button>
            <li class="social_first">
                <p class="wenzi1">关注我们</p>
                <img src="./images/微信二维码.png">
                <p class="wenzi2">扫描关注微信</p>
            </li>
            <li class="social__item">
                <p>官方微博</p>
            </li>
            <li class="social__item">
                <p>TapTap</p>
            </li>
            <li class="social__item">
                <p>官方社区</p>
            </li>
        </ul>
    </div>

码影行者 (lilisen.cn)获取源码

运行部分图片