登录页面案例

已于 2024-02-01 01:05:44 修改
阅读量2.1k 收藏 25
点赞数 6
分类专栏： CSS常见小案例 文章标签： css 前端 html
于 2022-10-16 20:52:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51447496/article/details/127352207
版权
  • 作者简介：一名后端开发人员，每天分享后端开发以及人工智能相关技术，行业前沿信息，面试宝典。
  • 座右铭：未来是不可确定的，慢慢来是最快的。
  • 个人主页：极客李华-CSDN博客
  • 合作方式：私聊+
  • 这个专栏内容：BAT等大厂常见后端java开发面试题详细讲解，更新数目100道常见大厂java后端开发面试题。
  • 我的CSDN社区：https://bbs.csdn.net/forums/99eb3042821a4432868bb5bfc4d513a8
  • 微信公众号，抖音，b站等平台统一叫做：极客李华，加入微信公众号领取各种编程资料，加入抖音，b站学习面试技巧，职业规划

第一步:构建HTML框架

简介：本文用最通俗的语言，一步步教会大家CSS构建登录页面。
首先构建HTML框架，包含用户名，密码，记住密码，注册这几个功能。
如果大家HTML不牢固，请看我的这篇博客:https://blog.csdn.net/qq_51447496/article/details/127158655

<body>
    <form>
        <p>用户名<br />
            <input type="text" class="textinput" placeholder="请输入用户名" />
        </p>
        <p>密码<br />
            <input type="password" class="textinput" placeholder="请输入密码" />
        </p>
        <p>
            <input id="remember" type="checkbox" /><label for="smtxt">记住密码</label>
        </p>
        <p>
            <input type="submit" value="登录" />
        </p>
        <p class="smtxt">还没有账户？<a href="注册界面.html">注册</a></a>

        </p>
    </form>
</body>

运行结果：
在这里插入图片描述

第二步：CSS渲染

2.1先渲染form框架

简介：先构造大框架，从整体出发，再优化细节。

<style>
        form{
            /* 设置form大小 */
            width: 400px;
            height: 250px;

            /* 加个背景颜色 */
            background-color: #E1E9EF;

            /* 再设置内边距 使得内容更偏向于中央位置 */
            /* 上方，下方内边距为120px 与 左边与右边均为100px 按照逆时针 */
            /* 但是会撑大盒子 */
            padding: 120px 100px;

            /* 设置文本文字的大小 */
            font-size: 18px;

            /* 添加圆角边框 */
            border-radius: 10px;

            /* 增加外边距 */
            /* 上下120px 然后左右居中 */
            margin: 120px auto;
        }
    </style>

padding撑大盒子
在这里插入图片描述

运行结果：
在这里插入图片描述
最后盒子分布：
在这里插入图片描述

2.2渲染账号与密码输入文本框

简介：给文本框，进行细节的渲染。

   <style>
        form{
            /* 设置form大小 */
            width: 400px;
            height: 250px;

            /* 加个背景颜色 */
            background-color: #E1E9EF;

            /* 再设置内边距 使得内容更偏向于中央位置 */
            /* 上方，下方内边距为120px 与 左边与右边均为100px 按照逆时针 */
            /* 但是会撑大盒子 */
            padding: 120px 100px;

            /* 设置文本文字的大小 */
            font-size: 18px;

            /* 添加圆角边框 */
            border-radius: 10px;

            /* 增加外边距 */
            /* 上下120px 然后左右居中 */
            margin: 120px auto;
        }

        .textinput{
            /* 设置宽高 */
            height: 40px;
            width: 300px;

            /* 设置内边距 */
            padding: 0 35px;

            /* 去除边框 */
            border: none;

            /* 设置背景颜色 */
            background: #F8F9F9;

            /* 设置字体大小 */
            font-size: 15px;

            /* 给文本框加上阴影 */
            box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa;

            /* 给文本框加上圆角边框 */
            border-radius: 5px;

            /* 给文本框中输入文字加上颜色 */
            color: saddlebrown;
        }
    </style>

运行结果：
在这里插入图片描述

2.3提交与注册的渲染

2.3.1登录按钮渲染

 <style>
        form{
            /* 设置form大小 */
            width: 400px;
            height: 250px;

            /* 加个背景颜色 */
            background-color: #E1E9EF;

            /* 再设置内边距 使得内容更偏向于中央位置 */
            /* 上方，下方内边距为120px 与 左边与右边均为100px 按照逆时针 */
            /* 但是会撑大盒子 */
            padding: 120px 100px;

            /* 设置文本文字的大小 */
            font-size: 18px;

            /* 添加圆角边框 */
            border-radius: 10px;

            /* 增加外边距 */
            /* 上下120px 然后左右居中 */
            margin: 120px auto;
        }

        .textinput{
            /* 设置宽高 */
            height: 40px;
            width: 300px;

            /* 设置内边距 */
            padding: 0 35px;

            /* 去除边框 */
            border: none;

            /* 设置背景颜色 */
            background: #F8F9F9;

            /* 设置字体大小 */
            font-size: 15px;

            /* 给文本框加上阴影 */
            box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa;

            /* 给文本框加上圆角边框 */
            border-radius: 5px;

            /* 给文本框中输入文字加上颜色 */
            color: saddlebrown;
        }

        /* 筛选input标签中 type为"submit"的 进行渲染*/
        input[type="submit"]{
            /* 设置宽高 */
            width: 110px;
            height: 40px;

            /* 内部文本居中 */
            text-align: center;

            /* 圆角边框 */
            border-radius: 5px;

            /* 设置字体 */
            font:16px "黑体";

            /* 设置背景颜色 */
            background-color: #C0C6CB;
        }
    </style>

