记录一下我可看的登录界面吧

a1255468

已于 2022-04-14 16:35:58 修改

阅读量63

点赞数

文章标签： html5

于 2022-04-10 00:09:13 首次发布

本文链接：https://blog.csdn.net/a1255468/article/details/124070984

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面</title>
    <link rel="stylesheet" href="../css/登录页面2.css" type="text/css">



</head>

<body>


<header class="header-my">
    <img  class="header-img" src="../图片/登录背景.png" >
</header>
<div class="div-all">

<div class="left-all-div">

    <ul>
       <span font-size="20px">点击下载文件</span>
        <hr><br><br>

        <li>下载文件1</li>
        <li>下载文件2</li>
        <li>下载文件3</li>
        <li>下载文件4</li>
    </ul>
</div >
<div class="right1" >

        <form action=""  οnsubmit="checkValues()" >
            <!--只有当onsubmit返回为true 才会提交表单-->
            <div class="border-radius"></div>
                <div style="margin-top:16px">
                    <input type="text" autocomplete="on"  placeholder="用户名" id="name" Name="name"/>
                </div>
                <div style="margin-top:16px">
                    <input type="password" autocomplete="on"  placeholder="登录密码" id="password" Name="password"/>

                </div>


            <div style="text-align: center">
                <button type="submit" class="enter-btn" value="登录">登录</button>
            </div>
            <div ></div>
            <div class="fo">
                <div class="left"><span>忘记密码?</span></div>
                <div class="right"><span>用户注册</span></div>
            </div>
        </form>

    <script >
        function  checkValues(){
            var good1=document.getElementById("good");
            var password1=document.getElementById("password");
            var name1=document.getElementsByName("name");
            /* if (good1.value==""){
                 alert("请输入用户名");
                 good1.focus();
                 return false;}*/
            if(name1[0].value==""){
                alert("请输入用户名");
                name1[0].focus();
                return false;
            }
            if (password1.value==""){
                alert("请输入密码");
                password1.focus();
                return false;}
            if(password1.value.length>=5) {
                alert("密码超出范围");
                password1.focus();
                return false;
            }

        }
    </script>

</div>

  <marquee class="text">
      Copyright © 2020-2024  
  </marquee>



</div>
</body>
</html>

css:

.text{border:15px  solid rgba(255,255,255,.4);}


.body{
   width: 1000px;
    height:1000px;
}
.header-all{
    width:300px;
    height:300px;
}
.header-my{
    width:100%;
    height:200px;
}
.header-img{
    height:100%;
    width:100%;
    background:#41a8ff;
}
.div-all{

    background:#2bad79;
    width:100%;
    height:590px;

}
.left-all-div {
    width: 65%;
    height:530px;
    float: left;
    border: 5px solid #41a8ff;
}


.border-radius {
    width: 100px;
    height: 200px;
    margin: 40px auto;
    background:url(../图片/登录页面.jpg) no-repeat center center;
    border:5px solid rgba(255,255,255,.4);
    border-radius: 200px;
}
.right1{/*不能出现margin-left否则会换行*/
    width:30%;
    height:90%;
    float:right;
    margin-right:20px;


    border: 5px solid #41a8ff;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.5);
    /*盒阴影：水平和垂直偏移量都为0、阴影模糊半径13px、阴影扩展半径3px、黑色透明度50%*/
    box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    overflow: hidden;/*隐藏溢出内容*/
}
.fo{
    width:100%;
    height:100px;
    font-size:10px;
    margin-top:5px;
}

.input-content input:hover{

    background:#41a8ff;
    box-shadow: 10px 10px;
}

.input-content{
    align-content:center;

}
.enter-btn{
    width:50px;
    height:40px;
    color:#41a8ff;

    margin-left:50px;
    line-height:40px;
    border:1px solid #dad9d6;
}
.enter-btn:hover{
    text-shadow: 0 1px 0 #333333;
    background: #00B0DC;
    color: #fff;
}

.left{
    float:left;
    font-size:20px;
    color:red;
    margin-left:100px;
}
.right{

box-shadow:10px 10px 5px #888888;
    float:right;
    font-size:20px;
    color:red;
    margin-right:80px;
}
input[type=submit] {/*输入框放置为一只小手*/
    cursor:pointer;
    color:#2a809d;
}
/*设置输入框的提示文字为白色*/
::-webkit-input-placeholder {
    color: #4b6db9;
}
.ss{
    height:100px;
}
from{width:300px;
    height:100%;

}
input{
    width:200px;
    display:block;
    height:25px;
    padding-left:45px;
    padding-right:20px;
    margin-bottom:20px;
    margin-left:70px;

}
/*当该input元素获得焦点时，设置背景颜色及盒阴影*/
input:focus {


    overflow: hidden;
}
.bottom{
    width:100%;
    height:10%;
    background:#2bad79;
    float:bottom;
}

a1255468

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录一下我可看的登录界面吧

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>页面</title> <link rel="stylesheet" href="../css/登录页面2.css" type="text/css"></head><body><header class="heade.
复制链接

扫一扫