通过CSS简单修饰用户登录页面

已于 2023-04-22 18:33:58 修改
阅读量5.5k 收藏 81
点赞数 8
文章标签： html css
于 2023-04-22 18:29:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64313535/article/details/130308040
版权
该文展示了如何使用基础的CSS和HTML知识创建用户登录、注册以及相关功能的页面。代码包含详细的注释，页面设计包括了登录、注册、找回密码和重置密码的过程，各页面通过超链接相互连接。
摘要由CSDN通过智能技术生成

目录

前言

一、CSS代码

二、HTML部分

1、用户登录

2、用户注册

3、注册成功

4、找回密码

5、重置密码

6、重置成功

三、运行效果图

前言

        前几天老师要求用CSS和HTML做的一个用户登录页面，个人感觉这些知识入门挺简单的，精通的话不太容易，这里就用入门知识简单做一下登录及注册页面，代码及网页效果图如下。

一、CSS代码

        在以下代码中做了大量注释，一目了然，不过重复的地方没有做。

body{
    background-color:rgb(75,131,228);
}

            /*登录页面*/
div.box1{
    margin: auto;       /*盒子外边距设置*/   
    width: 380px;
    height: 250px;
    background-color: white;
    padding: 20px;      /*盒子内边距设置*/
    line-height: 30px;      /*盒子内行边距设置*/
    border-radius: 5px;     /*盒子边框圆角设置*/
}

.myborder1{
    border: none;       /*边框样式设置为不显示（默认为显示）*/
    border-bottom: 1px solid #333;      /*底部边框属性设置*/
    width: 200px;
}
.mybutton1{
    height: 30px;
    width: 230px;
    background-color: rgb(75,131,228);
    border: none;           /*按钮边框设置为不显示*/
    color: white;
    font-size: 20px;        /*字体大小设置*/
    letter-spacing: 2.0ex;      /*按钮内文字间距设置*/
    border-radius: 5px;     /*按钮边框圆角设置*/
}
.a1{
    display: inline-block;     /*设置布局方式为行内块*/
    text-align: left;          /*设置文字对齐方式为左对齐*/
    width: 100px;
}
.a2{
    display: inline-block;
    text-align: right;          /*设置文字对齐方式为右对齐*/
    width: 80px;
}

            /*注册页面*/
div.box2{
    margin: auto;
    width: 400px;
    height: 300px;
    background-color: white;
    padding: 20px;
    line-height: 30px;
    border-radius: 5px;
}

.myborder2{
    border: none;
    border-bottom: 1px solid #333; 
    width: 220px; 
    text-align: left; 
    
}
.myborder2-1{
    border: none;
    border-bottom: 1px solid #333; 
    width: 150px;  
    display: inline-block;
    text-align: left;
}

.mybutton2{
    width: 260px;
    height: 30px;
    background-color: rgb(75,131,228);
    border: none;
    color: white;
    letter-spacing: 2.0ex;
    font-size: 20px;
    border-radius: 5px; 
}

二、HTML部分

        HTML部分我每一个页面写成一个文件，这样检查起来也比较明了，就是重复的代码量也变得挺多的。

1、用户登录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="formDemo.css" rel="stylesheet" type="text/css">    /*从外部链接CSS文件*/
</head>
<body>
    <div class="box1">
        <center>
    <h1>用户登录</h1>
    <table cellspacing="0"  width="360px">
    <form>
        <tr>
            <td>手机号码：</td> 
            <td><input type="tel" name="text_name" placeholder="请输入手机号码" class="myborder1"/></td></tr>
        <tr>       
            <td>密码：</td>
            <td><input type="password" maxlength="8" placeholder="请输入密码" class="myborder1"/></td></tr>
        </table><br>
        <input type="button" value="登录" class="mybutton1"/>
        <br>
        <a1 class="a1">
        <a href="注册.html" target="_self">我要注册</a></a1>
        <a href="找回密码.html" target="_self">忘记密码</a>
    </form>
