如何用html+CSS实现精美登录页面？看了的小伙伴都直呼简单！！

最新推荐文章于 2024-02-06 14:22:22 发布

Smoothzjc

最新推荐文章于 2024-02-06 14:22:22 发布

阅读量3.2k

点赞数 8

分类专栏： CSS案例文章标签： css html css3 html5

本文链接：https://blog.csdn.net/weixin_53893220/article/details/119131567

版权

CSS案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先上效果图：
在这里插入图片描述

实现过程：
在html网页中先定义一个表单以后，再定义一个Login标题，两个输入框，最后一个登录按键，主要功夫为css配置。

先定义页面主体，标准的消内外边距

body {
     margin:0;
     padding:0;
     font-family:sans-serif;
     background-color: #ecf0f1;
 }

定义表单整体样式

 .box {
     width:300px;
     padding:40px;
     top:50%;
     left:50%;
     transform: translate(-50%,-50%);
     position:absolute;
     background-color: #34495e;
     text-align: center;
 }

定义该表单中两个文本输入框的样式，可以根据喜好调整transition的动画时间

.box input[type="text"],.box input[type="password"] {
     background: none;
     display: block;
     text-align: center;
     border:0;
     margin:20px auto;
     border:2px solid #2980b9;
     padding:14px 10px;
     width:200px;
     outline:none;
     color:white;
     border-radius: 24px;
     transition: 0.5s;
 }

定义当光标放在两个输入框时的样式，这里我只是简单的变宽和蓝色变亮

.box input[type="text"]:focus,.box input[type="password"]:focus {
     width:280px;
     border-color:#3498db;
 }

定义提交按钮的样式

 .box input[type="submit"] {
    color:white;
    background: none;
    display: block;
    text-align: center;
    border:0;
    margin:20px auto;
    border:2px solid #2ecc71;
    padding:14px 10px;
    cursor:pointer;
    width:180px;
    outline:none;
    border-radius: 24px;
    transition: 0.25s;
 }

定义提交按钮的选中样式，这里我简单把背景调成对应绿色，就已经很好看了

.box input[type="submit"]:hover{
     background-color: #2ecc71;
 }

7.大概完成后，发现页面标题默认黑色与表单背景颜色不太符合，因此调成白色即可

h1 {
    color:#ecf0f1;
}

本页面全部代码如下：
html中：

<!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>Document</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <form class="box" method="post">
        <h1>Login</h1>
        <input type="text" name="firstName" placeholder="账户名称">
        <input type="password" name="firstPassword" placeholder="密码">
        <input type="submit" name="firstSubmit" value="登录">

    </form>
</body>
</html>

CSS中：


 body {
     margin:0;
     padding:0;
     font-family:sans-serif;
     background-color: #ecf0f1;
 }

 .box {
     width:300px;
     padding:40px;
     top:50%;
     left:50%;
     transform: translate(-50%,-50%);
     position:absolute;
     background-color: #34495e;
     text-align: center;
 }

 .box input[type="text"],.box input[type="password"] {
     background: none;
     display: block;
     text-align: center;
     border:0;
     margin:20px auto;
     border:2px solid #2980b9;
     padding:14px 10px;
     width:200px;
     outline:none;
     color:white;
     border-radius: 24px;
     transition: 0.5s;
 }

 .box input[type="text"]:focus,.box input[type="password"]:focus {
     width:280px;
     border-color:#3498db;
 }

 .box input[type="submit"] {
    color:white;
    background: none;
    display: block;
    text-align: center;
    border:0;
    margin:20px auto;
    border:2px solid #2ecc71;
    padding:14px 10px;
    cursor:pointer;
    width:180px;
    outline:none;
    border-radius: 24px;
    transition: 0.25s;
 }

 .box input[type="submit"]:hover{
     background-color: #2ecc71;
 }

 h1 {
    color:#ecf0f1;
}

如果你喜欢该篇文章，请不要忘记点击右下角的大拇指进行点赞噢~

欢迎大家关注我的公众号：Smooth前端成长记录
公众号同步更新CSDN博客内容，想方便阅读博客的C友可以来关注我的公众号以便获得更优良的阅读体验~
在这里插入图片描述

Smoothzjc

关注

8
点赞
踩
58

收藏

觉得还不错? 一键收藏
2
评论
如何用html+CSS实现精美登录页面？看了的小伙伴都直呼简单！！

先上效果图：实现过程：在html网页中先定义一个表单以后，再定义一个Login标题，两个输入框，最后一个登录按键，主要功夫为css配置。先定义页面主体，标准的消内外边距body { margin:0; padding:0; font-family:sans-serif; background-color: #ecf0f1; }定义表单整体样式 .box { width:300px; padding:40px; t
复制链接

扫一扫