<!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; }