[JavaScript知识库] 用html和css设计一个优美的登录网页

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 用html和css设计一个优美的登录网页 -> 正文阅读

[JavaScript知识库]用html和css设计一个优美的登录网页

一、效果展示

在这里插入图片描述

二、目录

在这里插入图片描述

三、源码

（1）index.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>beautiful login page</title>
    <link rel="icon" href="head.jpg" type="image/x-icon">  <!--在网页标题左侧显示图标-->
    <link rel="stylesheet" type="text/css" href="style.css"><!--<link>定义文档与外部资源的关系;href是超链接-->
</head>
<body><!--<body>用于定义文档的主体。-->
    <section><!--<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分-->
        <div class="container"><!--<div> 可定义文档中的分区或节（division/section）-->
            <h2>Beautiful login page!</h2><!--<h1>到<h6>定义标题-->
        <div class="row100"><!--class 属性规定元素的类名-->
            <div class="col">
                <div class="inputBox">
                    <input type="text" name="" required="required"><!--<input>定义输入控件;required属性表明该控件为必填项-->
                    <span class="text">First Name</span><!--<span>定义文档中的节。-->
                    <span class="line"></span>
                </div>
            </div>

            <div class="col">
                <div class="inputBox">
                    <input type="text" name="" required="required"><!--<input>定义输入控件;required属性表明该控件为必填项-->
                    <span class="text">Last Name</span><!--<span>定义文档中的节。-->
                    <span class="line"></span>
                </div>
            </div>

            <div class="col">
                <div class="inputBox">
                    <input type="text" name="" required="required"><!--<input>定义输入控件;required属性表明该控件为必填项-->
                    <span class="text">Email</span><!--<span>定义文档中的节。-->
                    <span class="line"></span>
                </div>
            </div>

            <div class="col">
                <div class="inputBox">
                    <input type="text" name="" required="required"><!--<input>定义输入控件;required属性表明该控件为必填项-->
                    <span class="text">Mobile</span><!--<span>定义文档中的节。-->
                    <span class="line"></span>
                </div>
            </div>
        </div>

        <div class="row100">
            <div class="col">
                <div class="inputBox textarea">
                    <textarea required="required"></textarea><!--<textarea>	定义多行的文本输入控件。-->
                    <span class="text">Type Your Messages Here</span><!--<span>定义文档中的节。-->
                    <span class="line"></span>  
                </div>
            </div>
        </div>

        <div class="row100">
            <div class="col">
                <input type="submit" value="Send"><!--submit定义提交按钮-->
            </div>
        </div>
    </div>
    </section>
</body>
</html>

（2）style.css代码：

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800&display=swap');
*
{
    margin: 0;/*margin设置所有外边距属性。*/
    padding: 0;/*margin设置所有内边距属性。*/
    box-sizing: border-box;/*box-sizing	定义元素的宽度和高度的计算方式：它们是否应包含内边距和边框。*/
    font-family: 'Poppins',sans-serif;/*规定文本的字体族（字体系列）*/
}

body
{
    overflow-x: hidden; /*overflow-x规定是否剪裁内容的左右边缘，如果它溢出了元素的内容区域*/
}

section
{
    display:flex;/*flex是弹性布局*/
    justify-content:center;/*justify-content 用于设置或检索弹性盒子元素在水平方向上的对齐方式。*/
    align-items: center;/*align-items是垂直方向的对齐方式，*/
    min-height: 100vh;
    padding: 20px;
    width: 100%;
    background: #001923;
}
section::before /* 设计左上角那个红黄色的渐变圆圈*/
{
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: linear-gradient(#ffeb3b,#e91e63);
    border-radius: 50%;
    transform: translate(-420px,-180px);
}
section::after /* 设计右下角那个蓝色的渐变圆圈*/
{
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    background: linear-gradient(#2196f3,#83d8ff);
    border-radius: 50%;
    transform: translate(400px,180px);
}
.container /*设计container类的样式*/
{
    position: relative;/*relative生成相对定位的元素，相对于其正常位置进行定位。*/
    z-index: 1000;/*z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
    width: 80%;
    max-width: 1000px;
    padding: 50px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;/*overflow 属性规定当内容溢出元素框时发生的事情;hidden(超出部分被隐藏)*/
    backdrop-filter: blur(25px);/*backdrop-filte属性实现玻璃效果*/
}

.container::before
{
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;/*pointer-events是点击鼠标事件，值分别是auto和none。·*/
    transform: skewX(-15deg);
}
.container h2 /*设计标题样式*/
{
    width: 100%;
    text-align: center;
    color:#fff;
    font: size 36px;
    margin-bottom: 20px;
}

.container .row100
{
position: relative;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));/*grid-template-columns是网格模板*/
}

.container .row100 .col
{
    position:relative;
    width: 100%;
    padding: 0 10px;
    margin: 30px 0 20px;
}

.container .row100 .col .inputBox
{
    position:relative;
    width: 100%;
    height: 40px;
    color: #fff;
}

.container .row100 .col .inputBox input,
.container .row100 .col .inputBox textarea
{
    position:absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 15px;
    padding: 0 10px;
    z-index: 1;
    color: #000;
}

.container .row100 .col .inputBox .text
{
    position: absolute;
    top: 0;
    left: 0;
    line-height: 40px;
    font-size: 18px;
    padding: 0 10px;
    display: block;
    transition: 0.5s;
    pointer-events: none;
}
.container .row100 .col .inputBox input:focus+.text,
.container .row100 .col .inputBox input:valid+.text,
.container .row100 .col .inputBox textarea:focus+.text,
.container .row100 .col .inputBox textarea:valid+.text
{
top: -35px;
left: -10px;
}

.container .row100 .col .inputBox .line /*设计输入框下划线的样式*/
{
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    transition: 0.5%;
    border-radius: 2px;
    pointer-events: none;
}

.container .row100 .col .inputBox input:focus ~ .line,
.container .row100 .col .inputBox input:valid ~ .line
{
    height: 100%;
}

.container .row100 .col .inputBox.textarea
{
    position: relative;
    width: 100%;
    height: 100px;
    padding: 10px 0;
}
.container .row100 .col .inputBox textarea:focus ~ .line,
.container .row100 .col .inputBox textarea:valid ~ .line
{
    height: 100%;
}

.container .row100 .col  input[type="submit"] /*设计发送按钮样式*/
{
border: none;
padding: 10px 40px;
cursor: pointer;
outline: none;
background: #fff;
color: #000;
font-weight: 600;
font-size: 18px;
border-radius: 2px;
}

@media(max-width:768px)
{
    section::before 
    {
        transform: translate(-200px,-180px);
    }

    section::after 
    {
        transform: translate(220px,180px);
    }

    .container
    {
        padding: 20px;
    }

    .container h2
    {
        font-size: 28px;
    }

}