• 简单入门编写html登录界面

    1. html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>你好呀，登录吧title>
    7.     <style>
    8.         * {margin: 0;padding: 0;}
    9.  
    10.         html {height: 100%;}
    11.  
    12.         body { height: 100%;}
    13.  
    14.         .container {
    15.             height: 100%;
    16.             background-image: linear-gradient(110deg, #f9bde8, #f670d0);
    17.         }
    18.  
    19.         .login-wrapper {
    20.             background-color: #fbf1f1;
    21.             width: 400px;
    22.             height: 388px;
    23.             border-radius: 50px;
    24.             padding: 0 50px;
    25.             position: relative;
    26.             left: 50%;
    27.             top: 50%;
    28.             transform: translate(-50%, -50%);
    29.         }
    30.  
    31.         .header {
    32.             font-size: 60px;
    33.             font-weight: 900;
    34.             text-align: center;
    35.             line-height: 120px;
    36.         }
    37.  
    38.         .input-item {
    39.             display: block;
    40.             width: 100%;
    41.             margin-bottom: 20px;
    42.             border: 0;
    43.             padding: 10px;
    44.             border-bottom: 1px solid rgb(128, 125, 125);
    45.             font-size: 15px;
    46.             outline: none;
    47.         }
    48.  
    49.             .input-item:placeholder {
    50.                 text-transform: uppercase;
    51.             }
    52.  
    53.         .btn {
    54.             text-align: center;
    55.             padding: 10px;
    56.             width: 100%;
    57.             margin-top: 40px;
    58.             background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
    59.             color: #fff;
    60.         }
    61.  
    62.         .msg {
    63.             text-align: center;
    64.             line-height: 88px;
    65.         }
    66.  
    67.         a {
    68.             text-decoration-line: none;
    69.             color: #abc1ee;
    70.         }
    71.     style>
    72. head>
    73. <body>
    74.     <div class="container">
    75.         <div class="login-wrapper">
    76.             <div class="header">登录div>
    77.             <div class="form-wrapper">
    78.                 <input type="text" name="输入用户名" placeholder="username" class="input-item">
    79.                 <input type="password" name="输入密码" placeholder="password" class="input-item">
    80.                 <div class="btn">登录div>
    81.             div>
    82.             <div class="msg">
    83.                忘记了
    84.                 <a href="#">注册a>
    85.             div>
    86.         div>
    87.     div>
    88. body>
    89. html>

     整体样式：

    每个 HTML 文件里开头都有个很重要的东西,DOCTYPE是document type的简写，它并不是 HTML 标签，也没有结束标签，它是一种标记语言的文档类型声明，即告诉浏览器当前 HTML 是用什么版本编写的。

     

    lang就是language是语言的意思，en也是English的缩写，这句话用来定义页面的语言为英文。可以知道表示语言是中文。

    HTML 元素

            元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: , <style>, <meta>, <link>, <script>, <noscript> 和 <base>。</p> <blockquote> <p><meta charset="UTF-8"></p> <p>charset 属性规定 HTML 文档的<a href="https://so.csdn.net/so/search?q=%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"字符编码\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"字符编码\"}"}" data-tit="字符编码" data-pretit="字符编码">字符编码</a>，且utf-8代表世界通用的语言编码。</p> </blockquote> <blockquote> <p><meta name="viewport" content="width=device-width, initial-scale=1.0"> </p> <p></p> <p>通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的<a href="https://so.csdn.net/so/search?q=webview&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=webview&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"webview\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=webview&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"webview\"}"}" data-tit="webview" data-pretit="webview">webview</a>)用来显示网页的那部分区域。</p> <p></p> <p>content属性值 :</p> <p>     width:可视区域的宽度，值可为数字或关键词device-width</p> <p>     height:同width</p> <p>     intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放。</p> </blockquote> <blockquote> <p><title>hi,nice to meet you 

    设置标题。

     .container {
                height: 100%;
                background-image: linear-gradient(110deg, #f9bde8, #f670d0);
            }

    这里是指设置容器的高度和容器的背景。

    特别说明一下，linear-gradient是设置渐变色的库函数有三个参数。

    第一个参数表示渐变色的角度（默认是180deg。设置了角度，则0deg为竖直向上，然后顺时针旋转）如下图

     第二个参数表示初始颜色，第三个参数表示最终颜色。就是从初始颜色到最终颜色的渐变。

    关于linear-gradient的使用，读者可以自行查阅其他资料。

    这里安利一个超级好配色的网站HTML颜色代码 (encycolorpedia.cn)

      .secrect-wrapper {
                background-color: #fbf1f1;
                width: 358px;
                height: 588px;
                border-radius: 15px;
                padding: 0 50px;
                position: relative;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }

    wrapper在html中是一个常见的术语，我们给它一个类，该类负责将所有可见元素封装在页面上。

    这里简单的说明一下：background-color是用来设置背景颜色，width、height设置宽和高，border-radius边框锐化（就是将矩形变成圆角），left，top在容器中的位置。

    .header {
                font-size: 60px;
                font-weight: 900;
                text-align: center;
                line-height: 200px;
            }

    这里是时候设置标题的属性。font-size设置标题的字体大小，font-weight设置标题的宽度（可以加粗），text-align设置位置，line-heightline-height 设置行间的距离（行高）。

     .input-item {
                display: block;
                width: 100%;
                margin-bottom: 20px;
                border: 0;
                padding: 10px;
                border-bottom: 1px solid rgb(128, 125, 125);
                font-size: 15px;
                outline: none;
            }

     元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据，可以使用各种类型的输入数据和控件小部件。

    display 属性设置元素如何显示，block表示此元素将显示为块级元素，此元素前后会带有换行符。

     .btn {
                text-align: center;
                padding: 10px;
                width: 100%;
                margin-top: 40px;
                background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
                color: #fff;
            }

    设置登录按钮的属性，text-align: center文本居中，background-image渐变颜色设置， color: #fff文本颜色为白色。

    HTML 元素

    定义文档的主体,body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）


       


           
       

    在head中我们相当于定义了container、login-wrapper、form-wrapper、msg的类，这里可以直接用他们。

  • 相关阅读:
    vue3+element Plus中使用日期格式化库day.js
    django 批量 serializers listserializers
    生成式人工智能 - 文本反转（Textual Inversion）：一种微调稳定扩散模型的方法
    使用IDEA远程debug调试
    签到功能完成03《ivx低代码签到系统制作》
    python---匿名函数应用
    Java学习笔记（一）：类和对象
    基于支持向量机的网络⼊侵检测系统的全面调查和分类
    天天爱跑步【NOIP2016 T4】
    Elasticsearch TLS 激活：X-Pack 安全性
  • 原文地址：https://blog.csdn.net/WSY444/article/details/128138286