好看的HTML登录页面

原创 已于 2022-05-03 00:25:10 修改 · 1.7k 阅读 · 20 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
Java

当前文章被收录于：

Java
111 篇文章 6 人学习
订阅专栏 查看详情
JavaWeb

当前文章被收录于：

JavaWeb
11 篇文章 0 人学习
订阅专栏 查看详情
于 2022-04-29 11:10:26 首次发布
<%--
  Created by IntelliJ IDEA.
  User: 10202
  Date: 2022/4/27
  Time: 14:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">

    <title>登录:界面</title>
    <style>
        /* 清除浏览器默认边距，
使边框和内边距的值包含在元素的width和height内 */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 使用flex布局，让内容垂直和水平居中 */

        section {
            /* 相对定位 */
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
            background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
        }

        /* 背景颜色 */

        section .color {
            /* 绝对定位 */
            position: absolute;
            /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
            filter: blur(200px);
        }

        /* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */

        section .color:nth-child(1) {
            top: -350px;
            width: 600px;
            height: 600px;
            background: #ff359b;
        }

        section .color:nth-child(2) {
            bottom: -150px;
            left: 100px;
            width: 500px;
            height: 500px;
            background: #fffd87;
        }

        section .color:nth-child(3) {
            bottom: 50px;
            right: 100px;
            width: 500px;
            height: 500px;
            background: #00d2ff;
        }

        .box {
            position: relative;
        }

        /* 背景圆样式 */

        .box .circle {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            /* backdrop-filter属性为一个元素后面区域添加模糊效果 */
            backdrop-filter: blur(5px);
            box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            /* 使用filter(滤镜) 属性，改变颜色。
            hue-rotate(deg)  给图像应用色相旋转
            calc() 函数用于动态计算长度值
            var() 函数调用自定义的CSS属性值x*/
            filter: hue-rotate(calc(var(--x) * 70deg));
            /* 调用动画animate，需要10s完成动画，
            linear表示动画从头到尾的速度是相同的，
            infinite指定动画应该循环播放无限次*/
            animation: animate 10s linear infinite;
            /* 动态计算动画延迟几秒播放 */
            animation-delay: calc(var(--x) * -1s);
        }

        /* 背景圆动画 */

        @keyframes animate {
            0%, 100%, {
                transform: translateY(-50px);
            }
            50% {
                transform: translateY(50px);
            }
        }

        .box .circle:nth-child(1) {
            top: -50px;
            right: -60px;
            width: 100px;
            height: 100px;
        }

        .box .circle:nth-child(2) {
            top: 150px;
            left: -100px;
            width: 120px;
            height: 120px;
            z-index: 2;
        }

        .box .circle:nth-child(3) {
            bottom: 50px;
            right: -60px;
            width: 80px;
            height: 80px;
            z-index: 2;
        }

        .box .circle:nth-child(4) {
            bottom: -80px;
            left: 100px;
            width: 60px;
            height: 60px;
        }

        .box .circle:nth-child(5) {
            top: -80px;
            left: 140px;
            width: 60px;
            height: 60px;
        }

        /* 登录框样式 */

        .container {
            position: relative;
            width: 400px;
            min-height: 400px;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
            box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .form {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 50px;
        }

        /* 登录标题样式 */

        .form h2 {
            position: relative;
            color: #fff;
            font-size: 24px;
            font-weight: 600;
            letter-spacing: 5px;
            margin-bottom: 30px;
            cursor: pointer;
        }

        /* 登录标题的下划线样式 */

        .form h2::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: -10px;
            width: 0px;
            height: 3px;
            background: #fff;
            transition: 0.5s;
        }

        .form h2:hover:before {
            width: 53px;
        }

        .form .inputBox {
            width: 100%;
            margin-top: 20px;
        }

        /* 输入框样式 */

        .form .inputBox input {
            width: 100%;
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.2);
            outline: none;
            border: none;
            border-radius: 30px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            font-size: 16px;
            letter-spacing: 1px;
            color: #fff;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        .form .inputBox input::placeholder {
            color: #fff;
        }

        /* 登录按钮样式 */

        .form .inputBox input[type="submit"] {
            background: #fff;
            color: #666;
            max-width: 100px;
            margin-bottom: 20px;
            font-weight: 600;
            cursor: pointer;
        }

        .forget {
            margin-top: 6px;
            color: #fff;
            letter-spacing: 1px;
        }

        .forget a {
            color: #fff;
            font-weight: 600;
            text-decoration: none;
        }
    </style>
