html+css登录注册页面案例

最新推荐文章于 2024-04-06 12:44:56 发布

忧郁火龙果

最新推荐文章于 2024-04-06 12:44:56 发布

阅读量1.6w

点赞数 13

分类专栏：前端小Demo 文章标签： html css3

本文链接：https://blog.csdn.net/LQlove1/article/details/124989799

版权

前端小Demo 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

一、展示效果

1. 登陆页面展示（背景图片来自网络可以自己更换）：
请添加图片描述

2. 注册页面展示：
请添加图片描述

二、需要添加的normalize.css跟common.css

代码如下（normalize.css重置样式表）：

/* 重置样式表 */

/* 重置内外边距 */
*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

/* 去除图片底部4px白边 */
img{
    vertical-align: middle;
}

/* 去除li的点 */
ul{
    list-style: none;
}

/* 重置a标签的默认样式 */
a{
    text-decoration: none;
    color: black;
}

代码如下（common.css公共样式表）：

/* 公共样式表 */


/* 左浮动 */
.fl{
    float: left;
}
/* 右浮动 */
.fr{
    float: right;
}
/* 清除浮动 */
.clearfix::after{
    content: '';
    height: 0px;
    display: block;
    clear: both;
}

/* 测试 */
.test{
    border: 1px solid red;
}

/* 重置container内边距 */
.container , .container-fuild{
    padding: 0%;
}

body{
    background-color: #f2f2f2;
}
h1,h2,h3,h4,h5,h6{
    padding: 0%;
    margin: 0%;
}

/* ================================================================================== */


/* 公共模块表 */

/* 头部模块 */

/* 尾部模块 */

三、登陆页面

<!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>登录页面</title>
  <!-- 1.重置样式 -->
  <link rel="stylesheet" href="../../asset/css/normalize.css">
  <!-- 2.公共样式 -->
  <link rel="stylesheet" href="../../asset/css/common.css">
  <!-- 3.当前样式 --> 
  <link rel="stylesheet" href="./login.css">
</head>
<body>
        <form action="#" class="" method="post">
            <div class="login "><a>登录页面</a> </div>
            <div class="userName  clearfix"><p class="fl">用户名:</p><input type="text" class="fr" id="userName" placeholder="请输入用户名"></div>
            <div  class="passWord  clearfix"><p class="fl">密码:</p><input type="text" class="fr" id="passWord" placeholder="请输入密码"></div>
            <div class="button clearfix"><button type="submit" class="fr" id="button">登录</button></div>
            <div class="register fr"><a href="../register/register.html">注册新账号</a> </div>
        </form>
  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
    integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
    crossorigin="anonymous"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
    integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
    crossorigin="anonymous"></script>
</body>

</html>


body {
    background-image: url(../../asset/img/图片1.png);
    background-repeat: no-repeat;
    background-size: 1500px auto;
}

/* ================================================================================== */
/* 登录样式 */
form {
    width: 600px;
    height: 400px;
    text-align: center;
    position: relative;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, .5);
    margin-top: 10%;
    border-radius: 20px;
    padding-top: 40px;
}

.login {
    width: 200px;
    height: 50px;
    margin: 0% auto;
    line-height: 50px;
}
.login a{
    font-size: 36px;
    color: whitesmoke;
}
.passWord,
.userName,
.button{
    width: 420px;
    margin: 0 auto;
    margin-top: 30px;
    box-sizing: border-box;
}

.passWord p,
.userName p {
    color: whitesmoke;
    font-size: 28px;
    line-height: 50px;
}

#userName,
#passWord{
    height: 50px;
    width: 320px;
    font-size: 24px;
    outline: none;
    padding-left: 20px;
    background: none;
    border-radius: 15px;
    border: 2px solid gray;
}

button {
    width: 320px;
    height: 50px;
    background: none;
    outline: none;
    border: 2px solid gray;
    border-radius: 15px;
    font-size: 24px;
    transition: all 1s;
    color: whitesmoke;
}

button:hover {
    background: rgb(175, 170, 175);
    color: whitesmoke;
}

.register {
    width: 300px;
    margin-top: 20px;

}

.register a {
    color: whitesmoke;
    font-size: 18px;
}
input{
    color: whitesmoke;
}

四、注册页面

!<!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>登录页面</title>
  <!-- 1.重置样式 -->
  <link rel="stylesheet" href="../../asset/css/normalize.css">
  <!-- 2.公共样式 -->
  <link rel="stylesheet" href="../../asset/css/common.css">
  <!-- 3.当前样式 --> 
  <link rel="stylesheet" href="./register.css">
</head>
<body>
        <form action="#" class="" method="post">
            <div class="register">注册页面</div>
            <div class="yourUserName  clearfix"><p class="fl">用户名:</p><input type="text" class="fr" id="userName" placeholder="请输入您要注册的账号"></div>
            <div  class="yourPassWord  clearfix"><p class="fl">注册密码:</p><input type="text" class="fr" id="passWord" placeholder="请输入您要注册的密码"></div>
            <div  class="email  clearfix"><p class="fl">邮箱地址:</p><input type="text" class="fr" id="email" placeholder="请输入您的邮箱"></div>
            <div class="button clearfix"><button type="submit" class="fr" id="button">点击注册</button></div>
            <div class="register fr"><a href="../login/login.html">点击跳转到登录页面</a> </div>
        </form>
  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
    integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
    crossorigin="anonymous"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
    integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
    crossorigin="anonymous"></script>
</body>

</html>


body {
    background-image: url(../../asset/img/图片1.png);
    background-repeat: no-repeat;
    background-size: 1500px auto;
}

/* ================================================================================== */
/* 登录样式 */
form {
    width: 600px;
    height: 500px;
    text-align: center;
    position: relative;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, .5);
    margin-top: 6%;
    border-radius: 20px;
    padding-top: 20px;
}
.register {
    width: 200px;
    height: 50px;
    margin: 0% auto;
    line-height: 50px;
    font-size: 36px;
    color: whitesmoke;
}
.yourPassWord,
.yourUserName,
.email,
.button{
    width: 450px;
    margin: 0 auto;
    margin-top: 30px;
    box-sizing: border-box;
}

.yourPassWord,
.yourUserName,
.email {
    color: whitesmoke;
    font-size: 28px;
    line-height: 50px;
}

#userName,
#passWord,
#email{
    height: 50px;
    width: 320px;
    font-size: 24px;
    outline: none;
    padding-left: 20px;
    background: none;
    border-radius: 15px;
    border: 2px solid gray;
}

button {
    width: 320px;
    height: 50px;
    background: none;
    outline: none;
    border: 2px solid gray;
    border-radius: 15px;
    font-size: 24px;
    transition: all 1s;
    color: whitesmoke;
}

button:hover {
    background: rgb(175, 170, 175);
    color: whitesmoke;
}

.register {
    width: 300px;
    margin-top: 20px;

}

.register a {
    color: whitesmoke;
    font-size: 18px;
}
input{
    color:whitesmoke;
}

五、可以复制

忧郁火龙果

关注

13
点赞
踩
229

收藏

觉得还不错? 一键收藏
打赏
3
评论
html+css登录注册页面案例

一、展示效果1. 登陆页面展示（背景图片来自网络可以自己更换）：2. 注册页面展示：二、需要添加的normalize.css跟common.css代码如下（normalize.css重置样式表）：/* 重置样式表 *//* 重置内外边距 */*{ margin: 0%; padding: 0%; box-sizing: border-box;}/* 去除图片底部4px白边 */img{ vertical-align: middle;}/* 去
复制链接

扫一扫