登录注册页面

最新推荐文章于 2022-09-25 02:39:57 发布

秃头的小猿

最新推荐文章于 2022-09-25 02:39:57 发布

阅读量1.8w

点赞数 19

文章标签： html css

本文链接：https://blog.csdn.net/qq_45749629/article/details/116770576

版权

简单实现网站的登录，注册页面

一、登录界面

1、html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>
<div class="container">
    <div class="welcome">
        <h1 class="person">用户登录</h1>
    <div class="index">
        <div class="login">
     <input type="text" class="text" placeholder="请输入用户名"><br>
     <input type="password" class="password" placeholder="输入密码"><br>
     <input type="button" class="button1" value="登录"><br>
     <a href="resign.html" target="_blank"><input type="button" class="button2" value="注册"></a><br>
            <span class="forge"><a href="forge.html" target="_blank">忘记密码</a></span>
        </div>
    </div>
    </div>
</div>
</body>
</html>

2、css样式

.body{
     margin:0;
     padding:0;
 }
a{
    text-decoration: none;
}
a:hover{
    color:#6effef;
}
input{
    border:none;
    box-shadow: none;
    font-size:15px;
    color:#333333;
    outline: none;  /*鼠标点击是输入框颜色不发生改变*/
}

.text{
    height:40px;
    width:330px;
    border-radius: 10px;
}
.password{
    height:40px;
    width:330px;
    margin-top: 20px;
    border-radius: 10px;
}
.button1{
    height:40px;
    width:330px;
    background-color: #319aec;
    font-size:16px;
    margin-top:15px;
    border-radius: 10px;
    color:white;
}
.button1:hover{
    color:white;
   background-color: #286090;
}
.button2:hover{
    color:white;
    background-color: #286090;
}
.button2{
    height:40px;
    width:330px;
    background-color: #319aec;
    font-size:16px;
    margin-top:15px;
    /*margin-bottom: 100px;*/
    border-radius: 10px;
    color:white;
    display:block;
}
.container{
    background-image: url(img/photo.jpg);
    background-size: 1500px 750px;
    width:1500px;
    height:750px;
    border:1px black solid;
    /*background-repeat: no-repeat;*/
}
.index{
    /*margin-left:800px;*/
    /*margin-top: 200px;*/
    height:320px;
    width:400px;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #888;
    background-color: #edeffb;
}
.login{
    margin-left:40px;
    padding-top:40px;
}
.forge{
    display:block;
    text-align: right;
    padding-right:25px;
}
.welcome{
    margin-top:200px;
    margin-left:800px;
}
.person{
    font-size: 30px;
    color:#ffffff;
    line-height: 1em;
    text-align: center;
    font-weight:500;
    margin-right:300px;
}

二、注册界面

1、html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="resign.css" type="text/css">
</head>
<body>
<div class="container">
    <div class="welcome">
        <h1 class="person">用户注册</h1>
        <div class="index">
            <div class="login">
                <input type="text" class="text" placeholder="手机号/QQ号/微信号"><br>
                <input type="password" class="password" placeholder="输入密码"><br>
                <input type="password" class="button1" placeholder="请确保两次输入密码一致"><br>
                <a href="" target="_blank"><input type="button" class="button2" value="注册"></a><br>
                <span class="forge"><a href="index.html" target="_blank">已有账号，直接登录</a></span>
            </div>
        </div>
    </div>
</div>
</body>
</html>

2、css样式

.body{
    margin:0;
    padding:0;
}
a{
    text-decoration: none;
}
a:hover{
    color:#6effef;
}
input{
    border:none;
    box-shadow: none;
    font-size:15px;
    color:#333333;
    outline: none;  /*鼠标点击是输入框颜色不发生改变*/
}

.text{
    height:40px;
    width:330px;
    border-radius: 10px;
}
.password{
    height:40px;
    width:330px;
    margin-top: 20px;
    border-radius: 10px;
}
.button1{
    height:40px;
    width:330px;
    margin-top: 20px;
    border-radius: 10px;
}
.button2:hover{
    color:white;
    background-color: #286090;
}
.button2{
    height:40px;
    width:330px;
    background-color: #319aec;
    font-size:16px;
    margin-top:15px;
    /*margin-bottom: 100px;*/
    border-radius: 10px;
    color:white;
    display:block;
}
.container{
    background-image: url(img/photo2.jpg);
    background-size: 1500px 750px;
    width:1500px;
    height:750px;
    border:1px black solid;
    /*background-repeat: no-repeat;*/
}
.index{
    /*margin-left:800px;*/
    /*margin-top: 200px;*/
    height:320px;
    width:400px;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #888;
    background-color: #edeffb;
}
.login{
    margin-left:40px;
    padding-top:40px;
}
.forge{
    display:block;
    text-align: right;
    padding-right:25px;
}
.welcome{
    margin-top:200px;
    margin-left:800px;
}
.person{
    font-size: 30px;
    color:#ffffff;
    line-height: 1em;
    text-align: center;
    font-weight:500;
    margin-right:300px;
}