关于css元素的布局-设计一个登陆界面

最新推荐文章于 2024-09-03 14:47:13 发布

lemon1999123

最新推荐文章于 2024-09-03 14:47:13 发布

阅读量2k

点赞数 1

分类专栏： HTML/css

本文链接：https://blog.csdn.net/lemon1999123/article/details/82632226

版权

HTML/css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

.content{
    width: 1500px;
    height: 800px;
    margin: 0px;
    background: #FF99CC;
}
.content h1{
    font-size: 50px;
    padding-top: 200px;
    text-align: center;
    color: aquamarine;
}
.content form{
    margin: fill;
    padding: 1px;
}
.content form input{
    margin-left: 600px;
    border:1px ;
    width:300px;
    height:36px;
    display:block;
    border-radius:30px;
    text-align:center;
    margin-top:50px;
    font-size:24px;
}
.one{
    margin-left: 500px;
}
.content form button{
    background:#FC3;
    width:100px;
    height:36px;
    margin-top:50px;
    margin-left:100px;
    border-radius:30px;
}
.content form input:hover{
    background:#F99;
}

首先先定义一个大的主容器content的样式，然后在定义下面的元素，首先，在content下面定义了一个form,再在form下面定义其他的input样式以及button样式,因为输入账号密码框是上下相对的，我直接采用默认在div下面直接写,而两个button按钮是一个在左一个在右的，所以我采用了表格的样式，把他们两个设置在了同一行，两个button距离100px，此时，第一个button会离边框也是100px，所以我又定义了一个块级元素div，它的样式是one，离边框500px。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="register.css"/>
</head>
<body>
<div class="content">
    <h1>Welcome to use the library</h1>
    <hr/>
    <form>
        <div >
            <input type="text" placeholder="请输入账号" name=" "/>
            <input type="text" placeholder="请输入密码" name=" "/>
        </div>

        <div class="one">
            <table>
                <tr>
                    <td><button type="submit" >登录</button> </td>
                    <td><button type="submit" >注册</button>  </td>
                </tr>
            </table>

        </div>
    </form>
    <script>
        function signIn(){
            console.log("登录");
        }
        function register() {
            console.log("注册");

        }
    </script>
</div>
</body>
</html>