css小练习

最新推荐文章于 2024-05-10 09:43:12 发布

马码侠

最新推荐文章于 2024-05-10 09:43:12 发布

阅读量612

点赞数 6

分类专栏：前端文章标签： css div 小练习前端入门 html

本文链接：https://blog.csdn.net/qq_43093230/article/details/98038665

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Div+CSS超级梦幻登陆界面

这是效果界面展示。
这是效果显示
实现代码如下
html代码部分`.

// <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>login</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css" />
    <link rel="shortcut icon " type="images/x-icon" href="../static/image/icon.png">
    <link rel="stylesheet" href="../static/css/login.css" />
    <meta charset="utf-8">
</head>

<body>
    <div class="content">
        <div class="clear"></div>
        <div class="middle">
            <div class="login_title">喵喵喵</div>
            <div class="middle_column">
                <div class="head_column">
                    <img class="head_img" src="../static/image/33.jpg">
                </div>
                <div class="form_column">
                    <div class="username">
                        <div class="input_title">账号</div>
                        <input class="input_frame" name="loginName" id="loginName" type="text" placeholder="请输入账号"
                            maxlength="15" />
                        <div class="clear"></div>
                    </div>
                    <div class="password">
                        <div class="input_title">密码</div>
                        <input type="password" class="input_frame" name="password" id="password" placeholder="请输入密码"
                            maxlength="15" />
                        <div class="clear"></div>
                    </div>

                </div>

                <div class="clear"></div>
                <div class="btn">
                    <div class="style_btn">登录</div>
                    <div class="style_btn">注册</div>
                    <div class="tip">
                        <a class="login_link" href="#">忘记密码,使用邮箱修改密码</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../static/js/jquery.min.js" charset="utf-8"></script>
    <script src="../static/layui/layui.all.js"></script>
    <script>
        function btn() {
            var loginName = document.getElementById("loginName").value;
            var password = document.getElementById("password").value;
            $.ajax({
                url: "background",
                type: "post",
                datetype: 'json',
                data: {
                    "loginName": loginName,
                    "password": password
                },
                success: function (data) {
                    console.log("success")
                    var layer = layui.layer,
                        form = layui.form;
                    layer.msg('登录中...');
                    window.location.href = "/foreground/index";
                }
            })
        }
    </script>
</body>
</html>

CSS代码部分`.

body{
    height:175%;
    width:100%;
    margin: 0px 0px;
    /*background-color: rgb(255, 255, 255);*/
    font-size: 17px !important;
    font-weight: 500;
    font-family: Microsoft YaHei,Times,TimesNR,Georgia;
    background:url(../image/bg1.jpg);
    background-size:100% 101%;
    z-index:-1;
}
.login_title{
    text-align: center;
    margin: 13px;
    font-size: 26px;
    font-weight: 600;
    color: #d1d1ff;
}
.middle{
    margin-top:9%;
    margin-right:5%;
    float:right;
}

.middle_column{
    margin-bottom: 37%;
    /* border: 1px dotted #a29ec4; */
    border: 1px solid #c8c5e9;
    /*width:400px;*/
    border-radius:8px;
    /*背景透明文字不透明*/
    background-color: rgba(198, 200, 224, 0.5);
    filter:Alpha(opacity=50);
    *zoom:1;
    font-size: 18px;
    font-weight: 500;
}
.form_column{
    float:left;
    width:300px;
    padding:10px;
}
.username,.password{
    height:45px;
    margin:auto auto;
    line-height:32px;
    margin-top:15px;
}
.input_title{
    float:left;
    font-size: 16px;
    margin:auto auto;
}
.input_frame{
    margin:auto auto;
    margin-left:10px;
    float:left;
    display: block;
    height: 23px;
    padding: 3px 3px 3px 10px;
    border-radius: 4px;
    font-size: 15px;
    color: #4d4d4d;
    border: 1px solid #ccc;
    background-color: #fff;
    line-height:30px;
    width: 75%;
}
.tip{
    margin:10px auto;
    font-size:14px;
    color:#6ebef0;
}
.tip>a{
    columns: #4d4d4d;;
}
.login_link{
    margin-left:15px;
}
.head_column{
    text-align:center;
    margin-top: 20px;
}
.head_img{
    width:90px;
    height:90px;
    border-radius:50%;
}
.register{
    margin: 10px;
    font-size:20px;

}
.register>a{
    color:#59587c;
}
.btn{
    margin: 0 auto;
    text-align:center;

}
.style_btn{
    display:inline-block;
    width: 50px;
    height: 30px;
    background: #3aa1e6;
    border: 1px solid #25817f;
    border-radius: 3px;
    color: #fff;
    font-size: 15px;
    margin: auto;
    line-height: 30px;
}
.clear{
    clear:both;
}

.style_btn:hover{
    border: 1px solid #fcfcfc;
    cursor:pointer
}

使用素材部分

界面在背景图片方面代码还待优化，css小白小练习，欢迎指正~~

马码侠

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
css小练习

Div+CSS超级梦幻登陆界面这是效果界面展示。实现代码如下html代码部分`.// <!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>login</title> <link rel="stylesheet" h...
复制链接

扫一扫

专栏目录