HTML+CSS+JS登录界面

1 篇文章 0 订阅
1 篇文章 0 订阅

1.界面样式

1.1登录界面

在这里插入图片描述

1.2注册界面

在这里插入图片描述

代码实现

html

<!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>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/logo.css">
    <script src="./font/iconfont.js"></script>
    <script src="./js/logo.js"></script>
</head>

<body>
    <!-- 登录界面 -->
    <div class="login-enroll">
        <div class="login">
            <h4 class="error"></h4>
            <div class="login-left">
                <div class="login-top-left">
                    <h3>账号登录</h3>
                    <h3>扫码登录</h3>
                    <form class="login-input">
                        <input type="text" placeholder="请输入有效的手机号/邮箱号/账号">
                        <input type="password" placeholder="请输入密码">
                        <div class="checkbox">
                            <input type="checkbox" checked>下次自动登录
                            <span><a href="#">找回密码</a></span>
                        </div>
                        <div><input type="submit" value="登录"></div>
                        <div class="login-input-bottom"><span>登录即代表您已阅读并同意<a>《服务协议条款》</a></span></div>
                    </form>
                </div>
            </div>

            <div class="login-top-right">
                <div class="enroll-span">
                    <span>没有账号?</span>
                    <span class="register"><a>免费注册</a></span>
                </div>
                <div class="lgi">快速登录</div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qq"></use>
                    </svg>
                </div>
            </div>
        </div>



        <!-- 注册页面 -->
        <div class="enroll">
            <h4 class="error"></h4>
            <div class="login-left">
                <div class="login-top-left">
                    <h3>新用户注册</h3>
                    <form class="login-input">
                        <div class="input-text">
                            <input type="text" placeholder="请输入有效的手机号/邮箱号/账号">
                            <input type="text" placeholder="请输入验证码">
                            <div class="proving ">
                                <a href="javascripty:;">获取验证码</a>
                            </div>
                            <input type="password" placeholder="请输入密码">
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" checked>下次自动登录
                            <span><a href="#">找回密码</a></span>
                        </div>
                        <div><input type="submit" value="注册并登录"></div>
                        <div class="login-input-bottom"><span>登录即代表您已阅读并同意<a>《服务协议条款》</a></span></div>
                    </form>
                </div>
            </div>

            <div class="login-top-right">
                <div class="enroll-span">
                    <span>已有账号?</span>
                    <span class="log-in"><a>立即登录</a></span>
                </div>
                <div class="lgi">快速登录</div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qq"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>



</body>

</html>

css(base.css)

/* 内外边距清0 */
* {
    margin: 0;
    padding: 0;
    /* css3盒子模型 */
    box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候,鼠标变成小手 */
    cursor: pointer
}

a {
    color: #111111;
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 默认有灰色边框我们需要手动去掉 */
    border: 0; 
    outline: none;
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}
.w {
    width: 1200px;
    margin: 0 auto;
}

css(logo.css)

/* 版心 */
.w {
    width: 1200px;
    margin: 0 auto;
}
/* 引入字体图标 */
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
/* 背景 */
body {
    background:#898989;
}
/* 登录 */
.login{
    width: 760px;
    height: 390px;
    margin: 200px auto;
    background: #ffffff;
    padding-left: 40px;
    position: relative;
    
}
.login-left {
    float: left;
    position: relative;
}
/* 顶部 */
.login-top-left {
    width: 360px;
    height: 110px;
    overflow: visible;
}
.login-top-left h3 {
    font-size: 18px;
    float: left;
    line-height: 110px;
    margin: 0 10px;
    color: black;
    cursor: pointer;
}
.login-top-left h3:hover {
    color: #1890ff;
}
.login .error{
    position: absolute;
    top: 40px;
    right: 30px;
    font-size: 20px;
    cursor: pointer;
}

/* input表单 */
.login-input {
    float: left;
}
.login-input input[type='text'] {
    padding-left: 15px;
    border: 1px solid #ccc;
    width: 360px;
    height: 50px;
    color: #ccc;
    border-radius: 5px;
}
.login-input input[type='password'] {
    padding-left: 15px;
    border: 1px solid #ccc;
    width: 360px;
    height: 50px;
    margin-top: 20px;
    color: #ccc;
    border-radius: 5px;
}
.checkbox {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
}
.checkbox span {
    float: right;
}

.login-input input[type='submit'] {
    
    width: 360px;
    height: 50px;
    line-height: 50px;
    background-color: #1890ff;
    border-radius: 5px;
    cursor: pointer;
}
.login-input-bottom {
    width: 360px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    text-align: center;
}
/* 右边 */
.login-top-right {
    float: right;
    width: 300px;
    height: 390px;
    background-color: #fafafa;
    padding: 110px 0;
    text-align: center;
}
.login-top-right .enroll-span {
    font-size: 14px;
}
.login-top-right .enroll-span a {
    color: #1890ff;
    cursor: pointer;
}
.login-top-right .lgi {
    margin-top: 50px;
    margin-bottom: 20px;
}
.login-top-right .icon{
    width: 35px;
    height: 35px;
    margin: 10px 20px;
    cursor: pointer;
}


/* 注册 */
.enroll {
    display: none;
    position: absolute;
    top: -600px;
    width: 760px;
    height: 410px;
    margin: 200px auto;
    background: #ffffff;
    padding-left: 40px;
    position: relative;


}
.enroll .login-top-left h3 {
    height: 90px;
    font-size: 18px;
    float: left;
    line-height: 110px;
    margin: 0 10px;
    color: black;
    cursor: pointer;
}
.enroll .input-text input {
    margin: 0;
    margin-bottom: 10px;
   
}
.enroll .login-input {
    position: relative;
}
.enroll  .proving{
    position: absolute;
    top: 77px;
    right: 11px;
    font-size: 14px;
}

.enroll .error{
    position: absolute;
    top: 40px;
    right: 30px;
    font-size: 20px;
    cursor: pointer;
}

js(logo.js)

window.addEventListener('load', function () {
    // 注册按钮
    const register = this.document.querySelector('.register');
    // 登录按钮
    const logIn = this.document.querySelector('.log-in');
    // 登录盒子
    const login = this.document.querySelector('.login');
    // 注册盒子
    const enroll = this.document.querySelector('.enroll');

    // 获取所有表单
    const inputs = this.document.querySelectorAll('input');
    // 获取关闭按钮
    const error = this.document.querySelectorAll('.error');

    const body = this.document.body;

    // 登录注册显示隐藏
    register.addEventListener('click', function () {
        enroll.style.display = 'block';
    })
    logIn.addEventListener('click', function () {
        enroll.style.display = 'none';
        login.style.display = 'block';
    })
    // 文本框获得焦点文字颜色加深
    function getFocus() {
        this.style.color = '#010101';
    }
    for (let i = 0; i < inputs.length; i++) {
        inputs[i].addEventListener('focus', getFocus)
    }

    inputs.forEach((item) => { item.addEventListener('focus', getFocus) })

    error.forEach((item) => item.addEventListener('click', function () {
        this.parentNode.style.display = 'none';
        body.style.background = '#ffffff';
        login.style.display = 'none';
    }))
})

