盒子模型之常规流的网页运用（2）

最新推荐文章于 2024-07-25 15:07:09 发布

九里九

最新推荐文章于 2024-07-25 15:07:09 发布

阅读量161

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_44197526/article/details/109579036

版权

暴雪登录页面模仿，只含html和css

效果图
html代码
css代码

效果图

登录页面

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/gamelogin.css">
</head>
<body>
    <div class="wrapper">
         <div class="center-wrapper">
             <h1 class="logo">暴雪登录页面</h1>
         </div>
         <div class="input-wrapper">
             <div class="login">
                <form action="#">                          
                         <input type="text" placeholder="电子邮箱或手机号码">
                         <input type="pwd" placeholder="密码">
                         <input type="button" value="登录" class="btn">
                </form>
            </div>
        </div>
        <div class="line-wrapper">
            <span>或许使用以下登录账号</span>
        </div>
        <div class="logo-wrapper">
            網昜
        </div>
        <div class="sign-in-wrapper">
            <div class="txt">
                <a href="">免费创建暴雪游戏登录通行证</a>
            </div>
            <div class="txt">
                <a href="">无法登陆？</a>
            </div>
            <div class="txt">
                <a href="">安全令重新同步</a> 
            </div>
        </div>
        <div class="foot-wrapper">
            <ul class="foot-icon">
                <li>Battle.net EULA|隐私法律条款|著作权侵权</li>
                <li>沪网文〔2017〕9633-727号|增值电信业务经营许可证编号：沪B2－20080012</li>
                <li>互联网违法和不良信息举报电话：0571-28090163|沪公网安备：31011502002167</li>
                <li class="copyright">©2020暴雪娱乐有限公司版权所有。</li>
                <li><img src="img/footer-icon-cyberpolice.4aTv1.gif" alt="" name="icon">
                <img src="img/footer-icon-sgs.3fzfU.gif" alt="" name="icon">
                <img src="img/footer-icon-shjbzx.3IShX.gif" alt="" name="icon">
                <img src="img/footer-icon-zx100.3ZaAz.gif" alt="" name="icon"></li>
            </ul>

        </div>
    </div>
</body>
</html>

css代码

@import 'reset.css';

body{
    margin: 0px;
    width: 100%;
    /* height: 1000px;   */
    background-image: url(../img/login-background-1280.4JLnG.jpg);
    background-color: black;
    background-repeat: no-repeat;
    background-size: 100%;
    /* 最小宽度 */
    min-width: 320px;
}
div{
    margin: 0 auto;
}
.wrapper{
    box-sizing: border-box;
    width: 1000px;
    margin: 0 auto;
}
.wrapper .center-wrapper{
    width: 100%;
    margin: 0 auto;
}
.center-wrapper .logo{
    margin: 20px auto 20px auto;
    width: 200px;
    height: 105px;
    background-image: url(../img/blizzard-default.1C4OH.png);
    text-indent: -9999px;
    overflow: hidden;
}
.wrapper .input-wrapper{
    max-width: 500px;
    min-width: 280px;
    padding: 0 20px;
    margin: 0 auto;
}
.input-wrapper .login{
    width: 100%;
    margin: 0 auto;
    max-width:360px ;
}
input{
    width: 100%;
    height: 40px;
    margin: 5px 0;
    font-size: 17px;
    color: rgba(255,255,255, 0.7);
    background-color: rgba(0, 0, 0, .5);
    border: 1px solid  rgba(255,255,255, 0.3);
    /* 边框外的轮廓 */
    outline: 0;
    /* 边框圆角 */
    border-radius: 2px;
    padding: 0 10px;
    box-sizing: border-box;
}
.login .btn{
    width: 100%;
    height: 40px;
    font-size: 17px;
    color: #fff;
    background-color: #0e86ca;
    border: 1px solid #10a1de;
    /* 增加立体效果 */
    box-shadow: 0 1px 1px rgba(0, 0, 0, .3),
    0 0 1px rgba(255,255,255, 0.15) inset ;
    margin-top: 8px;
    margin-bottom:  6px;
}
.wrapper .line-wrapper{
    font-size: 13px;
    color: rgba(255,255,255, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    margin: 10px 0 20px;
}

.line-wrapper span{
    display: inline-block;
}

.line-wrapper span::before,.line-wrapper span::after{
    content: "";
    display: inline-block;
    height: 5px;
    width: 106px;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-right: 3px;
    margin-left: 3px;
}

.wrapper .logo-wrapper{
    width: 40px;
    height: 40px;
    background-color: cornsilk;
    color: rgba(220, 20, 60, 0.719);
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    font-size: 14px;
}
.sign-in-wrapper{
    text-align: center;
}
.sign-in-wrapper .txt{
    margin-top: 20px;
}
.sign-in-wrapper .txt a{
    color: rgb(34, 90, 120);
}
.foot-wrapper{
    text-align: center;
    color: silver;
    font-size: 12px;
    letter-spacing: 2px;
    margin-top: 100px;
}
ul.foot-icon li{
    padding-bottom: 20px;
 }
 [name="icon"]{
    width: 25px;
    height: 25px;
    padding-right: 20px;
}
.copyright{
    color: rgba(255,255,255, 0.1);
}

九里九

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型之常规流的网页运用（2）

暴雪登录页面模仿，只含html和css效果图html代码css代码效果图html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&gt
复制链接

扫一扫