html css实现登录界面附效果图
<div id="log_image">
<div id="titel_text">
<img id=titel_img src="header_logo.gif">
</div>
<img id="log" src="login.gif" >
}
#text_box div{
color:#FFFFFF;
}
#titel_text{
position: absolute;
}
</s;html>
<head>
<title>登录界面</title>
</head>
<body>
<div id="text_box">
<div>用户名: <input type="text"></dvi>
<div>密码: <input type="password"></div>
<div>验证码: <input type="text"><img src="yan.bmp" style="position:relative;top: 5px"><input type="button" value="登录"></div>
【2】还有一点就是用<p></p>标签包括的内容有较大行间距，可以换用<div></div>。
【3】怎么使元素居中，因为没有直接的属性可以使一个框显示直接居中，横向可以用text-align:center，但是垂直的没有这个属性。所以我们用absolute定位，设置top和left为屏幕的50%，这样框架的左上角会居中显示，然后设置margin分别向左和向上平移半个框架的距离，这样框架的中心就在屏幕的中心。
代码如下:
<!DOCTYPE html>
<style type="text/css">
body{
background-color: #555555;
}
#titel_img{
width:417px;
}
#log_image {
z-index: 0;
position: absolute;
【4】元素覆盖优先级问题，使用z-index标签解决，数字越大优先级越高。
【5】拉伸图片，设置图片元素的宽度和高度即可即width和height。
下面就是运行效果图：
更多信息请查看IT技术专栏
left: 50%;top:50%;
height: 151px;width:400;
margin-left: -200px;margin-top:-100px;
}
#text_box{
position: absolute;
top:65px;
left:40px;
z-index: 1;
/* background-color: #FF0000;*/
</div>
</div>
</form>
</body>
</html>
【1】这里要注意文档流的概念，如果一个元素的没有被声明为float，absolute,relative,那么他就是按照默认的文档流定位模式。即在父框架内从上坐到右从上到下排列，如果元素被声明为float，absolute,中的一种，那么他就脱离了文档流，元素位置重新相对于父框架而言。relative比较特别，他是相对于本身在文档流中的位置做偏移。
(完整版)JSP登陆页面代码
}
%>
如果输入信息有误，则回到登录页面，重新输入登录信息。
注册页面：reg.jsp
请输入您的注册信息：
<table>
<form action="/user/Reg" method="post" name="regform" onsubmit="return regconfirm();">
session.setAttribute("login","ok");
session.setMaxInactiveInterval(-1);
%>
<jsp:forward page="main.jsp"/>
<%
}else{
out.println("用户名或密码输入错误！");
}
%>
如果登录成功，则设定login的值为ok，提交到下一步验证页面，则进入main.jsp页面，否则，如果输入的用户名和密码不合法就打印错误信息，main.jsp页面代码如下：
<tr><td>密码：</td><td><input type="password" name="user_pwd" id="user_pwd" size="20" maxlength=10 onBlur="checkPWD();">*可以包含字母数字(区分大小写)，6-10位</td>
HTML+CSS实现动态背景登录页面
HTML+CSS实现动态背景登录页⾯1. 实现背景图⽚的动态变换⾸先在HTML页⾯body板块中，添加图⽚div，代码如下：<body><div class="bgk"><div class="bgk-image" style="background-image: url('${pageContext.request.contextPath}/img/1.jpg')"></div><div class="bgk-image" style="background-image: url('${pageContext.request.contextPath}/img/2.jpg')"></div><div class="bgk-image" style="background-image: url('${pageContext.request.contextPath}/img/3.jpg')"></div><div class="bgk-image" style="background-image: url('${pageContext.request.contextPath}/img/4.jpg')"></div></body>再对图⽚进⾏css设计。
你要对图⽚进⾏⼤⼩定位，那么以下代码肯定要⾸先编写：`.bgk {margin: auto;position: absolute;width: 1366px;height: 672px;overflow: hidden; /*溢出部分隐藏*/}`位置设定ok以后，那么再对⾥⾯的图⽚进⾏设置。
html+css+js实现简单登陆注册页面
html+css+js实现简单登陆注册页⾯先看⼀下最终效果，登陆和注册背景图⽚：附源码：login.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>login</title><style>* {margin: 0;padding: 0;}html {height: 100%;width: 100%;overflow: hidden;margin: 0;padding: 0;background: url(Desert.jpg) no-repeat 0px 0px;background-repeat: no-repeat;background-size: 100% 100%;-moz-background-size: 100% 100%;}body {display: flex;align-items: center;justify-content: center;height: 100%;}#loginDiv {width: 37%;display: flex;justify-content: center;align-items: center;height: 300px;background-color: rgba(75, 81, 95, 0.3);box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);border-radius: 5px;}#name_trip {margin-left: 50px;color: red;}p {margin-top: 30px;margin-left: 20px;color: azure;}input {margin-left: 15px;border-radius: 5px;border-style: hidden;height: 30px;width: 140px;background-color: rgba(216, 191, 216, 0.5);outline: none;color: #f0edf3;padding-left: 10px;}.button {border-color: cornsilk;background-color: rgba(100, 149, 237, .7);color: aliceblue;border-style: hidden;border-radius: 5px;width: 100px;height: 31px;font-size: 16px;}</style></head><body><div id="loginDiv"><form action="" id="form"><h1 style="text-align: center;color: aliceblue;">LOGIN IN</h1><p>User Name:<input id="userNname" type="text"><label id="name_trip"></label></p><p>Password: <input id="password" type="password"><label id="password_trip"></label></p> <div style="text-align: center;margin-top: 30px;"><input type="submit" class="button" value="login up"><input type="reset" class="button" value="reset"></div></form></div></body></html>register.html1<!DOCTYPE html>2<html lang="en">34<head>5<meta charset="UTF-8">6<title>register</title>7<style>8 * {9 margin: 0;10 padding: 0;11 }1213 html {14 height: 100%;15 width: 100%;16 overflow: hidden;17 margin: 0;18 padding: 0;19 background: url(Desert.jpg) no-repeat 0px 0px;20 background-repeat: no-repeat;21 background-size: 100% 100%;22 -moz-background-size: 100% 100%;23 }2425 body {26 display: flex;27 align-items: center;28 justify-content: center;29 height: 100%;30 }3132 #loginDiv {33 width: 37%;34 display: flex;35 justify-content: center;36 align-items: center;37 height: 650px;38 background-color: rgba(75, 81, 95, 0.3);39 box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);40 border-radius: 5px;41 }4243 #name_trip {44 margin-left: 50px;45 color: red;46 }4748 p,49 .sexDiv {50 margin-top: 10px;51 margin-left: 20px;52 color: azure;53 }5455 .sexDiv>input,56 .hobby>input {57 width: 30px;58 height: 17px;59 }6061 input,62 select {63 margin-left: 15px;64 border-radius: 5px;65 border-style: hidden;66 height: 30px;67 width: 140px;68 background-color: rgba(216, 191, 216, 0.5);69 outline: none;70 color: #f0edf3;71 padding-left: 10px;72 }7374 .button {75 border-color: cornsilk;76 background-color: rgba(100, 149, 237, .7);77 color: aliceblue;78 border-style: hidden;79 border-radius: 5px;80 width: 100px;81 height: 31px;82 font-size: 16px;83 }8485 .introduce {86 margin-left: 110px;87 }8889 .introduce>textarea {90 background-color: rgba(216, 191, 216, 0.5);91 border-style: hidden;92 outline: none;93 border-radius: 5px;94 }9596 h1 {97 text-align: center;98 margin-bottom: 20px;99 margin-top: 20px;100 color: #f0edf3;101 }102103 b {104 margin-left: 50px;105 color: #FFEB3B;106 font-size: 10px;107 font-weight: initial;108 }109</style>110</head>111112<body>113<div id="loginDiv">114<form action="">115<h1>REGESTER</h1>116<p>⽤户姓名:<input id="userNname" type="text" autofocus required><label id="name_trip"></label></p>117118<p>⽤户密码:<input id="password" type="password" required><label id="password_trip"></label></p>119120<p>确认密码:<input id="surePassword" type="password" required><label id="surePassword_trip"></label></p> 121122<p>123⽤户类型:124<select name="type" id="userType">125<option value="0">请选择</option>126<option value="1">普通类型</option>127<option value="2">VIP类型</option>128</select>129<label id="type_trip"></label>130</p>131132<div class="sexDiv">133⽤户性别:134<input class="userSex" name="sex" value="boy" type="radio">男135<input class="userSex" name="sex" value="girl" type="radio">⼥136<label id="sex_trip"></label>137</div>138139<p>140出⽣⽇期:141<input id="birthday" type="date">142<label id="birthday_trip"></label>143</p>144145<p class="hobby">146兴趣爱好:147<input type="checkbox" name="hobby" value="read">阅读148<input type="checkbox" name="hobby" value="music">⾳乐149<input type="checkbox" name="hobby" value="sport">运动150<label id="hobby_trip"></label>151</p>152153<p>154电⼦邮件:155<input id="email" type="email" required>156<label id="emil_trip"></label>157</p>158159160<p>⾃我介绍:</p>161<div class="introduce">162<textarea name="introduce" cols="30" id="introduceText" required rows="10"></textarea>163<label id="introduce_trip"></label>164</div>165166<p style="text-align: center;">167<input type="submit" class="button" onblur="checkForm()" onclick="return submitT()" value="提交">168<input type="reset" class="button" value="重置">169</p>170</form>171</div>172173</body>174<script type="text/javascript">175function trip(obj, trip) {176 document.getElementById(obj).innerHTML = "<b>" + trip + "</b>"; 177 }178179function checkSex() {180 var sexNum = document.getElementsByName("sex");181 var sex = "";182 for (let i = 0; i < sexNum.length; ++i) {183 if (sexNum[i].checked) {184 sex = sexNum[i];185 }186187 }188 if (sex == "") {189 trip("sex_trip", "ERROR!!");190 return false;191 } else {192 trip("sex_trip", "OK!!");193 }194}195196function checkHobby() {197var hobbyNum = document.getElementsByName("hobby");198var hobby = "";199for (let i = 0; i < hobbyNum.length; ++i) {200if (hobbyNum[i].checked) {201 hobby = hobbyNum[i];202 }203 }204if (hobby == "") {205 trip("hobby_trip", "ERROR!!");206return false;207 } else {208 trip("hobby_trip", "OK!!");209210 }211 }212213function checkSelect() {214var myselect = document.getElementById("userType");215var index = myselect.selectedIndex;216var checkValue = myselect.options[index].value;217if (checkValue == 0) {218 trip("type_trip", "请选择!!");219return false;220 } else {221 trip("type_trip", "OK!!");222 }223 }224225function checkForm() {226 checkSelect();227 checkHobby();228 checkSex();229230var trip = document.getElementsByName("em");231var tripV = trip.innerHTML();232//获取⽤户名输⼊项233var userNname = document.getElementById("userNname");234var uName = userNname.value;235if (uName.length < 1 || uName.length > 10) {236 trip("name_trip", "账号长度为1-10位!!");237return false;238 } else {239 trip("name_trip", "OK!!");240241 }242243//密码长度⼤于6 和确认必须⼀致244var password = document.getElementById("password");245var userPass = password.value;246if (userPass.length < 6) {247 trip("password_trip", "密码要>6位!!");248return false;249 } else {250 trip("password_trip", "OK!!");251 }252253//获取确认密码框的值 var254var surePassword = document.getElementById("surePassword");255var surePass = surePassword.value;256if (userPass != surePass) {257 trip("surePassword_trip", "两次密码不⼀致!!");258return false;259 }260261//校验邮箱:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/262var inputEmail = document.getElementById("email");263var uEmail = inputEmail.value;264if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)) { 265 trip("emil_trip", "邮箱不合法!!");266return false;267 } else {268 trip("emil_trip", "OK!!");269 }270271// 校验⾃我介绍272var introduceText = document.getElementById("introduceText");273var introduce = introduceText.value;274if (introduce.length < 3 || uName.length > 60) {275 trip("introduce_trip", "长度为3-50字!!");276return false;277 } else {278 trip("introduce_trip", "OK!!");279 }280281return true;282 }283284function submitT() {285if (checkForm()) {286return true;287 } else {288return false;289 }290 }291</script>293</html>。
一个登录界面的PS设计和HTMLCSS实现
一个登录界面的PS设计和HTMLCSS实现2009-10-12 16:26这样的登录界面可用在网站、桌面软件、Web软件等上面，你可以根据自己的需求改变界面配色。
好的，先看看界面最终设计的效果：1、创建登录界面的背景在Photoshop中，选择“圆角矩形工具”，设置半径为10px。
将前景色设置为#aeaeae。
然后绘制如下的矩形框。
尺寸大小取决于你自己。
下面为这个登录背景框添加图层样式：透明度为 40%添加阴影:渐变叠加：从黑到白，具体参数如下:这时背景框的效果如下：2、创建顶部的条形装饰条这是教程中最难部分，请仔细阅读！首先设置前景色为#51a5c5，选择“圆角矩形工具”，设置半径为10px绘制如下形状：复制这个图层（快捷键CTRL+J），在其中一个图层上右键点击选择“栅格化图层”使用“矩形选择工具”，在被栅格化的图层上选择一个矩形选项，如下图，然后填充以#51a5c5颜色在圆角矩形形状图层的缩略图上按住键盘CTRL，然后点击该图层，出现圆角矩形选择框，然后选择“矩形选择工具”，将选择框向下移动位置，如下：按下键盘delete 键删除，然后取消选择(CTRL+d),现在效果如下：选择原来的圆角矩形形状图层，填充以#091e27颜色，并栅格化。
移动位置如下：选择“矩形选择工具”，进行如下选择：分别在各个图层上进行删除，结果如下：新建立图层，选择矩形选择工具，进行如下选择，并填充以#51a5c5颜色。
复制前面的图层，移动到右边，然后进行镜像。
镜像的操作菜单是 "Edit -> Transform -> Flip Horizontal."，最后效果如下：好了，下面我们对这条彩带添加渐变和投影效果。
3、为彩带添加样式选择彩带的中间那个条的图层，添加如下图层样式：投影:渐变叠加:在彩带的左边和右边的部分上，应用相同的渐变效果。
但无阴影。
结果如下：4、彩带上添加文字字体颜色为白色，字体大小为12pt，字体为Arial bold。
html+css实现登陆页面
html+css实现登陆页⾯需求：具体代码实现：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>注册页⾯</title><style>/*设置div的背景*/body{background: url("img/register_bg.png") no-repeat center ;}/*使得字体较近*/*{margin: 0px;padding: 0px;box-sizing: border-box;}/*设置中间div*/.rg_layout{width: 900px;height: 500px;/*加⼀个边框*/border: 5px solid #EEEEEE;background-color: white;/*让div⽔平居中*/margin: auto;margin-top: 15px;}.rg_left{/*border: 1px solid red;*/float: left;/*设置外边距*/margin: 15px;}/*设置第⼀个div"新⽤户注册"的字体*/.rg_left >p:first-child{color: #FFD026;font-size: 20px;}.rg_left >p:last-child{color: #A6A6A6;font-size: 20px;}.rg_center{/*border: 1px solid red;*/float: left;width: 500px;}.rg_right{/*border: 1px solid red;*/float: right;margin: 15px;}.rg_right >p:first-child{font-size: 15px;}.rg_right p a{color: pink;}.td_left{width: 100px;text-align: right;height: 45px;}.td_right{/*设置右外边距*/padding-left: 50px;}/*设置边框的⼤⼩宽度⾼度*/#username,#password,#email,#name,#tel,#birthday,#checkcode{width: 251px;height: 32px;border: 1px solid #A6A6A6;/*设置边框圆⾓*/border-radius: 5px;/*字与框的空隙*/padding-left: 10px;}#checkcode{width:100px;}#img_check{height: 30px;/*垂直居中*/vertical-align: middle;}#btn_sub{width: 150px;height: 40px;background-color: #FFD026;border:1px solid #A6A6A6;}</style></head><body><div class="rg_layout"><!-- 第⼀个div--><div class="rg_left"><p>新⽤户注册</p><p>USER REGISTER</p></div><!--第⼆个div--><div class="rg_center"><div class="rg_form"><!--定义表单 form--><form action="/login" method="post"><table><tr><td class="td_left"><label for="username">⽤户名</label></td><td class="td_right"><input type="text" name="username" id="username" placeholder="请输⼊⽤户名"></td> </tr><tr><td class="td_left"><label for="password">密码</label></td><td class="td_right"><input type="password" name="password" id="password" placeholder="请输⼊密码"></td> </tr><tr><td class="td_left"><label for="email">Email</label></td><td class="td_right"><input type="email" name="email" id="email" placeholder="请输⼊邮箱"></td></tr><tr><td class="td_left"><label for="name">姓名</label></td><td class="td_right"><input type="text" name="name" id="name" placeholder="请输⼊姓名"></td></tr><tr><td class="td_left"><label for="tel">⼿机号</label></td><td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输⼊⼿机号"></td></tr><tr><td class="td_left"><label>性别</label></td><td class="td_right"><input type="radio" name="gender" value="male"> 男<input type="radio" name="gender" value="female"> ⼥</td></tr><tr><td class="td_left"><label for="birthday">出⽣⽇期</label></td><td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输⼊出⽣⽇期"></td></tr><tr><td class="td_left"><label for="checkcode" >验证码</label></td><td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输⼊验证码"> <img id="img_check" src="img/verify_code.jpg"></td></tr><tr><td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td></tr></table></form></div></div><!--第三个div--><div class="rg_right"><p>已有账号?<a href="#">⽴即登录</a></p></div></div></body></html>。
htmlcss实现登录界面附效果图
htmlcss实现登录界面附效果图代码如下:<!DOCTYPE html><style type="text/css">body{background-color: #555555;}#titel_img{width:417px;}#log_image {z-index: 0;position: absolute;left: 50%;top:50%;height: 151px;width:400;margin-left: -200px;margin-top:-100px;}#text_box{position: absolute;top:65px;left:40px;z-index: 1;/* background-color: #FF0000;*/}#text_box div{color:#FFFFFF;}#titel_text{position: absolute;}</style><html><head><title>登录界面</title></head><body><form><div id="log_image"><div id="titel_text"><img id=titel_img src="header_logo.gif"> </div><img id="log" src="login.gif" ><div id="text_box"><div>用户名: <input type="text"></dvi><div>密码: <input type="password"></div><div> 验证码: <input type="text"><img src="yan.bmp" style="position:relative;top: 5px"><input type="button" value="登录"></div></div></div></form></body></html>【1】这里要注意文档流的概念，如果一个元素的没有被声明为float，absolute,relative,那么他就是按照默认的文档流定位模式。
Html制作简单而漂亮的登录页面
这篇文章主要为大家详细介绍了Html制作简单而漂亮的登录页面具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下html源码：XML/HTML Code<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> <link rel="stylesheet" type="text/css" href="Login.css"/> </head> <body> <div id="login"> <h1>Login</h1> <form method="post"> <input type="text" required="required" placeholder="用户名" name="u"></input> <input type="password" required="required" placeholder="密码" name="p"></input> <button class="but" type="submit">登录</button> </form> </div> </body> </html> css代码：CSS Codehtml{ width: 100%; height: 100%; overflow: hidden; font-style: sans-serif; } body{ width: 100%; height: 100%; font-family: 'Open Sans',sans-serif; margin: 0; background-color: #4A374A; } #login{ position: absolute; top: 50%; left:50%; margin: -150px 0 0 -150px; width: 300px; height: 300px; } #login h1{ color: #fff; text-shadow:0 0 10px; letter-spacing: 1px; text-align: center; } h1{ font-size: 2em; margin: 0.67em 0; } input{ width: 278px; height: 18px; margin-bottom: 10px; outline: none; padding: 10px; font-size: 13px; color: #fff; text-shadow:1px 1px 1px; border-top: 1px solid #312E3D; border-left: 1px solid #312E3D; border-right: 1px solid #312E3D; border-bottom: 1px solid #56536A; border-radius: 4px; background-color: #2D2D3F; } .but{ width: 300px; min-height: 20px; display: block; background-color: #4a77d4; border: 1px solid #3762bc; color: #fff; padding: 9px 14px; font-size: 15px; line-height: normal; border-radius: 5px; margin: 0; } 总结：代码如下:<input type="text" required="required" **placeholder="用户名"** name="u"></input> <input type="password" required="required" **placeholder="密码"** name="p"></input>placeholder="用户名"的作用:占位符以上就是本文的全部内容，希望对大家的学习有所帮助。
HTML5+CSS3 企业网站首页
HTML5+CSS3 企业网站首页通过本章的学习，用户了解了HTML 5中，怎么使用背景与边框新增的相关属性，设置标签背景的填充范围、显示范围及在一个标签中显示多个图像等功能。
在本练习中，将使用背景与边框的相关属性，制作一个企业网站首页。
帮助用户更好的了解背景与边框相关属性的含义和应用。
操作步骤：（1）创建页面的页头。
页头被放置在DIV层中，使用ul列表为页头添加导航条。
<div id="header"><h1><a href="#">网络应用</a></h1><ul id="menu"><li class="active"><a href="#">首页</a></li><li><a href="#">企业简介</a></li><li><a href="#">新闻动态</a></li>（2）为页头添加CSS样式，包括Div层、导航列表ul和列表项li的样式。
（3）为页头中的超链接添加样式，包括链接的基础设置及鼠标离开和经过时，链接的颜色。
（4）为页面添加flash，flash被放置在名称为flash_image的div层中。
（5）为flash_image层添加样式，设置宽度为900像素，高度为221像素。
（6）在页面中，添加企业的最新动态、网络应用和用户统计等内容。
由于内容过多，部分代码省略，详细代码请查看代码源文件。
（7）为企业的最新动态、网络应用和用户统计添加样式。
30多套漂亮的div+css后台模板下载
仿windows桌面Ext 2.0系统管理界面
精致美观的后台管理系统后台模板(带登录)
漂亮的绿色后台模板(带登录界面)
一个非常漂亮的后台登录模板界面
银行国际结算系统后台模板
蓝色电子商务网站管理系统后台模板
漂亮的软件项目管理系统后台模板
蓝色通用左右分栏后台模板
仿windows界面后台模板(TaskMenu 3.0)
漂亮的jquery easyui后台框架
漂亮的某学校网站管理系统后台模板
一个漂亮通用的商家信息管理中心后台模板(带登录界面) 办公管理系统后台界面
深圳市城建管理工作平台模板界面带登录界面
浅绿色通用css后台模板
一个通用信息系统后台模板
通用后台管理系统模板
仿126邮件系统管理后台模板
仿163网易电子邮箱界面后台模板
简单美观的Ext后台管理系统后台模板
漂亮的百度后台管理登录界面
仿windows窗口超市管理系统后台模板
一个非常漂亮的蓝色后台登录界面(可在线演示) 灰色左边菜单可收缩后台管理系统界面
一款非常美观的后台管理中心界面
一个非常漂亮精致的蓝色后台模板
一个非常精致的内容管理系统后台模板
一个大方漂亮的电子商务后台模板
酷气蓝色简洁的css后台模板
一个邮件管理系统后台界面
全部在线演示地址：/article_show/10112.aspx 可以在这里预览各种模板效果以便针对性下载
30套全部打包下载：/file/bewit7nm。
云班课登录界面制作代码
云班课登录界面制作代码制作一个HTML登录页面，包含邮箱，登录密码，立即注册，忘记密码代码如下：HTML部分：<div class="dowebok"><div class="logo"></div><div class="form-item"><input id="username" type="text" autocomplete="off" placeholder="邮箱"></div><div class="form-item"><input id="password" type="password" autocomplete="off" placeholder="登录密码"></div><div class="form-item"><button id="submit">登录</button></div><div class="reg-bar"><a class="reg" href="javascript:">立即注册</a><a class="forget" href="javascript:">忘记密码</a></div></div>CSS部分：* { margin: 0; padding: 0; }html { height: 100%; }body { height: 100%; background: #fffurl(img/backgroud.png) 50% 50% no-repeat; background-size: cover;}.dowebok { position: absolute; left: 50%; top: 50%; width: 430px; height: 550px; margin: -300px 0 0 -215px; border: 1px solid #fff; border-radius: 20px; overflow: hidden;} .logo { width: 104px; height: 104px; margin: 50px auto 80px; background: url(img/login.png) 0 0 no-repeat; } .form-item { position: relative; width: 360px; margin: 0 auto; padding-bottom: 30px;}.form-item input { width: 288px; height: 48px;padding-left: 70px; border: 1px solid #fff; border-radius: 25px; font-size: 18px; color: #fff; background-color: transparent; outline: none;}.form-item button { width: 360px; height: 50px; border: 0; border-radius: 25px; font-size: 18px; color: #1f6f4a; outline: none; cursor: pointer; background-color: #fff; } #username { background: url(img/emil.png) 20px 14pxno-repeat; }#password { background: url(img/password.png) 23px 11pxno-repeat; }.tip { display: none; position: absolute; left: 20px; top: 52px; font-size: 14px; color: #f50; }.reg-bar { width: 360px; margin: 20px auto 0; font-size: 14px; overflow: hidden;}.reg-bar a { color: #fff; text-decoration: none; }.reg-bar a:hover { text-decoration: underline; }.reg-bar .reg { float: left; }.reg-bar .forget { float: right; }.dowebok ::-webkit-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}.dowebok :-moz-placeholder { font-size: 18px;line-height: 1.4; color: #fff;}.dowebok ::-moz-placeholder { font-size: 18px;line-height: 1.4; color: #fff;}.dowebok :-ms-input-placeholder { font-size: 18px;line-height: 1.4; color: #fff;}@media screen and (max-width: 500px) {* { box-sizing: border-box; }.dowebok { position: static; width: auto; height: auto; margin: 0 30px; border: 0; border-radius: 0; }.logo { margin: 50px auto; }.form-item { width: auto; }.form-item input, .form-item button, .reg-bar { width: 100%; }}。