js(iconfont.js 这是字体图标使用阿里巴巴字体库,如果直接复制使用不成功,直接去阿里巴巴字体库下载使用)

!function(c){var a,l,t,e,i,h='<svg><symbol id="icon-cardid" viewBox="0 0 1024 1024"><path d="M861.090909 116.363636l-698.181818 0C98.629818 116.363636 46.545455 168.448 46.545455 232.727273l0 558.545455c0 64.279273 52.084364 116.363636 116.363636 116.363636l698.181818 0c64.279273 0 116.363636-52.084364 116.363636-116.363636L977.454545 232.727273C977.454545 168.448 925.370182 116.363636 861.090909 116.363636zM930.909091 791.272727c0 38.539636-31.278545 69.818182-69.818182 69.818182l-698.181818 0C124.369455 861.090909 93.090909 829.812364 93.090909 791.272727L93.090909 232.727273c0-38.539636 31.278545-69.818182 69.818182-69.818182l698.181818 0C899.630545 162.909091 930.909091 194.187636 930.909091 232.727273L930.909091 791.272727zM186.181818 698.181818l256 0 0-46.545455L186.181818 651.636364 186.181818 698.181818zM186.181818 535.272727l256 0 0-46.545455L186.181818 488.727273 186.181818 535.272727zM186.181818 372.363636l256 0L442.181818 325.818182 186.181818 325.818182 186.181818 372.363636zM749.474909 530.850909C774.795636 509.486545 791.272727 477.928727 791.272727 442.181818 791.272727 377.902545 739.188364 325.818182 674.909091 325.818182 610.629818 325.818182 558.545455 377.902545 558.545455 442.181818c0 35.746909 16.477091 67.304727 41.797818 88.669091C548.072727 557.986909 512 611.979636 512 674.909091c0 12.846545 10.426182 23.272727 23.272727 23.272727 12.846545 0 23.272727-10.426182 23.272727-23.272727 0-64.279273 52.084364-116.363636 116.363636-116.363636 64.279273 0 116.363636 52.084364 116.363636 116.363636 0 12.846545 10.426182 23.272727 23.272727 23.272727 12.846545 0 23.272727-10.426182 23.272727-23.272727C837.818182 611.979636 801.745455 557.986909 749.474909 530.850909zM674.909091 512c-38.539636 0-69.818182-31.278545-69.818182-69.818182C605.090909 403.642182 636.369455 372.363636 674.909091 372.363636 713.448727 372.363636 744.727273 403.642182 744.727273 442.181818 744.727273 480.721455 713.448727 512 674.909091 512z"  ></path></symbol><symbol id="icon-geren" viewBox="0 0 1024 1024"><path d="M586.945923 513.581008c55.067176-27.962865 92.91211-85.125773 92.91211-150.998039 0-93.338828-75.937506-169.276335-169.277358-169.276335s-169.275311 75.937506-169.275311 169.276335c0 65.872267 37.844933 123.034151 92.911086 150.998039-95.652524 32.016181-164.778904 122.45496-164.778904 228.743728 0 11.31572 9.17394 20.491707 20.491707 20.491707s20.491707-9.174963 20.491707-20.491707c0-110.36869 89.791026-200.160739 200.160739-200.160739S710.741413 631.956046 710.741413 742.324736c0 11.31572 9.17394 20.491707 20.491707 20.491707s20.491707-9.174963 20.491707-20.491707C751.723803 636.035968 682.598446 545.598212 586.945923 513.581008zM382.287753 362.582969c0-70.742181 57.552787-128.293945 128.292921-128.293945 70.742181 0 128.293945 57.552787 128.293945 128.293945 0 70.741157-57.552787 128.292921-128.293945 128.292921C439.84054 490.876913 382.287753 433.324126 382.287753 362.582969z"  ></path><path d="M827.871087 196.127889C743.498468 111.757317 631.320573 65.290005 512 65.290005S280.500509 111.756293 196.128913 196.127889C111.756293 280.501532 65.291029 392.678404 65.291029 511.998977s46.465265 231.499491 130.837884 315.872111 196.550515 130.837884 315.871087 130.837884 231.498468-46.465265 315.871087-130.837884S958.708971 631.319549 958.708971 511.998977 912.243707 280.500509 827.871087 196.127889zM512 917.726581c-223.718271 0-405.726581-182.007287-405.726581-405.727605 0-223.718271 182.00831-405.726581 405.726581-405.726581s405.726581 182.007287 405.726581 405.726581C917.726581 735.719294 735.718271 917.726581 512 917.726581z"  ></path></symbol><symbol id="icon-zanting" viewBox="0 0 1024 1024"><path d="M512 1024C228.266667 1024 0 795.733333 0 512S228.266667 0 512 0s512 228.266667 512 512-228.266667 512-512 512z m0-42.666667c260.266667 0 469.333333-209.066667 469.333333-469.333333S772.266667 42.666667 512 42.666667 42.666667 251.733333 42.666667 512s209.066667 469.333333 469.333333 469.333333z m-106.666667-682.666666c12.8 0 21.333333 8.533333 21.333334 21.333333v384c0 12.8-8.533333 21.333333-21.333334 21.333333s-21.333333-8.533333-21.333333-21.333333V320c0-12.8 8.533333-21.333333 21.333333-21.333333z m213.333334 0c12.8 0 21.333333 8.533333 21.333333 21.333333v384c0 12.8-8.533333 21.333333-21.333333 21.333333s-21.333333-8.533333-21.333334-21.333333V320c0-12.8 8.533333-21.333333 21.333334-21.333333z"  ></path></symbol><symbol id="icon-kaishi" viewBox="0 0 1024 1024"><path d="M429.504 309.952c-12.928-13.056-39.104-4.224-39.104 17.344v380.672c0 17.344 21.76 30.528 39.104 17.344l191.104-176.256a42.24 42.24 0 0 0 0-60.928l-191.104-178.176z"  ></path><path d="M1015.552 512.128a502.656 502.656 0 0 0-503.68-503.68 502.208 502.208 0 0 0-356.096 147.264 502.016 502.016 0 0 0-147.328 356.416 500.288 500.288 0 0 0 146.816 356.736 499.584 499.584 0 0 0 356.544 146.688c277.312-2.816 503.744-226.24 503.744-503.424z m-947.968 0a444.288 444.288 0 0 1 444.288-444.544c246.976 0 447.296 200.128 447.296 444.544 0 244.032-200.32 444.416-447.296 444.416a442.304 442.304 0 0 1-444.288-444.416z"  ></path></symbol><symbol id="icon-qq" viewBox="0 0 1024 1024"><path d="M68.399765 590.615655c-37.073602 90.765025-43.465533 176.418105-14.062849 191.757941 20.45478 11.505876 53.692423-14.061849 84.374094-60.084355 11.504876 51.135451 42.186547 95.87897 84.373094 132.952572-44.743519 16.619821-74.146204 44.743519-74.146204 75.42519 0 51.135451 79.259149 93.321998 176.418105 93.321997 88.208052 0 161.07627-33.237643 175.138119-77.982162h20.45478C535.009753 990.751357 607.87897 1023.989 696.087023 1023.989c98.436943 0 176.418105-40.908561 176.418104-93.321997 0-30.68167-29.402684-58.806368-74.146203-75.42519 42.186547-37.073602 72.868217-81.817121 84.374094-132.952572 30.68067 46.022506 62.640327 71.589231 84.373093 60.084355 30.68167-15.339835 24.289739-102.270901-14.061849-191.757941-29.403684-70.311245-69.033258-122.725682-99.714929-134.230558 0-3.835959 1.278986-8.949904 1.278987-14.062849 0-26.845712-7.669918-52.413437-20.454781-72.868217v-5.112945c0-12.783863-2.555973-24.289739-7.669917-34.516629C818.813704 145.736434 701.200968 0 510.722014 0 320.24206 0 202.630323 145.736434 194.959406 329.824457c-5.112945 10.22689-7.669918 21.732767-7.669918 34.516629v5.112945c-12.783863 20.45478-20.45478 46.022506-20.45478 72.869217v14.061849c-28.123698 11.504876-69.032258 62.640327-98.434943 134.230558z" fill="#4CAFE9" ></path></symbol><symbol id="icon-weixin" viewBox="0 0 1024 1024"><path d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z" fill="#28C445" ></path><path d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z" fill="#28C445" ></path></symbol><symbol id="icon-yanjing" viewBox="0 0 1024 1024"><path d="M515.2 224c-307.2 0-492.8 313.6-492.8 313.6s214.4 304 492.8 304 492.8-304 492.8-304S822.4 224 515.2 224zM832 652.8c-102.4 86.4-211.2 140.8-320 140.8s-217.6-51.2-320-140.8c-35.2-32-70.4-64-99.2-99.2-6.4-6.4-9.6-12.8-16-19.2 3.2-6.4 9.6-12.8 12.8-19.2 25.6-35.2 57.6-70.4 92.8-102.4 99.2-89.6 208-144 329.6-144s230.4 54.4 329.6 144c35.2 32 64 67.2 92.8 102.4 3.2 6.4 9.6 12.8 12.8 19.2-3.2 6.4-9.6 12.8-16 19.2C902.4 585.6 870.4 620.8 832 652.8z"  ></path><path d="M512 345.6c-96 0-169.6 76.8-169.6 169.6 0 96 76.8 169.6 169.6 169.6 96 0 169.6-76.8 169.6-169.6C681.6 422.4 604.8 345.6 512 345.6zM512 640c-67.2 0-121.6-54.4-121.6-121.6 0-67.2 54.4-121.6 121.6-121.6 67.2 0 121.6 54.4 121.6 121.6C633.6 582.4 579.2 640 512 640z"  ></path></symbol><symbol id="icon-wenjianjia" viewBox="0 0 1024 1024"><path d="M912 208H427.872l-50.368-94.176A63.936 63.936 0 0 0 321.056 80H112c-35.296 0-64 28.704-64 64v736c0 35.296 28.704 64 64 64h800c35.296 0 64-28.704 64-64v-608c0-35.296-28.704-64-64-64z m-800-64h209.056l68.448 128H912v97.984c-0.416 0-0.8-0.128-1.216-0.128H113.248c-0.416 0-0.8 0.128-1.248 0.128V144z m0 736v-96l1.248-350.144 798.752 1.216V784h0.064v96H112z"  ></path></symbol><symbol id="icon-renshu" viewBox="0 0 1024 1024"><path d="M1004.311166 747.633798c-9.754101-96.818487-68.639972-181.354031-155.343094-223.983066 29.623567-23.301464 51.841242-54.189451 64.485447-89.954489 14.269889-40.461457 15.173046-83.451755 2.709473-124.635739-12.644205-41.003352-37.390721-76.226495-71.891339-101.695537-34.500617-25.469042-75.323337-39.016405-118.313636-39.016405-15.353678 0-30.707356 1.986947-47.325454 5.96084l-13.908626 3.251367 9.57347 10.476627c13.547363 14.631152 25.469042 30.887987 35.584406 48.228612l2.528841 4.335156 5.057683-0.180631c1.625684 0 3.251367-0.361263 4.696419-0.541895 1.445052-0.180632 2.709473-0.361263 3.793261-0.361263 34.139354 0 66.291762 13.366731 90.315753 37.390722 24.204622 24.204622 37.390721 56.176398 37.390721 90.315752s-13.1861 66.291762-37.390721 90.496384c-24.204622 24.204622-56.176398 37.390721-90.315753 37.390721-1.264421 0-2.709473-0.180632-4.515787-0.361263-1.264421-0.180632-2.528841-0.361263-3.793262-0.361263l-5.238314-0.361263-2.528841 4.515788c-11.018522 19.146939-24.385253 37.029458-39.919562 52.925031l-18.966308 19.508202 26.552831-5.599576c14.269889-3.070736 28.720409-4.515788 42.809667-4.515788 108.01764 0 197.610866 81.103546 208.448756 188.579291l0.722526 7.405892H1004.130534v-8.30905l0.180632-0.903157z"  ></path><path d="M800.920092 834.517552c-13.366731-40.100194-33.055565-77.852179-58.343976-111.810902-25.288411-34.139354-55.453872-63.762921-89.95449-88.328806-30.526724-21.675781-63.762921-39.016405-98.986064-51.479978 47.686717-32.152408 84.174281-77.129652 106.211325-130.77721 24.204622-59.427765 27.997883-123.371318 11.199153-185.147292s-52.744399-115.062268-103.501852-153.898042c-50.938084-38.835774-111.63027-59.427765-175.754454-59.427765-65.388605 0.180632-129.69342 22.75957-180.631505 63.762921-51.118716 41.003352-87.064385 98.624802-101.334274 162.568354-14.269889 63.943553-6.322103 131.499735 22.217675 190.204975 26.010937 53.466925 68.45934 97.902276 120.300582 126.622684-67.19492 30.887987-124.274475 79.297231-165.819721 140.892574-45.157876 66.472394-68.820603 143.963309-68.820604 224.344329v8.309049h67.556183v-8.309049c0-1.264421 0-2.34821-0.180631-3.431999 0-0.903158-0.180632-1.625684-0.180632-2.167578 0-181.534662 147.575939-329.291233 328.92997-329.471864 181.354031 0 328.92997 147.756571 328.92997 329.291233 0 0.722526 0 1.445052-0.180631 2.348209 0 1.083789-0.180632 2.167578-0.180632 3.251367v8.30905h79.116599v-8.30905c0-43.351561-6.863997-86.341859-20.591991-127.34521zM608.366908 343.199859c0 119.578056-97.17975 216.757806-216.757806 216.757805s-216.757806-97.17975-216.757805-216.757805 97.17975-216.757806 216.757805-216.757806 216.757806 97.17975 216.757806 216.757806z"  ></path></symbol><symbol id="icon-rili" viewBox="0 0 1024 1024"><path d="M767.989248 186.19634l-69.815436 0 0-23.272495c0-12.852708-10.419786-23.271471-23.272495-23.271471s-23.272495 10.418762-23.272495 23.271471l0 23.272495L372.369128 186.19634l0-23.272495c0-12.852708-10.418762-23.271471-23.271471-23.271471s-23.271471 10.418762-23.271471 23.271471l0 23.272495L256.010752 186.19634c-64.160121 0-116.358377 52.198256-116.358377 116.358377l0 372.347625c0 64.160121 52.198256 116.359401 116.358377 116.359401l511.978497 0c64.160121 0 116.359401-52.19928 116.359401-116.359401L884.348649 302.554717C884.348649 238.394595 832.14937 186.19634 767.989248 186.19634zM837.804684 674.902342c0 38.496687-31.318749 69.815436-69.815436 69.815436L256.010752 744.717778c-38.496687 0-69.815436-31.318749-69.815436-69.815436L186.195316 302.554717c0-38.496687 31.318749-69.815436 69.815436-69.815436l69.815436 0 0 46.542941c0 12.852708 10.418762 23.271471 23.271471 23.271471s23.271471-10.418762 23.271471-23.271471l0-46.542941 279.260719 0 0 46.542941c0 12.852708 10.419786 23.271471 23.272495 23.271471s23.272495-10.418762 23.272495-23.271471l0-46.542941L767.989248 232.739281c38.496687 0 69.815436 31.318749 69.815436 69.815436L837.804684 674.902342z"  ></path><path d="M360.711378 372.370152 290.896966 372.370152c-12.852708 0-23.271471 10.418762-23.271471 23.271471s10.418762 23.271471 23.271471 23.271471l69.815436 0c12.852708 0 23.271471-10.418762 23.271471-23.271471S373.564086 372.370152 360.711378 372.370152z"  ></path><path d="M546.907718 372.370152l-69.815436 0c-12.852708 0-23.271471 10.418762-23.271471 23.271471s10.418762 23.271471 23.271471 23.271471l69.815436 0c12.852708 0 23.272495-10.418762 23.272495-23.271471S559.760426 372.370152 546.907718 372.370152z"  ></path><path d="M733.105082 372.370152 663.289646 372.370152c-12.852708 0-23.272495 10.418762-23.272495 23.271471s10.419786 23.271471 23.272495 23.271471l69.815436 0c12.852708 0 23.272495-10.418762 23.272495-23.271471S745.95779 372.370152 733.105082 372.370152z"  ></path><path d="M360.711378 465.457059 290.896966 465.457059c-12.852708 0-23.271471 10.418762-23.271471 23.271471s10.418762 23.271471 23.271471 23.271471l69.815436 0c12.852708 0 23.271471-10.418762 23.271471-23.271471S373.564086 465.457059 360.711378 465.457059z"  ></path><path d="M546.907718 465.457059l-69.815436 0c-12.852708 0-23.271471 10.418762-23.271471 23.271471s10.418762 23.271471 23.271471 23.271471l69.815436 0c12.852708 0 23.272495-10.418762 23.272495-23.271471S559.760426 465.457059 546.907718 465.457059z"  ></path><path d="M733.105082 465.457059 663.289646 465.457059c-12.852708 0-23.272495 10.418762-23.272495 23.271471s10.419786 23.271471 23.272495 23.271471l69.815436 0c12.852708 0 23.272495-10.418762 23.272495-23.271471S745.95779 465.457059 733.105082 465.457059z"  ></path><path d="M360.711378 558.543965 290.896966 558.543965c-12.852708 0-23.271471 10.419786-23.271471 23.272495s10.418762 23.272495 23.271471 23.272495l69.815436 0c12.852708 0 23.271471-10.419786 23.271471-23.272495S373.564086 558.543965 360.711378 558.543965z"  ></path><path d="M546.907718 558.543965l-69.815436 0c-12.852708 0-23.271471 10.419786-23.271471 23.272495s10.418762 23.272495 23.271471 23.272495l69.815436 0c12.852708 0 23.272495-10.419786 23.272495-23.272495S559.760426 558.543965 546.907718 558.543965z"  ></path><path d="M733.105082 558.543965 663.289646 558.543965c-12.852708 0-23.272495 10.419786-23.272495 23.272495s10.419786 23.272495 23.272495 23.272495l69.815436 0c12.852708 0 23.272495-10.419786 23.272495-23.272495S745.95779 558.543965 733.105082 558.543965z"  ></path></symbol><symbol id="icon-rili1" viewBox="0 0 1024 1024"><path d="M868.9 347.9c-0.3 83-5.8 166.9-18 248.9-8.3 55.7-18.4 115.5-56.6 159.5-33.6 38.7-81.8 60.4-130.1 74.4-32.4 9.4-65.6 15.8-98.9 20.9-16.3 2.5-32.7 4.7-49.1 6.6-13.8 1.7-30.1 6.2-44 5.8 94.6 3.1 208.8 2.7 301.6-17.7 30-6.6 80.5-16.9 93.7-49.5 32.5-80.3 46.5-422.5 1.4-448.9z" fill="#FFECBE" ></path><path d="M607.9 236.4c-61.6 1.2-124.9 3.5-193.5 7.3-0.3 0-0.6 0-0.9 0.1v24.1c0.8 0 1.5-0.1 2.3-0.1 64.3-3.5 128.6-6 192.6-7.2h1.8v-24.1c-0.8-0.2-1.6-0.1-2.3-0.1z" fill="#FFBA01" ></path><path d="M892.3 342.3c-5.6-23.5-17.5-44.8-33.6-60-18.8-17.7-42.8-25.2-63.7-30.2-27.5-6.7-57.5-11.4-89.1-13.9-1.1-0.1-2.3-0.1-3.4-0.2 0 8-0.2 16-1.1 24.1 0.8 0.1 1.7 0.1 2.5 0.2 28.8 2.3 57.5 6.5 85.5 13.4 19 4.5 38.4 10.8 52.8 24.3 13.4 12.6 22.4 30 26.7 48 17.5 74.2 15.3 134.4 13.5 202.7-1.7 65.7-4 132.5-16.1 200.7-12 68.1-76.2 85.4-135.9 92.4-88.9 10.5-177.7 16.3-267.3 17.7-8.8 0.1-17.5 0.2-26.3 0.2-31.5 0-63-0.9-94.5-2.9-32.4-2-66-3.4-97.3-13.1-38.3-11.9-67-38.1-77.6-77.4-19.7-73.1-26.5-142.6-27-215.4-0.5-69.2 3.3-142.7 17.9-207.5 3.7-16.3 12.7-41 26.4-51 4.2-3.1 9.1-5.4 14.5-7.2 34.9-11.6 72.3-10.2 108.5-12.7 5.6-0.4 11.1-0.8 16.7-1.1-2.1-8-5.8-15.5-2.8-23.9-5.2 0.4-10.4 0.7-15.5 1.1-8.1 0.6-16.3 0.9-24.9 1.3-29.3 1.3-59.6 2.6-89.6 12.6-8.2 2.7-15.2 6.2-21.1 10.6-22.6 16.6-32.5 51.1-35.7 65.1-13.1 57.8-19.1 127.5-18.5 213 0.6 82.8 9.4 153.2 27.8 221.5 12.3 45.7 45.6 79.1 93.7 94.1 31.5 9.8 63.8 11.8 95 13.7l7.9 0.5c31 2 63.3 2.9 96 2.9 8.8 0 17.7-0.1 26.6-0.2 90.5-1.4 181.3-7.4 269.7-17.9 38.3-4.5 140-16.5 156.8-112.1 12-67.8 14.5-132.6 16.4-204.3l0.2-6c2-66 3.7-128-14.1-203.1z" fill="#FFBA01" ></path><path d="M372.9 162.4c7.9 0 15.7 2.7 19.8 11.7 10.1 22.3 17 168.5-8.8 170.2-5 0.3-9.5 0.5-13.6 0.5-17.2 0-26.8-3.5-27.6-15-1-14.3-12.6-145.8 6.5-161.4 0-0.1 11.9-6 23.7-6m0-24.1c-16.6 0-31.6 7-34.4 8.5L336 148l-2.1 1.7c-13.8 11.3-26.4 34.3-15.6 176.8 0.2 2.2 0.3 3.9 0.4 4.9 1 14.3 8.4 25.6 21 31.8 7.9 3.9 17.4 5.7 30.7 5.7 4.4 0 9.3-0.2 15.2-0.6 6.3-0.4 18.1-3.3 26.7-17.5 9.9-16.6 14.5-49.5 13.6-98-0.1-6.8-1.5-67.5-11.1-88.7-7.6-16.4-22.8-25.8-41.9-25.8zM658.4 162.5c8.3 0 16.5 2.8 20.5 12.2 9.5 22.6 12.2 168.9-13.6 169.9-3.3 0.1-6.4 0.2-9.4 0.2-19.9 0-30.9-3.4-31.4-15.9-0.6-14.3-8.5-146.1 11-161.2 0.1 0.1 11.5-5.2 22.9-5.2m0-24.1c-15.9 0-30.3 6.3-33 7.5l-2.5 1.1-2.2 1.7c-14.1 11-27.4 33.6-20.6 176.3 0.1 2.2 0.2 3.9 0.2 4.9 0.6 15.1 8.8 27.4 22.6 33.6 8.2 3.7 18.4 5.4 32.9 5.4 3.1 0 6.5-0.1 10.3-0.2 6.3-0.2 18.2-2.7 27.1-16.7 10.4-16.3 15.9-49.1 16.3-97.5 0.1-6.9 0.4-67.6-8.6-89-7-17.2-22.5-27.1-42.5-27.1zM310.9 466.2c15.9 0 31.4 3.6 36.3 16.4 11 29.2-2.2 63.7-11 69-4.8 2.9-21 5-36.4 5-12.7 0-24.9-1.4-29.9-5-11-8-6.6-77 0-79.7 0 0.2 20.8-5.7 41-5.7m0-24c-23.3 0-46.5 6.4-47.5 6.7l-1.2 0.4-1.2 0.5c-15.1 6-18.2 22-20.1 37.8-1.6 13-2.1 28.4-1.4 41.1 1.3 22.5 6.2 35.3 16.4 42.6 5.7 4.1 16.5 9.6 43.9 9.6 10.4 0 36.1-0.8 48.8-8.5 21.4-12.9 35.3-60.7 21.2-98.2-10.6-27.9-41.5-32-58.9-32zM515.6 466.2c15.9 0 31.4 3.6 36.3 16.4 11 29.2-2.2 63.7-11 69-4.8 2.9-21 5-36.4 5-12.7 0-24.9-1.4-29.9-5-11-8-6.6-77 0-79.7 0 0.2 20.8-5.7 41-5.7m0-24c-23.3 0-46.5 6.4-47.5 6.7l-1.2 0.4-1.2 0.5c-15.1 6-18.2 22-20.1 37.8-1.6 13-2.1 28.4-1.4 41.1 1.3 22.5 6.2 35.3 16.4 42.6 5.7 4.1 16.5 9.6 43.9 9.6 10.4 0 36.1-0.8 48.8-8.5 21.4-12.9 35.3-60.7 21.2-98.2-10.6-27.9-41.4-32-58.9-32zM720.4 466.2c15.9 0 31.4 3.6 36.3 16.4 11 29.2-2.2 63.7-11 69-4.8 2.9-21 5-36.4 5-12.7 0-24.9-1.4-29.9-5-11-8-6.6-77 0-79.7 0 0.2 20.7-5.7 41-5.7m0-24c-23.3 0-46.5 6.4-47.5 6.7l-1.2 0.4-1.2 0.5c-15.1 6-18.2 22-20.1 37.8-1.6 13-2.1 28.4-1.4 41.1 1.3 22.5 6.2 35.3 16.4 42.6 5.7 4.1 16.5 9.6 43.9 9.6 10.4 0 36.1-0.8 48.8-8.5 21.4-12.9 35.3-60.7 21.2-98.2-10.6-27.9-41.5-32-58.9-32zM310.9 662.9c15.9 0 31.4 3.6 36.3 16.4 11 29.2-2.2 63.7-11 69-4.8 2.9-21 5-36.4 5-12.7 0-24.9-1.4-29.9-5-11-8-6.6-77 0-79.7 0 0.2 20.8-5.7 41-5.7m0-24c-23.3 0-46.5 6.4-47.5 6.7l-1.2 0.4-1.2 0.5c-15.1 6-18.2 22-20.1 37.8-1.6 13-2.1 28.4-1.4 41.1 1.3 22.5 6.2 35.3 16.4 42.6 5.7 4.1 16.5 9.6 43.9 9.6 10.4 0 36.1-0.8 48.8-8.5 21.4-12.9 35.3-60.7 21.2-98.2-10.6-27.9-41.5-32-58.9-32zM515.6 662.9c15.9 0 31.4 3.6 36.3 16.4 11 29.2-2.2 63.7-11 69-4.8 2.9-21 5-36.4 5-12.7 0-24.9-1.4-29.9-5-11-8-6.6-77 0-79.7 0 0.2 20.8-5.7 41-5.7m0-24c-23.3 0-46.5 6.4-47.5 6.7l-1.2 0.4-1.2 0.5c-15.1 6-18.2 22-20.1 37.8-1.6 13-2.1 28.4-1.4 41.1 1.3 22.5 6.2 35.3 16.4 42.6 5.7 4.1 16.5 9.6 43.9 9.6 10.4 0 36.1-0.8 48.8-8.5 21.4-12.9 35.3-60.7 21.2-98.2-10.6-27.9-41.4-32-58.9-32zM720.4 662.9c15.9 0 31.4 3.6 36.3 16.4 11 29.2-2.2 63.7-11 69-4.8 2.9-21 5-36.4 5-12.7 0-24.9-1.4-29.9-5-11-8-6.6-77 0-79.7 0 0.2 20.7-5.7 41-5.7m0-24c-23.3 0-46.5 6.4-47.5 6.7l-1.2 0.4-1.2 0.5c-15.1 6-18.2 22-20.1 37.8-1.6 13-2.1 28.4-1.4 41.1 1.3 22.5 6.2 35.3 16.4 42.6 5.7 4.1 16.5 9.6 43.9 9.6 10.4 0 36.1-0.8 48.8-8.5 21.4-12.9 35.3-60.7 21.2-98.2-10.6-27.9-41.5-32-58.9-32zM845.2 810c-2.1 0-4.1-0.8-5.7-2.3l-34.6-34.6c-3.1-3.1-3.1-8.2 0-11.4 3.1-3.1 8.2-3.1 11.4 0l34.6 34.6c3.1 3.1 3.1 8.2 0 11.4-1.6 1.5-3.7 2.3-5.7 2.3zM819.7 843.8c-2.1 0-4.1-0.8-5.7-2.3L776.5 804c-3.1-3.1-3.1-8.2 0-11.4 3.1-3.1 8.2-3.1 11.4 0l37.5 37.5c3.1 3.1 3.1 8.2 0 11.4-1.6 1.5-3.7 2.3-5.7 2.3zM774 858.2c-2.1 0-4.1-0.8-5.7-2.3l-29.1-29.1c-3.1-3.1-3.1-8.2 0-11.4 3.1-3.1 8.2-3.1 11.4 0l29.1 29.1c3.1 3.1 3.1 8.2 0 11.4-1.6 1.5-3.6 2.3-5.7 2.3zM729.4 864.2c-2.1 0-4.1-0.8-5.7-2.3l-24.3-24.3c-3.1-3.1-3.1-8.2 0-11.4 3.1-3.1 8.2-3.1 11.4 0l24.3 24.3c3.1 3.1 3.1 8.2 0 11.4-1.6 1.5-3.6 2.3-5.7 2.3zM685.6 872.8c-2.1 0-4.1-0.8-5.7-2.3L655.4 846c-3.1-3.1-3.1-8.2 0-11.4 3.1-3.1 8.2-3.1 11.4 0l24.5 24.5c3.1 3.1 3.1 8.2 0 11.4-1.6 1.5-3.6 2.3-5.7 2.3zM634.1 877c-2.1 0-4.1-0.8-5.7-2.3l-19.1-19.1c-3.1-3.1-3.1-8.2 0-11.4 3.1-3.1 8.2-3.1 11.4 0l19.1 19.1c3.1 3.1 3.1 8.2 0 11.4-1.6 1.5-3.7 2.3-5.7 2.3zM872.5 776.2c-2.1 0-4.1-0.8-5.7-2.3l-36.2-36.2c-3.1-3.1-3.1-8.2 0-11.4 3.1-3.1 8.2-3.1 11.4 0l36.2 36.2c3.1 3.1 3.1 8.2 0 11.4-1.6 1.5-3.6 2.3-5.7 2.3zM883.6 733.3c-2.1 0-4.1-0.8-5.7-2.3l-32.3-32.3c-3.1-3.1-3.1-8.2 0-11.4 3.1-3.1 8.2-3.1 11.4 0l32.3 32.3c3.1 3.1 3.1 8.2 0 11.4-1.6 1.5-3.6 2.3-5.7 2.3z" fill="#FFBA01" ></path><path d="M890.2 689.5c-2.1 0-4.1-0.8-5.7-2.3L853 655.7c-3.1-3.1-3.1-8.2 0-11.4 3.1-3.1 8.2-3.1 11.4 0l31.4 31.4c3.1 3.1 3.1 8.2 0 11.4-1.5 1.6-3.6 2.4-5.6 2.4z" fill="#FFBA01" ></path><path d="M892.6 643.9c-2.1 0-4.1-0.8-5.7-2.3l-28.8-28.8c-3.1-3.1-3.1-8.2 0-11.4 3.1-3.1 8.2-3.1 11.4 0l28.8 28.8c3.1 3.1 3.1 8.2 0 11.4-1.5 1.6-3.6 2.3-5.7 2.3z" fill="#FFBA01" ></path><path d="M894.6 596.5c-2.1 0-4.1-0.8-5.7-2.3l-27.7-27.7c-3.1-3.1-3.1-8.2 0-11.4 3.1-3.1 8.2-3.1 11.4 0l27.7 27.7c3.1 3.1 3.1 8.2 0 11.4-1.6 1.5-3.7 2.3-5.7 2.3z" fill="#FFBA01" ></path><path d="M896.5 556.5c-2.1 0-4.1-0.8-5.7-2.3l-25.5-25.5c-3.1-3.1-3.1-8.2 0-11.4 3.1-3.1 8.2-3.1 11.4 0l25.5 25.5c3.1 3.1 3.1 8.2 0 11.4-1.6 1.5-3.7 2.3-5.7 2.3z" fill="#FFBA01" ></path><path d="M896.7 516.9c-2.1 0-4.1-0.8-5.7-2.3l-21-21c-3.1-3.1-3.1-8.2 0-11.4 3.1-3.1 8.2-3.1 11.4 0l21 21c3.1 3.1 3.1 8.2 0 11.4-1.5 1.5-3.6 2.3-5.7 2.3z" fill="#FFBA01" ></path></symbol><symbol id="icon-jiantou_xiangzuo" viewBox="0 0 1024 1024"><path d="M290.133333 448H896v85.333333H290.133333l132.266667 132.266667L362.666667 725.333333 128 490.666667 362.666667 256l59.733333 59.733333-132.266667 132.266667z" fill="#444444" ></path></symbol><symbol id="icon-nvlaoshi" viewBox="0 0 1024 1024"><path d="M530.88 907.2a710.56 710.56 0 0 1-134.72-13.6l-8.16-1.6C230.08 857.92 128 714.4 128 526.56a393.44 393.44 0 0 1 7.04-74.08l11.04-39.84a8 8 0 0 1 6.24-5.76C154.24 406.56 349.92 368 426.08 224a8 8 0 0 1 5.44-4.16 8 8 0 0 1 6.56 1.6c2.72 2.24 276 217.28 455.04 217.44H896a8 8 0 0 1 6.72 3.68c8.16 12.8 6.56 44.96 4.16 76.64v8.16c-6.72 119.68-33.92 205.92-83.2 263.52-79.2 91.68-193.28 116.32-292.8 116.32zM160 421.6l-9.6 34.4a378.08 378.08 0 0 0-6.4 70.56c0 180 97.28 317.28 247.68 349.76l7.68 1.6c104.96 20.64 298.08 35.2 411.84-97.76 46.88-54.88 72.96-138.08 80-254.08v-8.48a277.44 277.44 0 0 0 0-63.2C721.12 452.96 481.76 275.04 435.68 240 359.36 372.8 192 414.88 160 421.6z"  ></path><path d="M96.8 480H96a8 8 0 0 1-6.88-8.96c6.08-48 12-80 12-80C144 163.52 291.84 44.16 516 53.12c33.12 1.28 133.28 12.64 167.04 25.6C830.08 134.72 924.8 272 936.8 444.96v0.96a216.32 216.32 0 0 1 3.36 23.36 8 8 0 1 1-16 1.92c-1.44-12.48-2.24-17.76-2.72-19.84a7.68 7.68 0 0 1-0.96-3.2c-10.88-168-101.92-300.48-243.52-354.4-30.08-11.52-125.76-23.2-162.08-24.64C300.64 60.16 158.56 176 116.64 393.6c0 0-5.92 32-11.84 78.72a8 8 0 0 1-8 7.68zM779.68 930.24a172.48 172.48 0 0 1-120.32-41.76 8 8 0 0 1 11.36-11.2c2.4 2.4 59.52 58.24 173.76 28.16 88.8-23.52 93.76-214.56 88.8-326.4a8 8 0 0 1 7.68-8.32 7.36 7.36 0 0 1 8.32 7.68C955.68 720 944 896 848 920.96a269.6 269.6 0 0 1-68.32 9.28zM231.84 917.28c-12.48 0-25.12 0-38.08-1.44-88.16-7.04-128-123.04-115.36-336a7.52 7.52 0 0 1 8.48-7.52 8 8 0 0 1 7.52 8.48c-8.32 141.28 1.6 311.04 100.8 319.04 70.56 5.44 141.12-6.08 164.16-27.04a8 8 0 0 1 10.88 11.84c-22.4 20.32-76.48 32.64-138.4 32.64z"  ></path><path d="M144 610.24h-2.56l-9.28-3.2a91.04 91.04 0 0 1-45.28-16 120.64 120.64 0 0 1-38.4-32 75.68 75.68 0 0 1-13.12-58.4 48 48 0 0 1 55.04-39.84 98.72 98.72 0 0 1 52.32 41.6 8 8 0 0 1 1.6 4.8 461.6 461.6 0 0 0 6.88 92.16 8 8 0 0 1-7.52 10.88z m-62.24-134.4a32.8 32.8 0 0 0-31.04 27.04 59.68 59.68 0 0 0 10.56 45.6A105.6 105.6 0 0 0 94.88 576a72.8 72.8 0 0 0 38.08 14.24A652.32 652.32 0 0 1 128 509.76a77.44 77.44 0 0 0-41.28-33.28 24.48 24.48 0 0 0-4.96-0.64zM904.32 600.96h-2.4l-5.92-1.12a8 8 0 0 1-6.56-8.96c4.16-31.04 6.72-87.52 6.72-88.16a8.16 8.16 0 0 1 1.44-4.16c13.44-19.36 25.6-36.64 45.76-41.28a40 40 0 0 1 30.72 5.76 50.24 50.24 0 0 1 21.6 32 77.44 77.44 0 0 1-12.32 57.28 114.56 114.56 0 0 1-35.84 32 83.2 83.2 0 0 1-43.2 16.64z m7.36-96c0 10.24-2.56 50.56-5.76 79.2a73.76 73.76 0 0 0 32-13.92 99.52 99.52 0 0 0 32-27.2 61.44 61.44 0 0 0 9.76-44.96 34.4 34.4 0 0 0-14.56-22.24 24.48 24.48 0 0 0-18.56-3.68c-13.92 3.84-23.68 17.6-34.56 33.6zM578.4 331.52a49.76 49.76 0 0 1-35.36-17.12 8 8 0 0 1 5.12-13.6 43.84 43.84 0 0 0 20.48-9.76c17.92-12.48 35.68-25.28 52.8-38.24a78.56 78.56 0 0 0 20.8-20.16 8 8 0 0 1 6.08-3.84 8.32 8.32 0 0 1 6.72 2.56c3.84 4.32 7.68 8.8 11.36 13.28s7.2 8.64 10.88 12.64a12 12 0 0 1 3.2 5.92 11.68 11.68 0 0 1-4.8 11.52 411.04 411.04 0 0 1-58.72 42.72 87.52 87.52 0 0 1-33.76 13.6z m-12.8-19.52a25.28 25.28 0 0 0 16 3.36 74.4 74.4 0 0 0 27.36-11.36 395.84 395.84 0 0 0 53.76-38.88l-8.48-10.08-4.64-5.44a125.44 125.44 0 0 1-18.56 16c-17.28 12.96-35.2 26.08-53.28 38.56a103.52 103.52 0 0 1-12.16 7.68zM663.36 378.72a49.76 49.76 0 0 1-35.36-17.12 8 8 0 0 1 5.12-13.6 44.16 44.16 0 0 0 20.48-9.76c18.08-12.64 35.84-25.6 52.8-38.24a80 80 0 0 0 20.96-20.16 8 8 0 0 1 6.08-3.84 8.32 8.32 0 0 1 6.72 2.56c4 4.32 7.68 8.8 11.52 13.28s7.2 8.64 10.88 12.64a11.2 11.2 0 0 1-1.44 17.28 409.92 409.92 0 0 1-58.88 42.88 86.72 86.72 0 0 1-33.76 13.6z m-12.8-19.52a25.6 25.6 0 0 0 16 3.36 73.28 73.28 0 0 0 27.52-11.36 391.68 391.68 0 0 0 53.92-38.88l-8.48-9.92-4.64-5.6a125.44 125.44 0 0 1-18.56 16c-17.12 12.8-34.88 25.76-53.28 38.56a106.88 106.88 0 0 1-12.48 7.84zM401.12 635.36h-106.56A70.72 70.72 0 0 1 224 564.8v-32a70.72 70.72 0 0 1 70.72-70.72h106.56a70.72 70.72 0 0 1 70.72 70.72v32a70.72 70.72 0 0 1-70.88 70.56z m-106.56-157.92A54.72 54.72 0 0 0 240 532.16v32a54.72 54.72 0 0 0 54.72 54.72h106.56a54.72 54.72 0 0 0 54.72-54.72v-32a54.72 54.72 0 0 0-54.72-54.72zM742.24 635.36h-106.56a70.72 70.72 0 0 1-70.72-70.72v-32a70.72 70.72 0 0 1 70.72-70.72h106.56a70.72 70.72 0 0 1 70.72 70.72v32a70.72 70.72 0 0 1-70.72 70.72z m-106.56-157.92a54.72 54.72 0 0 0-54.72 54.72v32a54.72 54.72 0 0 0 54.72 54.72h106.56a54.72 54.72 0 0 0 54.72-54.72v-32a54.72 54.72 0 0 0-54.72-54.72z"  ></path><path d="M516.32 563.2a188.96 188.96 0 0 1-55.04-7.2 8 8 0 0 1 4.96-15.2 211.84 211.84 0 0 0 104.8 0 8 8 0 1 1 3.68 16 252.96 252.96 0 0 1-58.4 6.4zM231.84 556.48a7.84 7.84 0 0 1-4.16-1.12l-92.8-57.12a8 8 0 1 1 9.12-13.76l92.8 57.12a8 8 0 0 1-4.16 14.88zM809.6 556.48a8 8 0 0 1-4.16-14.88l92.8-57.12a8 8 0 0 1 8.32 13.6l-92.8 57.12a8 8 0 0 1-4.16 1.28z"  ></path></symbol></svg>',o=(o=document.getElementsByTagName("script"))[o.length-1].getAttribute("data-injectcss"),s=function(c,a){a.parentNode.insertBefore(c,a)};if(o&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(c){console&&console.log(c)}}function n(){i||(i=!0,t())}function d(){try{e.documentElement.doScroll("left")}catch(c){return void setTimeout(d,50)}n()}a=function(){var c,a;(a=document.createElement("div")).innerHTML=h,h=null,(c=a.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",a=c,(c=document.body).firstChild?s(a,c.firstChild):c.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),a()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(t=a,e=c.document,i=!1,d(),e.onreadystatechange=function(){"complete"==e.readyState&&(e.onreadystatechange=null,n())})}(window);
### 回答1: 好的,下面是一个简单的示例: HTML部分: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登陆页面</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>登陆页面</h1> <form> <label for="username">用户名:</label> <input type="text" id="username" name="username"> <label for="password">密码:</label> <input type="password" id="password" name="password"> <button type="submit">登陆</button> </form> </div> <script src="script.js"></script> </body> </html> ``` CSS部分: ```css .container { margin: 0 auto; max-width: 600px; padding: 20px; text-align: center; } h1 { font-size: 36px; } form { display: inline-block; text-align: left; } label { display: block; margin-bottom: 10px; } input[type="text"], input[type="password"] { padding: 10px; width: 100%; margin-bottom: 20px; border: none; border-radius: 3px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); font-size: 16px; } button[type="submit"] { background-color: #4CAF50; color: #fff; padding: 10px 20px; border: none; border-radius: 3px; font-size: 16px; cursor: pointer; } button[type="submit"]:hover { background-color: #3e8e41; } ``` JS部分: ```js const form = document.querySelector('form'); form.addEventListener('submit', (e) => { e.preventDefault(); const username = form.elements.username.value; const password = form.elements.password.value; // 在这里可以将用户名和密码发送给后端进行验证 console.log(`username: ${username}, password: ${password}`); }); ``` 这个示例是一个基本的登陆页面,包含一个用户名输入框、一个密码输入框和一个登陆按钮。当用户点击登陆按钮时,会通过JavaScript获取输入框中的用户名和密码,然后可以将其发送给后端进行验证。这里我们只是简单地输出了用户名和密码到控制台中。 ### 回答2: 利用HTMLCSSJavaScript可以制作出具有交互功能的登录页面。 首先,使用HTML创建登录表单的结构。可以包括一个标题,用于提示用户进行登录,以及两个输入框,一个用于输入用户名,另一个用于输入密码。同时,还需要一个按钮,用于用户点击进行登录操作。 接下来,使用CSS样式化登录表单,可以设置背景颜色、字体样式、边框等,使登录页面看起来更加美观。可以设置输入框和按钮的样式,例如修改大小、颜色、边框等属性。 与此同时,通过JavaScript实现交互功能,使得登录页面能够响应用户的操作。可以通过事件监听,例如监听按钮的点击事件,在点击按钮后执行特定的操作。可以检查表单输入是否为空,或者验证输入的用户名和密码是否符合要求。根据验证结果,可以弹出提示框告知用户登录成功或失败,并可以根据验证结果进行页面的跳转。 总结来说,利用HTMLCSSJavaScript制作登录页面可以通过HTML创建结构,通过CSS样式化美化界面,通过JavaScript实现交互功能,以使页面具有用户友好的登录体验。 ### 回答3: 利用HTMLCSSJS制作登陆页面是一种常见的开发方式,以下是一个简单的示例: HTML部分: ```html <!DOCTYPE html> <html> <head> <title>登陆页面</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>用户登陆</h2> <form id="login-form"> <label for="username">用户名:</label> <input type="text" id="username" name="username"> <br> <label for="password">密码:</label> <input type="password" id="password" name="password"> <br> <input type="submit" value="登陆"> </form> <script src="script.js"></script> </body> </html> ``` CSS部分(style.css): ```css body { text-align: center; background-color: #f2f2f2; } h2 { color: #333; } label { display: inline-block; width: 80px; } input[type="text"], input[type="password"] { padding: 5px; margin-bottom: 10px; } input[type="submit"] { padding: 5px 10px; background-color: #337ab7; color: #fff; border: none; cursor: pointer; } input[type="submit"]:hover { background-color: #23527c; } ``` JS部分(script.js): ```javascript // 监听表单提交事件 document.getElementById("login-form").addEventListener("submit", function(event) { event.preventDefault(); // 阻止表单默认提交行为 var username = document.getElementById("username").value; var password = document.getElementById("password").value; // 进行用户名和密码验证逻辑 if (username === "admin" && password === "123456") { alert("登陆成功!"); } else { alert("用户名或密码错误!"); } }); ``` 以上示例为一个简单的登陆页面,用户输入用户名和密码后,通过JS进行简单的验证逻辑。如果用户名为"admin"且密码为"123456"则弹出"登陆成功"的提示框,否则弹出"用户名或密码错误"的提示框。这个示例可以作为一个基础的登陆页面的起点,你可以在此基础上继续扩展和完善。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

初念哦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值