运行结果：
在这里插入图片描述

2.3.2注册渲染

简介：给链接加一些浮空的特效和美化。

<style>
        form{
            /* 设置form大小 */
            width: 400px;
            height: 250px;

            /* 加个背景颜色 */
            background-color: #E1E9EF;

            /* 再设置内边距 使得内容更偏向于中央位置 */
            /* 上方，下方内边距为120px 与 左边与右边均为100px 按照逆时针 */
            /* 但是会撑大盒子 */
            padding: 120px 100px;

            /* 设置文本文字的大小 */
            font-size: 18px;

            /* 添加圆角边框 */
            border-radius: 10px;

            /* 增加外边距 */
            /* 上下120px 然后左右居中 */
            margin: 120px auto;
        }

        .textinput{
            /* 设置宽高 */
            height: 40px;
            width: 300px;

            /* 设置内边距 */
            padding: 0 35px;

            /* 去除边框 */
            border: none;

            /* 设置背景颜色 */
            background: #F8F9F9;

            /* 设置字体大小 */
            font-size: 15px;

            /* 给文本框加上阴影 */
            box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa;

            /* 给文本框加上圆角边框 */
            border-radius: 5px;

            /* 给文本框中输入文字加上颜色 */
            color: saddlebrown;
        }

        /* 筛选input标签中 type为"submit"的 进行渲染*/
        input[type="submit"]{
            /* 设置宽高 */
            width: 110px;
            height: 40px;

            /* 内部文本居中 */
            text-align: center;

            /* 圆角边框 */
            border-radius: 5px;

            /* 设置字体 */
            font:16px "黑体";

            /* 设置背景颜色 */
            background-color: #C0C6CB;
        }
        a {
            /* 去除下划线 */
            text-decoration: none;
        }

        a:hover {
            /* 悬空的时候有被选中的样子 出现下划线*/
            text-decoration: underline;
        }
    </style>

运行结果：
在这里插入图片描述

第三步：完善一下

简介：加一个背景，透明度。
最后代码：

