登录页面案例

简介: 登录页面案例

第一步:构建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站也叫极客李华。大家喜欢也可以关注一下

相关文章
|
5月前
|
存储 前端开发 搜索推荐
Web前端网站(一) - 登录页面及账号密码验证
页面背景动态是烟花和文字特效与缓缓下落的雪花相结合,在登录表单的旁边还有五个白色光圈以不规则的方式环绕,当鼠标靠近时,会发出彩色的光芒~~~
89 1
Web前端网站(一) - 登录页面及账号密码验证
|
6月前
|
小程序 JavaScript 数据库
小程序登录页面
该文介绍了使用小程序云开发实现登录和注册的步骤,包括界面设计和后端逻辑。界面使用了`wxss`和`wxml`编写,样式精致,包含手机号和密码输入、登录按钮、注册和忘记密码选项。在`js`中,重点处理了用户输入的账号和密码,通过云数据库查询验证用户是否存在,使用标志位`flag`判断,若账号或密码错误,显示相应提示。文章总结了利用for循环比对数据库账号的难点,并表达了作者的学习心得。
52 1
|
5月前
|
前端开发 JavaScript 程序员
程序员必知:完成登录与注册页面的前端
程序员必知:完成登录与注册页面的前端
19 0
|
前端开发 JavaScript Java
JavaWeb用户信息管理系统-创建登录页面
JavaWeb用户信息管理系统-创建登录页面
86 0
|
6月前
|
前端开发 数据安全/隐私保护
HTML+CSS登录页面
HTML+CSS登录页面
80 0
jira学习案例19-实现登录页面2
jira学习案例19-实现登录页面2
54 0
jira学习案例19-实现登录页面2
jira学习案例18-实现登录页面1
jira学习案例18-实现登录页面1
40 0
jira学习案例18-实现登录页面1
|
前端开发
实现用户注册的页面
实现用户注册的页面
56 0
|
前端开发
前端简单项目--登录界面
前端简单项目--登录界面
125 0
前端简单项目--登录界面