</center>
</div>
</body>
</html>

2、用户注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="formDemo.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="box2" >
        <center>
    <h1>用户注册</h1>
    <table cellspacing="0"  width="380px">
    <form>
        <tr>
        <td>手机号码：</td> 
        <td><input type="tel" name="text_name" placeholder="请输入手机号码" class="myborder2"/></td></tr>
        <tr>
        <td>验证码：</td>
        <td><input type="text" name="text_name" maxlength="6" placeholder="请输入短信验证码" class="myborder2-1"/>
        <input type="button" value="发送验证码" style=" background-color: rgb(75,131,228);
                                                        height: 25px;
                                                        border: none;
                                                        color: white;
                                                        border-radius: 3px;"/></td></tr> 
        <tr>       
        <td>密码：</td>
        <td><input type="password" maxlength="8" placeholder="请输入密码" class="myborder2"/></td></tr>
        <tr>
        <td>再次输入密码：</td>
        <td><input type="password" maxlength="8" placeholder="请再次输入密码" class="myborder2"/></td></tr>
        </table><br>
        <input type="button" value="注册" onclick="window.location.href='注册成功.html'" class="mybutton2"/>
        <br>
        已有账号，
        <a href="登录.html" target="_self">去登录</a>
    </form>
</center>
</div>

</body>
</html>

3、注册成功

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="formDemo.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="box1" >
        <center>
    <h1>注册成功</h1>
    <br>
    您的账户已注册成功，快
    <a href="登录.html" target="_self">去登录</a>
    吧！
        </center>
    </div>
</body>
</html>

4、找回密码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="formDemo.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="box1" >
        <center>
    <h1>找回密码</h1>
    <table cellspacing="0"  width="360px">
    <form>
        <tr>
            <td>手机号码：</td> 
            <td><input type="text" name="text_name" maxlength="11" placeholder="请输入手机号码" class="myborder1"/></td></tr>
        <tr>
            <td>验证码：</td>
            <td><input type="text" name="text_name" maxlength="6" placeholder="请输入短信验证码" class="myborder2-1"/>
        <input type="button" value="发送验证码"/></td></tr>
        </table><br>
        <input type="button" value="下一步" onclick="window.location.href='重置密码.html'" class="mybutton2"/>
    </form>
        </center>
    </div>
</body>
</html>

5、重置密码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="formDemo.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="box1">
        <center>
    <h1>重置密码</h1>
    <table cellspacing="0"  width="360px">
    <form>
        <tr>       
            <td>密码：</td>
            <td><input type="password" maxlength="8" placeholder="请输入密码"/></td></tr>
        <tr>
            <td>再次输入密码：</td>
            <td><input type="password" maxlength="8" placeholder="请再次输入密码"/></td></tr>
        </table><br>
        <input type="button" value="重置密码" onclick="window.location.href='重置成功.html'" class="mybutton2"/>
    </form>
        </center>
    </div>
</body>
</html>

6、重置成功

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="formDemo.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="box1" >
        <center>
    <h1>密码重置成功</h1>
    <br>
    您的密码已重置，快
    <a href="登录.html" target="_self">去登录</a>
    吧！
        </center>
    </div>
</body>
</html>

三、运行效果图

        这里就只放一部分运行效果图了，其中功能比较多一点的就是登录和注册页面，而每一页都是通过超链接相互连接在一起的，可以直接通过页面跳转。

 

 

