好看的HTML登录页面（一）

已于 2022-02-20 22:45:24 修改
阅读量2k 收藏 21
点赞数 1
文章标签： html css javascript
于 2022-02-20 22:40:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60213361/article/details/123037449
版权

html+js:

//自行导入jquery包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!--title改变图案-->
    <link href="images/xuehua.png" rel="icon" type="image/x-ico">
    <!--<link rel="stylesheet" href="../鼠标样式2/css/shubiao.css" type="text/css">-->
    <link rel="stylesheet" href="CSS/denglu.css">
    <style type="text/css">
        html{
            cursor:url(images/miku1.png),auto;
        }
        input{
            cursor:url(images/miku1.png),auto;
        }
        .deng:hover{

        }
    </style>
</head>
<body>
<div>
    <div class="zhu_button">
        <span>登录</span>
    </div>
    <!--<div class="zhu_button_two">
        <span>注册</span>
    </div>-->
</div>

<div class="deng_lu" style="display: none;">
    <div class="guanbi">
        ×
    </div>
    <h1>用户登录</h1>
    <form action="zhu.html" id="meForm">
    <input class="search" type="text" placeholder="用户名" id="zhang">
    <br>
    <input class="search" type="password" placeholder="密码" id="mi">
    <br>
    <input type="submit" value="登录" class="deng">
    </form>
</div>


<div style="width: 100%; height: 1000px; display: none;"></div>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function (){
      
        //显示登录按钮
        $(".zhu_button").toggle(function (){
            $(".deng_lu").show("sold");
           /* $(".zhu_ce").hide("sold");*/
            $(this).addClass("zhui1");
        },function (){
            $(".deng_lu").hide("sold");
        }).hover(function (){
            $(this).addClass("zhui1");
            $(this).removeClass("zhui2");
        },function (){

        });

      
        //表单验证账号和密码
            $("#meForm").submit(function (){
                let zhangHao = $("#zhang").val();
                let miMa = $("#mi").val();
                if (zhangHao===""){
                    alert("账号不能为空");
                    return false;
                }
                if (zhangHao!=="王二傻"){
                    alert("用户名必须为王二傻");
                    return false;
                }
                if (miMa!=="zmyzuishuai"){
                    alert("密码必须为zmyzuishuai");
                    return false;
                }
            })


        //关闭登录页面时
        $(".guanbi").click(function (){
            $(".deng_lu").hide("sold");
            $(".zhu_button").addClass("zhui2");
        })
    })



</script>
</body>
</html>

css:

*{
    padding: 0px;
    margin:0px;
}
body{
    background:url(../images/MrUnd3rstandiing_k7j73q.jpg) no-repeat;
    background-size: cover;
}


/*用户登录弹出页面*/
.deng_lu{
    width: 550px;
    height: 400px;
    background-color: rgba(255,255,255,0.25);
    border-radius:19px;
    margin:150px auto;
    text-align: center;
    padding: 10px;
}
h1{
    color: #7bbfea;
    margin-top: 40px;
    user-select:none;
}
.search{
    width:280px;
    height:40px;
    border-radius:40px;
    border:2px solid lightblue;
    outline:none;
    text-indent:12px;
    color:#666;
    font-size:16px;
    padding:0;
    /*-webkit-transition:width 1s;*/
    line-height: 39px;
    margin-top: 30px;
}
.deng{
    width: 200px;
    height: 50px;
    color: white;
    margin-top: 50px;
    border-radius: 40px;
    border: 2px solid #afdfe4;
    background: #90d7ec;
    cursor: url(../images/miku1.png);
    transition: background 0.5s, color 0.5s;
    -webkit-transition: background 0.5s, color 0.5s;
}
/*.deng:hover{
    color: black;
    background: yellow;

}*/
/*点击出现登录页面的div*/
.zhu_button{
    width: 200px;
    height: 50px;
    background-color: rgba(255,255,255,0.25);
    text-align: center;
    color: white;
    line-height: 50px;
    border-top-right-radius: 13px;
    border-bottom-right-radius: 13px;
    position: absolute;
    top: 150px;
    -webkit-transition:width 0.5s ease-out;
    user-select:none;
}
.zhu_button_two{
    width: 200px;
    height: 50px;
    background-color: rgba(255,255,255,0.25);
    text-align: center;
    color: white;
    line-height: 50px;
    border-top-right-radius: 13px;
    border-bottom-right-radius: 13px;
    position: absolute;
    top: 260px;
    -webkit-transition:width 0.5s;
    user-select:none;
}
/*点击出现注册页面的按钮*/
/*.zhu_ce{
    width: 550px;
    height: 400px;
    background-color: rgba(255,255,255,0.25);
    border-radius:19px;
    margin:150px auto;
    text-align: center;
    padding: 10px;
}*/
/*追加鼠标放上去后的样式*/
.zhui1{
    width:300px;
    background-color: rgba(123,191,234,0.9);
}
.zhui2{
    width: 200px;
    background-color: rgba(255,255,255,0.25);
}
/*关闭按钮*/
.guanbi{
    width: 40px;
    height: 40px;
    border: 3px solid rgb(123,191,234);
    border-radius: 50%;
    color: white;
    line-height: 40px;
    font-size: 20px;
    position: relative;
    left: 500px;
    user-select:none;
}

 

 