</head>

<body>
<section>
    <!-- 背景颜色 -->
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="box">
        <!-- 背景圆 -->
        <div class="circle" style="--x:0"></div>
        <div class="circle" style="--x:1"></div>
        <div class="circle" style="--x:2"></div>
        <div class="circle" style="--x:3"></div>
        <div class="circle" style="--x:4"></div>
        <!-- 登录框 -->
        <div class="container">
            <div class="form">
                <h2>登录</h2>
                <form>
                    <div class="inputBox">
                        <input type="text" placeholder="姓名" value="${message}">

                    </div>
                    <div class="inputBox">
                        <input type="password" placeholder="密码">

                    </div>
                    <div class="inputBox">
                        <input type="submit" value="登录">

                    </div>
                    <p class="forget">忘记密码?<a href="#">
                        点击这里
                    </a></p>
                    <p class="forget">没有账户?<a href="#">
                        注册
                    </a></p>
                </form>
            </div>
        </div>
    </div>
</section>
</body>

</html>

好看的FORM表单

<%--
  Created by IntelliJ IDEA.
  User: ifelse
  Date: 2022/5/2
  Time: 17:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        .smart-green {
            margin-left: auto;
            margin-right: auto;
            max-width: 500px;
            background: #F8F8F8;
            padding: 30px 30px 20px 30px;
            font: 21px Arial, Helvetica, sans-serif;
            color: #666;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
        }
        .smart-green h1 {
            font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
            padding: 20px 0px 20px 40px;
            display: block;
            margin: -30px -30px 10px -30px;
            color: #FFF;
            background: #9DC45F;
            text-shadow: 1px 1px 1px #940f17;
            border-radius: 5px 5px 0px 0px;
            -webkit-border-radius: 5px 5px 0px 0px;
            -moz-border-radius: 5px 5px 0px 0px;
            border-bottom: 1px solid #89AF4C;
        }
        .smart-green h1 > span {
            display: block;
            font-size: 11px;
            color: #FFF;
        }
        .smart-green label {
            display: block;
            margin: 0px 0px 5px;
        }
        .smart-green label > span {
            float: left;
            margin-top: 10px;
            color: #a31616;
        }
        .smart-green input[type="text"], .smart-green input[type="email"],
        .smart-green textarea, .smart-green select {
            color: #555;
            height: 30px;
            line-height: 15px;
            width: 100%;
            padding: 0px 0px 0px 10px;
            margin-top: 2px;
            border: 1px solid #E5E5E5;
            background: #FBFBFB;
            outline: 0;
            -webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
            box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
            font: normal 14px/14px Arial, Helvetica, sans-serif;
        }
        .smart-green textarea {
            height: 100px;
            padding-top: 10px;
        }
        .smart-green .button {
            background-color: #9DC45F;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-border-radius: 5px;
            border: none;
            padding: 10px 25px 10px 25px;
            color: #FFF;
            text-shadow: 1px 1px 1px #949494;
        }
        .smart-green .button:hover {
            background-color: #80A24A;
        }
        .error-msg{
            color: red;
            margin-top: 10px;
        }
        .success-msg{
            color: #80A24A;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        button{
            color: rgba(35, 15, 102, 0.97);
            width: 150px;
            height:30px;
            background-color: #e4ffee;
        }
    </style>