<!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>
    <style>
        body{
            background: url(./images/樱花.png);
            /* 设置背景铺满 */
            background-repeat:no-repeat;
            background-size:100%;

        }
        form{            
            /* 设置form大小 */
            width: 400px;
            height: 250px;

            /* 加个背景颜色 */
            background-color: #E1E9EF;

            /* 设置透明度 */
            opacity: 80%;

            text-align: center;
            /* 再设置内边距 使得内容更偏向于中央位置 */
            /* 上方，下方内边距为120px 与 左边与右边均为100px 按照逆时针 */
            /* 但是会撑大盒子 */
            padding: 120px 100px;

            /* 设置文本文字的大小 */
            font-size: 18px;

            /* 添加圆角边框 */
            border-radius: 10px;

            /* 增加外边距 */
            /* 上下120px 然后左右居中 */
            margin: 120px auto;
        }

        .textinput{
            /* 设置宽高 */
            height: 40px;
            width: 300px;

            /* 设置内边距 */
            padding: 0 35px;

            /* 去除边框 */
            border: none;

            /* 设置背景颜色 */
            background: #F8F9F9;

            /* 设置字体大小 */
            font-size: 15px;

            /* 给文本框加上阴影 */
            box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa;

            /* 给文本框加上圆角边框 */
            border-radius: 5px;

            /* 给文本框中输入文字加上颜色 */
            color: saddlebrown;
        }

        /* 筛选input标签中 type为"submit"的 进行渲染*/
        input[type="submit"]{
            /* 设置宽高 */
            width: 110px;
            height: 40px;

            /* 内部文本居中 */
            text-align: center;

            /* 圆角边框 */
            border-radius: 5px;

            /* 设置字体 */
            font:16px "黑体";

            /* 设置背景颜色 */
            background-color: #C0C6CB;
        }
        a {
            /* 去除下划线 */
            text-decoration: none;
        }

        a:hover {
            /* 悬空的时候有被选中的样子 出现下划线*/
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <form>
        <p>用户名<br />
            <input type="text" class="textinput" placeholder="请输入用户名" />
        </p>
        <p>密码<br />
            <input type="password" class="textinput" placeholder="请输入密码" />
        </p>
        <p>
            <input id="remember" type="checkbox" /><label for="smtxt">记住密码</label>
        </p>
        <p>
            <input type="submit" value="登录" />
        </p>
        <p class="smtxt">还没有账户？<a href="注册界面.html">注册</a></a>

        </p>
    </form>
</body>

</html>

运行结果：
在这里插入图片描述
如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历等内容，让大家更好学习编程，我的抖音，B站也叫极客李华。大家喜欢也可以关注一下

极客李华
关注
  • 6
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
樱花飞舞
diejian7742的博客
02-28 7375
<!doctype html> <html> <head> <meta charset="utf-8"> <title>樱花漫天飞舞</title> </head> <style> body { padding:0; margin:0; overflow:hidden; ...
案例——登录界面
01-08
如果没有获取到用户信息，则跳转到登录界面。 登录小程序实例代码 1.创建一个新工程 2.删除logs文件夹 3.建立login和user界面 4.login.js： loginBtnClick: function () { // 用户名和密码验证的过程 app.appData....
jquery登录界面案例
04-08
五中很炫的jquery做的登录界面，不看会后悔的哦，很容易套用。
简单网页版的注册登录案例（JSP+CSS+MySQL+Servlet+MVC设计思想，含源码！）
qq_44495081的博客
02-15 5979
一、登陆注册小案例 1、数据库创建与连接测试 创建数据库weblogin，创建users用户表 #创建表users CREATE TABLE `weblogin`.`users`( `uid` INT(10) ZEROFILL NOT NULL AUTO_INCREMENT COMMENT '用户ID', `username` VARCHAR(100) COMMENT '用户名', `...
简单的登录页面
chenyu_Yang的博客
04-01 124
【代码】简单的登录页面。
Java Web应用小案例 - 实现用户登录功能
howard2005的专栏
12-08 2825
多种方式实现用户登录功能
五款炫酷精美动态登录页面，彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码
叶绿体不忘呼吸
12-30 6009
五款炫酷精美动态登录页面，彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码，拿来即可用。
动态登录页面（1）
weixin_57725431的博客
08-05 1033
首先。。。。。
动态背景的登入注册界面
qq_50898676的博客
06-12 1618
用canvas做动态背景写登入注册页面
前端H5动态背景登录页面（下）
最新发布
qq_43826289的博客
04-24 592
前端H5动态背景登录页面（下）
android模拟实现QQ登录界面
07-14
这个资源主要是使用Android模拟开发了一个QQ登录界面的小案例。 内容概要：了解基础Android组件的使用，以及shape和selector组件美化。 适合人群：初学Android开发的小萌新，可以利用这个小案例巩固Android基础控件...
HTML+CSS实现动态背景登录页面
09-24
主要介绍了HTML+CSS实现动态背景登录页面的相关资料,需要的朋友可以参考下
炫酷登录界面效果
10-19
一个炫酷的登录界面，背景清爽、炫酷、不失逼格，你值得拥有！
登录界面背景图片
06-29
自己收集的一些漂亮的登录界面的背景图片，界面都很简洁。
酷黑登录页面效果案例.zip
07-02
酷黑登录页面效果案例.zip
前端H5_华丽注册登录界面案例2，入门学习案例（css+JS）
02-05
前端H5_华丽注册登录界面案例2，入门学习案例（css+JS）
HTML+CSS+JS实现十款好看的登录注册界面模板，赶紧收藏起来吧！
热门推荐
道阻且长，行则将至。
04-20 25万+
推荐十款好看的登录注册界面，赶紧收藏起来吧！ 界面一：简约版 界面二 界面三 界面四 界面五 界面六 界面七 界面八 界面九 界面十
Web前端登录界面
m0_51564474的博客
04-30 8223
HTML+CSS实现的一个登录界面 web前端课程学完之后做的一个东西，记录一下自己的学习过程 最终的效果图 1.HTML部分 <body> <div class="main"> <h1>Login</h1> <div class="loin"> <div class="first"> <span class="fa fa-githu
小程序酷炫动态登录页源码（动态水滴）
大爱仙尊
02-09 894
登陆页面一般都要酷炫好看一点，这里分享一个动态登录页面，页面有三个流动的小水滴。一个水滴放登录框。剩下两个水滴跳转页面和打开弹窗
html注册登录页面
01-01
以下是一个简单的HTML注册登录页面的示例： ```html <!DOCTYPE html> <html<head> <meta charset="utf-8"> <titletitle> </head> <body> <h2>注册</h2> <form action="register.php"="POST"> <label for="username">:</label> <input type="text"="username" name="username" required><br> <label for="password">密码:</label> <input type="password" id="password" name="password" required><br> <input type="submit" value="注册"> </form> <h2>登录</h2> <form action="login.php" method="POST"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required><br> <label for="password">密码:</label> <input type="password" id="password" name="password" required><br> <input type="submit" value="登录"> </form> </body> </html> ``` 这个示例中包含了一个注册表单和一个登录表单。注册表单将用户输入的用户名和密码发送到"register.php"页面进行处理，登录表单将用户输入的用户名和密码发送到"login.php"页面进行验证。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

极客李华

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值