心树.
关注
  • 1
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
超漂亮html页面
10-14
超漂亮html页面
很好看的登录界面 c++
02-23
c++ 好看的登录界面c++ 好看的登录界面c++ 好看的登录界面c++ 好看的登录界面c++ 好看的登录界面c++ 好看的登录界面c++ 好看的登录界面c++ 好看的登录界面c++ 好看的登录界面c++ 好看的登录界面c++ 好看的登录界面c++ 好看的登录界面c++ 好看的登录界面c++ 好看的登录界面c++ 好看的登录界面c++ 好看的登录界面c++ 好看的登录界面c++ 好看的登录界面
HTML网页设计结课作业——11张精美网页 html+css+javascript+bootstarp
最新发布
网页设计与制作
03-23 1107
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 精彩专栏推荐👇🏻👇🏻👇🏻👇🏻 ❤ 【作者主页——获取更多优质源码】 ❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】 文章目录一、网页介绍一、网页效果二、代码展示1.HTML代码2.CSS代码三、个人总结四、更多干货 一、网页介绍 1 网页简介：此作
HTML实现好看而简洁的登录页面
News777的博客
04-25 1503
效果图 代码 <!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
3种漂亮的登录表单页面css3+html5模板
ICode联盟
07-20 1255
3种漂亮的登录表单页面html模板，图片背景透明效果的登录界面。
html好看的登录页面1（十三种风格登录页面源码）
xcLeigh
06-15 2万+
html好看的登录页面1（十三种风格登录源码），大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。
精美html5登陆界面源码，开源源码，可随意修改，动态界面，很漂亮哦~~~
03-13
精美html5登陆界面源码，开源源码，可随意修改，动态界面，很漂亮哦~~~
好看实用的六个html登录页面
热门推荐
ss810540895的博客
07-15 11万+
原文1.效果图： 代码： 2.效果图： 源码： 3.效果图：源码： 4.效果图：源码： 5.效果图： 源码： 6.效果图：源码：
你想要的100套HTML模板
好好读书
01-13 3万+
你想要的100套HTML模板
html好看的登录界面2（十四种风格登录源码）
xcLeigh
06-15 2万+
html好看的登录页面2（十四种风格登录源码），登录页面源码，大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。
HTML5+CSS3 精美登陆界面源码
01-19
3个很精美的登陆界面，全都是用HTML5+CSS3开发的，所以可能不适合低版本IE浏览器。大家可以下来看看，做的超级漂亮的。
好看的登录页面HTML
01-04
好看的登录页面HTML
html登录界面，很好看
12-11
中间是一个大圆，然后是用户名和密码 以及按钮 中间是一个大圆，然后是用户名和密码 以及按钮中间是一个大圆，然后是用户名和密码 以及按钮中间是一个大圆，然后是用户名和密码 以及按钮中间是一个大圆，然后是...
好看的登录界面
07-10
一个基于纯CSS的美观的登录界面
HTML-移动端APP注册登录页面模板
06-08
HTML移动端APP注册登录页面模板，全套模板，包括首页、注册、登录、密码修改等多个手机WAP模板页面。
html+css登录页面
06-12
6套登录模板，可用于前后台登录模板使用。效果不错。欢迎下载试用
【炫酷登录界面】详解5款高级的前端登录页面及实现源码（附完整源码）
赏樱看雪撸代码
06-16 1万+
好看大气的登录页面，高级炫酷登录界面，5款登录界面源码分享，web登录页面制作，如何实现高级登录页面，如何设置透明遮罩，div实现水平垂直居中，CSS动画效果，登录动态切换效果，高科技登录按钮，动态炫酷登录界面实现，animation实现动态登录按钮效果。
如何用html+CSS实现精美登录页面？看了的小伙伴都直呼简单！！
weixin_53893220的博客
07-27 3243
先上效果图： 实现过程： 在html网页中先定义一个表单以后，再定义一个Login标题，两个输入框，最后一个登录按键，主要功夫为css配置。 先定义页面主体，标准的消内外边距 body { margin:0; padding:0; font-family:sans-serif; background-color: #ecf0f1; } 定义表单整体样式 .box { width:300px; padding:40px; t
html一个好看的登录页面
05-12
以下是一个简单的登录页面示例，你可以根据需要进行调整和修改： ``` <!DOCTYPE html> <html lang="en"> <title>Login Page body { background-color: #f2f2f2; } form { background-color: #fff; max-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值