雨落の等待
关注
【前端开发实战】用 CSS 制作一个华丽的动画登录表单超详细教程新手友好~完整代码示例| 前端动效| 网页设计| 项目实例|HTML/CSS动画|打造炫酷漂亮的登陆表单 - 适合初学者小白的详细指南
南北极之间
06-07 453
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。在用户悬停在环形动画上时，边框颜色会变化并增加阴影，提升交互体验。整体效果是一个炫酷的动画登录表单。这个登录表单页面包含了一个环形动画效果和一些输入框、按钮的样式。
HTML+CSS做登录注册界面
热门推荐
风从北方来的博客
05-29 14万+
在登录界面点注册会进入注册界面登录界面代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&am
html+css 登录页面
05-02
用html和css写的一个简单的登录页面，下载即可使用，压缩包内包含图片，不会出现打开网页后无法显示图片的情况
html+css+js制作简单登录页面
最新发布
sinat_28344841的博客
09-29 517
简单登录功能页面
css登录界面
qq_45387575的博客
09-21 3302
伪元素是元素，就是css模拟出来的一个盒子（如果想在盒子内部插入一个小盒子，就使用伪元素（主要用来做装饰作用））注意：加法和减法的运算符号两边必须有空格；乘法：两个值之间必须有一个数字；除法：左边必须为数字。，（博班如果是鼠标经过盒子，盒子里面的样式会有变化，则使用伪类）2、巧用flex布局，不要总是想着子绝父相加浮动。伪类是一种状态，可以视作选择器，比如说鼠标经过。函数允许在声明 CSS 属性值时执行一些计算。如果想让div元素的大小是整个界面。单位设置网页元素的尺寸，其也是。表示继承父级元素的属性。
登录页面一些有趣的css效果
hyacinthyyy的博客
11-10 211
今天无意看到一个登录页，input框focus时上移变成label的效果，无聊没事干就想着自己来实现一下，登录页面能做文章的，普遍的就是按钮动画，title的动画，以及input的动画，这是最终的效果图（如下）， 同时附上以及。
css+html登录界面
07-21
纯css+html设计的登录界面，简约设计，简化一切冗余的部分
css之登录界面
asrbily的博客
01-03 659
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <style> body{ margin: 0;
结合html与css的简单注册界面
apple_53439775的博客
03-26 2376
初学java web，在eclipse中编译简单的注册界面 首先没有做修饰（纯html），只是简单的注册表，包含姓名(text)、性别(radio)、出生日期(date)、学校(text)、专业(select)、体育特长(checkbox)、上传照片(file)、密码(password)、个人介绍(textarea)、提交(submit)及重置(reset)。 照片文件的上传以及最终表单的提交都只是做出了一个形式，并没有真正上传到后台。 <!DOCTYPE html> <html&
Qt Qss/Css 使用
08-25
在Qt框架中，QSS（Qt Style Sheets）类似于HTML中的CSS，用于定义用户界面的样式和布局。QSS允许开发者通过使用类似CSS的语法来控制Qt应用的外观，包括控件的颜色、字体、边框、背景、间距等，极大地提高了应用的可...
CSS图像替换技术的几种方案介绍
09-24
但是，如果用户禁用了图像，页面将显示为空白。 HTML代码示例： ```html <h3 id="header">I like cola. ``` CSS代码示例： ```css #header { padding: 25px 0 0 0; overflow: hidden; background: url(cola.gif)...
CSS模式登录页面设计
02-26
CSS模式登录页面设计,CSS模式登录页面设计,CSS模式登录页面设计
非常好好看的几个登录页面（html，css）
12-09
非常好好看的几个登录页面（html，css）
纯CSS3用户登录界面设计
04-24
纯CSS3用户登录界面设计
简单美观的html+css登录界面
04-25
HbuilderX使用html+css制作的简单的登录界面，ajax传递数据到后台进行认证，进行数据库数据查询
html+css登录页面
06-12
6套登录模板，可用于前后台登录模板使用。效果不错。欢迎下载试用
CSS使用图片完美修饰的全兼容圆角框.rar
12-11
本资源"CSS使用图片完美修饰的全兼容圆角框.rar"旨在解决这一问题，通过CSS结合图片背景来创建出全兼容的圆角框效果。 首先，我们需要理解CSS3中的`border-radius`属性，这是现代浏览器支持的用于创建圆角边框的...
CSS登录页
GTC的博客
10-22 1100
CSS登录页小案例
css---登入页面
chen_zan_yu_的博客
06-23 344
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ background-color: pink; } </style&gt...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值