image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
#main{
width: 960px;
/*height: 10000px;*/
margin: 0 auto;
/*background-color: #0e84b5;*/
}
#content{
height: 480px;
width: 960px;
border: solid 1px #dddddd;
}
#left{
width: 480px;
height: 480px;
float: left;
/*background-color: #1abc9c;*/
overflow: hidden;
}
#right{
width: 480px;
height: 480px;
float: left;
/*background-color: #1abc9c;*/
position: relative;
}
#right .name{
float: left;
width: 120px;
text-align: right;
margin-bottom: 30px;
height: 30px;
line-height: 30px;
}
#right .value{
float: left;
width: 360px;
height: 30px;
margin-bottom: 30px;
}
#right input{
width: 240px;
height: 30px;
border: solid 1px #dddddd;
}
#right .first{
margin-top: 120px;
}
#login{
height: 35px;
/*border: solid 1px red;*/
float: left;
width: 480px;
margin-top: 20px;
}
#login div{
width: 240px;
background-color: red;
height: 35px;
text-align: center;
line-height: 35px;
margin-left: 120px;
border-radius: 10px;
color: white;
}
#regist button{
width: 120px;
height: 30px;
line-height: 30px;
position: absolute;
right: 0;
bottom: 0;
background-color: darkolivegreen;
text-align: center;
color: white;
border: 0;
}
.hide{
display: none;
}
#mask{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
}
#dialog{
position: fixed;
width: 500px;
height: 400px;
left: 50%;
top:50%;
margin-top: -200px;
margin-left: -250px;
background-color: white;
}
#dialog div{
width: 150px;
height: 50px;
/*background-color: #1abc9c;*/
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div id="main">
<div>
<img src="boy.png">
</div>
<div id="content">
<div id="left">
<img src="timg.jpg">
</div>
<div id="right">
<div>
<div class="name first"">用户名:</div>
<div class="value first"><input></div>
</div>
<div>
<div class="name">密码:</div>
<div class="value"><input></div>
</div>
<div>
<div class="name">验证码:</div>
<div class="value"><input style="width: 120px;"></div>
</div>
<div id="login">
<div>登陆</div>
</div>
<div id="regist"><button onclick="show();">免费注册>></button></div>
</div>
</div>
</div>
<!--遮罩层开始-->
<div class="hide" id="mask"></div>
<!--遮罩层结束-->
<div id="dialog" class="hide">
<div><button onclick="cancel();">退出</button></div>
</div>
<script>
function show() {
var mask = document.getElementById('mask');
var dialog = document.getElementById('dialog');
mask.classList.remove('hide')
dialog.classList.remove('hide')
}
function cancel() {
var mask = document.getElementById('mask');
var dialog = document.getElementById('dialog');
mask.classList.add('hide')
dialog.classList.add('hide')
}
</script>
</body>
</html>
boy.png
timg.jpg
