html+css登录注册页面案例

一、展示效果

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;
}

五、可以复制

html+css登录注册页面案例相关推荐

UI设计灵感|App的登录注册页面案例参考
良好的交互细节是每一个优秀 App 的共同品质,而多数 App 被用户抛弃就是因为登录注册页面的问题,只有从用户场景和视角来思考产品,便能设计出打动人心的 App. 集设网www.ijishe.com ...
前端之登录注册页面案例
一.效果图 (1)登录界面 (2)注册界面二.详细设计 (1)登录界面 <!DOCTYPE html> <html lang="en"><hea ...
【前端学习日志】HTML表格表单注册页面案例+CSS选择器
今日学习一.HTML部分 1.表格的基本语法 2.表头单元格标签 3.还是表头单元格标签 4.小说排行榜案例 5.合并单元格 6.无序列表 7.有序列表 8.自定义列表 9.表单域 10.Input ...
HTML+CSS+JavaScript 实现登录注册页面(超炫酷)
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
【HTML+CSS+JS】登录注册页面大合集
前言学JS也学了一段时间,正巧碰上了人工智能要调用人脸识别接口进行真人人脸识别,于是便萌生了用人脸来进行注册和登录的想法,这样的话就需要开发一个登录注册页面,然后用JS绑定注册事件调用人脸识别接口进 ...
JavaScript+css实现的响应式登录注册页面web前端html源码
大家好,今天给大家介绍一款,JavaScript+css实现的响应式登录注册页面web前端html源码(图1).送给大家哦,获取方式在本文末尾. 图1 响应式设计,适应各种分辨率(图2) 图2 登录界 ...
使用html+css+js实现的登录注册页面
使用html+css+js实现的登录注册页面这学期学了web,按照自己的想法实现下面的登录注册页面. 在注册页面里,使用js实现对邮箱格式.密码强度和密码一致性的检查. 源码放在github上,顺带 ...
php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
清爽登录界面html,基于css3实现扁平简洁清爽的登录注册页面代码
今天给大家分享一款基于css3实现扁平简洁清爽的登录注册页面代码,使用浅色设计,兼容移动设备,加入了基本的表单验证,适合大部分网站. 代码很简单有css样式,index.html两部分代码.感兴趣的朋 ...

html+css登录注册页面案例

一、展示效果

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

三、登陆页面

四、注册页面

五、可以复制

html+css登录注册页面案例相关推荐

最新文章

热门文章