</head>
<body style="text-align: center">
        <div style="text-align: center" class="smart-green" >
            <form action="#" method="post" id="fm">
                <h1>会员信息</h1>
                <div><span></span><input type="hidden" name="id" value="${mem.id}"></div>
                <div>
                    <label> <span>姓名</span></label><input type="text" name="mname" value="${mem.mname}">
                </div>
                <div>
                    <label> <span>性别</span></label>
                   <label><input type="radio" name="mgender" id="radio1"  value="${mem.mgender}">男&nbsp;&nbsp;&nbsp;&nbsp;
                     <input type="radio" name="mgender" id="radio2"  >女</label>

                </div>
                <h2></h2>

                <div> <label><span>年龄</span></label><input type="text" name="mage" value="${mem.mage}" ></div>
                <div><label><span>家庭住址</span></label><input type="text" name="maddress" value="${mem.maddress}"></div>

                <div><label><span>Email</span></label><input type="text" name="memail" value="${mem.memail}"></div>
            </form>
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="span12">
                        <button class="btn btn-large btn-success" type="button" onclick="up()" >修改</button>
                        <button class="btn btn-warning btn-large" type="button" onclick="ss()">重置</button>
                    </div>
                </div>
            </div>

        </div>




</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    window.onload = function() {
        if($("#radio1").val()=="男"){
            $('input:radio:first').attr('checked', 'checked');
        }else{
            $('input:radio:last').attr('checked', 'checked');
        }
    }



    function up() {

        var  array=$("#fm").serializeArray();
        var data={};
        for(var i = 0;i<array.length;i++){
            data[array[i].name]=array[i].value;
        }
        for ( var i in data) {
            if(data[i].trim()==""){
                alert("会员姓名·年龄不能为空");
                return;
            }
        }
        $.ajax( {
            "url"            :  "${pageContext.request.contextPath}/manger/updateM",                      // 要提交的URL路径
            "type"         :  "put",                     // 发送请求的方式
            "data"         :  JSON.stringify(data),                      // 要发送到服务器的数据
            "contentType": "application/json;charset=utf-8;",
            "dataType" :  "text",                   // 指定传输的数据格式
            "success"  :  function(result) {// 请求成功后要执行的代码
                console.log(result);

                if(result=="1"){
                    alert("修改成功");


                }else{
                    alert("修改失败");
                }

            },
            "error"       :  function() {
                alert("网络正忙");
            }
        } );
    }


    function ss() {
        location.reload();
    }

























</script>

</html>

如图

 

