• 二次元的登录界面

    今天还是继续坚持写博客，然后今天给大家带来比较具有二次元风格的登录界面，也只是用html和css来写的，大家可以来看看！

    个人名片：
     😊作者简介：一名大一在校生，web前端开发专业
     🤡 个人主页：几何小超
     🐼    座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
     🎅**学习目标: 坚持每一次的学习打卡，掌握更多知识！虽然都说前端已死，但是就算不靠这个吃饭，学一点东西总比啥也不知道的

    HTML部分

    既然是制作登录界面我们可以使用表单元素，会比盒子更加简单一些，个人相信大家应该可以明白里头的啥意思吧！！！

    这边就介绍一下CSS部分吧

    1. <div class="shell">
    2.         <div id="img-box">
    3.             <img src="./a34a7810c48ee409750f92812023beb0-1.jpg" alt="">
    4.         div>
    5.         <form action="" method="post">
    6.             <div id="form-body">
    7.                 <div id="welcome-lines">
    8.                     <div id="w-line-1">HI,xiaochaodiv>
    9.                     <div id="w-line-2">Welcome Backdiv>
    10.                 div>
    11.                 <div id="input-area">
    12.                     <div class="f-inp">
    13.                         <input type="text" placeholder="Email Address">
    14.                     div>
    15.                     <div class="f-inp">
    16.                         <input type="password" placeholder="Password">
    17.                     div>
    18.                 div>
    19.                 <div id="submit-button-cvr">
    20.                     <button type="submit" id="submit-button">LOGINbutton>
    21.                 div>
    22.                 <div id="forgot-pass">
    23.                     <a href="#">Forgot password?a>
    24.                 div>
    25.             div>
    26.         form>
    27.     div>

    CSS部分

    还是给我们先清除内外边距

    然后这个ountline：none；的意思是鼠标点击文本框的时候，文本的边框焦点会被去除掉

    还是设置一个背景颜色，这里我们使用的是渐变色：然后在需要让盒子来正中间，需要使用弹性布局

    感觉下面都挺简单的，我就着重讲一下这个伪元素吧placeholder

    placeholder 是HTML5 中新增的一个属性。placeholder可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。比如：我们在登录时需要输入用户名和密码，它会提示你什么地方输入用户名，什么地方输入密码，这个就是使用的placeholder属性。

    1. * {
    2.             padding: 0;
    3.             margin: 0;
    4.             outline: none;
    5.         }
    6.  
    7.         body {
    8.             background: linear-gradient(45deg, #fbda61, #ff5acd);
    9.             display: flex;
    10.             justify-content: center;
    11.             align-items: center;
    12.             height: 100vh;
    13.         }
    14.  
    15.         .shell,
    16.         form {
    17.             position: relative;
    18.         }
    19.  
    20.         .shell {
    21.             display: flex;
    22.             justify-content: center;
    23.         }
    24.  
    25.         form {
    26.             width: 562px;
    27.             height: 520px;
    28.             background-color: #fff;
    29.             box-shadow: 0px 15px 40px #b6354e;
    30.             border-radius: 15px;
    31.             display: flex;
    32.             justify-content: center;
    33.             align-items: center;
    34.         }
    35.  
    36.         #img-box {
    37.             width: 330px;
    38.             height: 520px;
    39.         }
    40.  
    41.         #img-box img {
    42.             height: 100%;
    43. 			margin-left: -175px;
    44. 			border-radius: 20px;
    45.         }
    46.  
    47.         #form-body {
    48.             width: 320px;
    49.             display: flex;
    50.             justify-content: center;
    51.             align-items: center;
    52.             flex-direction: column;
    53.         }
    54.  
    55.         #welcome-lines {
    56.             width: 100%;
    57.             text-align: center;
    58.             line-height: 1;
    59.         }
    60.  
    61.         #w-line-1 {
    62.             color: #7f7f7f;
    63.             font-size: 50px;
    64.         }
    65.  
    66.         #w-line-2 {
    67.             color: #9c9c9c;
    68.             font-size: 30px;
    69.             margin-top: 17px;
    70.         }
    71.  
    72.         #input-area {
    73.             width: 100%;
    74.             margin-top: 40px;
    75.         }
    76.  
    77.         .f-inp {
    78.             padding: 13px 25px;
    79.             border: 2px solid #6e6d6d;
    80.             line-height: 1;
    81.             border-radius: 20px;
    82.             margin-bottom: 15px;
    83.         }
    84.  
    85.         .f-inp input {
    86.             width: 100%;
    87.             font-size: 14px;
    88.             padding: 0;
    89.             margin: 0;
    90.             border: 0;
    91.         }
    92.  
    93.         .f-inp input::placeholder {
    94.             color: #b9b9b9;
    95.         }
    96.  
    97.         #submit-button-cvr {
    98.             margin-top: 20px;
    99.         }
    100.  
    101.         #submit-button {
    102.             display: block;
    103.             width: 100%;
    104.             color: #fff;
    105.             font-size: 14px;
    106.             margin: 0;
    107.             padding: 14px 40px;
    108.             border: 0;
    109.             background-color: #f5506e;
    110.             border-radius: 25px;
    111.             line-height: 1;
    112.             cursor: pointer;
    113.         }
    114.  
    115.         #forgot-pass {
    116.             text-align: center;
    117.             margin-top: 10px;
    118.         }
    119.  
    120.         #forgot-pass a {
    121.             color: #868686;
    122.             font-size: 12px;
    123.             text-decoration: none;
    124.         }

    接下来展示源码，素材图片就是封面哦

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>小超&&前端小窝title>
    9.     <style>
    10.         * {
    11.             padding: 0;
    12.             margin: 0;
    13.             outline: none;
    14.         }
    15.  
    16.         body {
    17.             background: linear-gradient(45deg, #fbda61, #ff5acd);
    18.             display: flex;
    19.             justify-content: center;
    20.             align-items: center;
    21.             height: 100vh;
    22.         }
    23.  
    24.         .shell,
    25.         form {
    26.             position: relative;
    27.         }
    28.  
    29.         .shell {
    30.             display: flex;
    31.             justify-content: center;
    32.         }
    33.  
    34.         form {
    35.             width: 562px;
    36.             height: 520px;
    37.             background-color: #fff;
    38.             box-shadow: 0px 15px 40px #b6354e;
    39.             border-radius: 15px;
    40.             display: flex;
    41.             justify-content: center;
    42.             align-items: center;
    43.         }
    44.  
    45.         #img-box {
    46.             width: 330px;
    47.             height: 520px;
    48.         }
    49.  
    50.         #img-box img {
    51.             height: 100%;
    52. 			margin-left: -175px;
    53. 			border-radius: 20px;
    54.         }
    55.  
    56.         #form-body {
    57.             width: 320px;
    58.             display: flex;
    59.             justify-content: center;
    60.             align-items: center;
    61.             flex-direction: column;
    62.         }
    63.  
    64.         #welcome-lines {
    65.             width: 100%;
    66.             text-align: center;
    67.             line-height: 1;
    68.         }
    69.  
    70.         #w-line-1 {
    71.             color: #7f7f7f;
    72.             font-size: 50px;
    73.         }
    74.  
    75.         #w-line-2 {
    76.             color: #9c9c9c;
    77.             font-size: 30px;
    78.             margin-top: 17px;
    79.         }
    80.  
    81.         #input-area {
    82.             width: 100%;
    83.             margin-top: 40px;
    84.         }
    85.  
    86.         .f-inp {
    87.             padding: 13px 25px;
    88.             border: 2px solid #6e6d6d;
    89.             line-height: 1;
    90.             border-radius: 20px;
    91.             margin-bottom: 15px;
    92.         }
    93.  
    94.         .f-inp input {
    95.             width: 100%;
    96.             font-size: 14px;
    97.             padding: 0;
    98.             margin: 0;
    99.             border: 0;
    100.         }
    101.  
    102.         .f-inp input::placeholder {
    103.             color: #b9b9b9;
    104.         }
    105.  
    106.         #submit-button-cvr {
    107.             margin-top: 20px;
    108.         }
    109.  
    110.         #submit-button {
    111.             display: block;
    112.             width: 100%;
    113.             color: #fff;
    114.             font-size: 14px;
    115.             margin: 0;
    116.             padding: 14px 40px;
    117.             border: 0;
    118.             background-color: #f5506e;
    119.             border-radius: 25px;
    120.             line-height: 1;
    121.             cursor: pointer;
    122.         }
    123.  
    124.         #forgot-pass {
    125.             text-align: center;
    126.             margin-top: 10px;
    127.         }
    128.  
    129.         #forgot-pass a {
    130.             color: #868686;
    131.             font-size: 12px;
    132.             text-decoration: none;
    133.         }
    134.         
    135.     style>
    136. head>
    137.  
    138. <body>
    139.     <div class="shell">
    140.         <div id="img-box">
    141.             <img src="./a34a7810c48ee409750f92812023beb0-1.jpg" alt="">
    142.         div>
    143.         <form action="" method="post">
    144.             <div id="form-body">
    145.                 <div id="welcome-lines">
    146.                     <div id="w-line-1">HI,xiaochaodiv>
    147.                     <div id="w-line-2">Welcome Backdiv>
    148.                 div>
    149.                 <div id="input-area">
    150.                     <div class="f-inp">
    151.                         <input type="text" placeholder="Email Address">
    152.                     div>
    153.                     <div class="f-inp">
    154.                         <input type="password" placeholder="Password">
    155.                     div>
    156.                 div>
    157.                 <div id="submit-button-cvr">
    158.                     <button type="submit" id="submit-button">LOGINbutton>
    159.                 div>
    160.                 <div id="forgot-pass">
    161.                     <a href="#">Forgot password?a>
    162.                 div>
    163.             div>
    164.         form>
    165.     div>
    166. body>
    167.  
    168. html>

    最后的效果是这样子的：

    大家可以尝试敲一敲，这样一步步就会了解到这种类型的布局，然后自己在尝试几次就可以自己来写自己的专属登录界面然后后期通过js完善一下会更加完美哦！！

    看到这别忘三连加关注，爱你们！！！！

  • 相关阅读:
    计算机毕业设计Java冠军体育用品购物网站(源码+系统+mysql数据库+Lw文档）
    【HDFS】ResponseProcessor线程详解以及客户端backoff反压
    wpf 异步等待框
    【云原生之Docker实战】使用Docker部署Trilium个人笔记工具
    vscode远程登录ubuntu linux报错，一直输入密码问题
    FreeRTOS之信号量
    Hooks与事件绑定
    【达摩院OpenVI】开源体验AI云台，去视频抖动
    VMware和Debian下载
    shopify独立站的运营
  • 原文地址：https://blog.csdn.net/weixin_64965154/article/details/130907893