标签
#css #html #html5
IntelliJ IDEA 自定义创建模板及使用（图文详解）
an_antelope的博客
04-17 3748
IntelliJ IDEA 自定义创建模板及使用（图文详解） 前言：我们每次在使用IntelliJ IDEA 时总会有一些文件是一直被创建的，今天我们就来学习一下IntelliJ IDEA 的自定义模板功能 ————————————————————————————————————————————————————————————————————————————————————————————————...
IDEA创建模板文件
yiban9527的博客
02-14 8927
IDEA常用的模板文件，可以直接创建一个模板文件，下一次new新建时就可以直接使用模板了。本文有创建和修改介绍： 注意：这些配置文件，只是早期学习中需要，之后像 Spring Boot 都是给你配置好的，只需简单配置即可。 创建新的模板文件具体步骤： 1.打开创建模板窗口（两种方式） 1.1 new-->Edit File Templates 1.2 File -->Settings --> Editor-->File and Code Templates 2..
如何快速上手CatPPT：5分钟完成安装与推理的终极教程
最新发布
gitblog_09759的博客
05-29 614
**CatPPT** 是一款基于Mistral架构的7B参数开源大语言模型，通过创新的Gradient SLERP方法合并openchat和neuralchat模型，并在no_robots数据集上进行微调训练。作为目前排行榜上表现最优秀的7B聊天模型之一，CatPPT在保持开源透明的同时，完全避免了评估数据污染问题，为开发者和研究者提供了一个可靠且高效的AI对话解决方案。 ## 📊 CatPP
idea创建自定义文件模板
fdk2zhang的博客
10-04 3478
new Edit File templates(编辑文件模板) 点击左上角的&quot;+&quot; 在右上方的面板上,填写模板的名字和类型 在下面填写模板的内容 点击右下角的OK 如下图 步骤1 步骤2 ...
html好看的登录页面1（十三种风格登录页面源码）
不踩坑，不知道坑有多深；不总结，踩过的坑白踩。
06-15 4万+
html好看的登录页面1（十三种风格登录源码），大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。
好看实用的六个html登录页面
热门推荐
ss810540895的博客
07-15 14万+
原文1.效果图： 代码： 2.效果图： 源码： 3.效果图：源码： 4.效果图：源码： 5.效果图： 源码： 6.效果图：源码：
【IntelliJ】IntelliJ IDEA常用设置及快捷键以及自定义Live templates
weixin_34082789的博客
12-21 626
IntelliJ IDEA是一款非常优秀的JAVA编辑器，初学都可会对其中的一些做法感到很别扭，刚开始用的时候我也感到很不习惯，在参考了网上一些文章后在这里把我的一些经验写出来，希望初学者能快速适应它，不久你就会感觉到编程是一种享受了。安装后的一些设置技巧：1.如何完美显示中文：Settings-&gt;Appearance中勾选Override default fonts by (not r...
【Flutter】还在手动写class xxxPage吗？快来用IDEA自带的的强大模板！File Templates
TDSSS的博客
10-16 579
提高生产力！！强大的IDEA文件模板生成，白嫖代码，势在必行！
简洁大气自适应后台登录模板单页源码
linxiaoming6的博客
07-06 729
简介： 模板介绍比较适合拿来做用户登录页,感觉还是挺不错的,拿出来分享给大家,感兴趣的可以下载下来美化整合一下! 网盘下载地址： http://kekewangLuo.cc/sB6YV9wTepR0 图片：
html实现登录界面
qq_46578318的博客
06-10 2万+
一、代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>login</title> <style> * { margin: 0; padding: 0; } html {
idea创建模板
weixin_45671199的博客
01-19 435
先找到这个edit file templas，
简单的HTML登录界面（带源码）
宝子的博客
07-05 3万+
非常的简单，第一眼看到这个界面的时候就感觉非常的喜欢，给我一种简约又美观的感觉，然后就模仿样式自己写出来了，给大家分享一下。还写了一个注册页面大部分的代码都差不多，因为它们实在太像了，我太喜欢了。
HTML&CSS：超实用的登录页面（建议收藏）
weixin_52814911的博客
03-27 512
这段HTML和CSS代码实现了一个具有动态效果的登录表单，包含用户名和密码输入框、提交按钮和加载动画。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。 HTML 结构 tile：定义整个登录表单的容器，包含头部和表单主体。 tile-header：定义表单的头部，包含登录标题。 tile-body：定义表单的主体部分，包含输入框和提交按钮。 form：定义表单，包含用户名和密码输入框。 form-input：定
使用Html做一个简单的登陆页面
桑稚远方的博客
04-05 6万+
有了登录按钮后，在我们的认知下，肯定按了登录会跳到下一个页面，但是今天只是展示做一个简单的登陆界面，就不写跳转和账号密码验证了；登录页面一般就是账号和密码，另外还需要验证码验证需求，这三个常见的属性是一个项目登陆界面重要组成要素；2.账号密码有了之后，下一步就需要登录了，登录是一个按钮，按钮是一个标签。，所以就不使用验证码了，因为验证码在一个项目中是放在后端的，这次就不做演示；不好意思兄弟们，本人没有美感，尽力了，你们自己找好看的点自己修改；如下面的代码，这一步很简单；
HTML写一个登录框样式
TISRNW的博客
09-19 1万+
以QQ空间的登陆框为例，原先的代码很复杂，还涉及了其他的知识，对于刚刚接触的人来说想写一点点样式来练练手的话可以看一下。 写好之后是这个样子 下面是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <styl...
HTML登录页面
jakelihua
10-27 4万+
本文用最通俗的语言，一步步教会大家CSS构建登录页面。首先构建。
自适应登录html,100行代码 实现美观的H5自适应登录页面
weixin_28684757的博客
06-10 1703
* {margin: 0px;}#content {margin: 150px auto;width: 100%;height: 460px;border: 1px transparent solid;background-color: #21D4FD;background-image: linear-gradient(243deg, #21D4FD 0%, #B721FF 100%);backg...
HTML+CSS+JS登录注册页面（媒体查询自适应版）
weixin_68008943的博客
11-24 4105
【代码】HTML+CSS+JS登录注册页面（媒体查询自适应版）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kjshuan

点个赞就好啦！！！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值