<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>用户注销</title>
<style>
*{
margin:0px;
padding:0px;
}
h2{
font-size:35px;
color:#6666ff;
font-family:黑体;
margin:50px auto;height:60px;
text-align:center;
}
a.but{
width:180px;/*宽*/
height:36px;/*高*/
line-height:36px;/*竖直居中*/
text-align:center;/*水平居中*/
color:#ffffff;
margin:50px auto;/*居中*/
list-style:none;/*去除圆点*/
text-decoration:none;/*去除下划线*/
border-radius:5px;/*圆角*/
display:block;/*块状显示*/
background:#cc0000;
}
a.but:hover{
box-shadow:0 0 6px #666;
background:#ffcc00;
}
.login{
width:360px;/*宽*/
height:440px;/*高*/
box-shadow:0 0 10px #000;
margin:20px auto;
display:none;
}
.login .title{
background:red;
height:60px;
color:#fff;
line-height:60px;
font-size:16px;
text-indent:30px;/*首行缩进*/
}
.login .title img{
float:right;
cursor:pointer;
margin:20px;
}
.login .main{
/*border:1px solid red;*/
margin:35px 25px 0px 35px;
/*外边距:上35px右25px 下0px 左35px*/
}
.main input.tt{
width:275px;
height:45px;
background:#eee url(images/ggg_login1.jpg)no-repeat;
background-position:10px center;
margin-bottom:20px;
border:none;/*无边框*/
text-indent:35px;
}
.main input.pass{
background:#eee url(images/ggg_login2.jpg)no-repeat;
background-position:10px center;
}
input.button{
width:120px;
height:45px;
display:block;
background:red;
color:#fff;
border:none;
margin:auto;
box-shadow:0 0 10px #000;
}
</style>
</head>
<body>
<h2>张依莹42</h2>
<a href="#" class="but">用户注册</a>
<div class="login">
<!--标题-->
<div class="title">
用户注册
<img src="images/g_close.jpg">
</div>
<!--内容-->
<form>
<div class="main">
<!--单行文本框-->
<input type="text" class="tt" placeholder="邮箱/名称/QQ号" required>
<input type="password" class="tt pass" placeholder="请输入密码" required>
<input type="password" class="tt pass" placeholder="请确认密码" required>
<input type="text" class="tt" placeholder="请输入邮箱" required>
<!--按钮-->
<input type="submit" value="用户注册" class="button">
</form>
</div>
<!--引入库文件-->
<script src="js/jquery-1.8.3.js"></script>
<script>
//鼠标单击按钮
$("a.but").click(function(){
$(".login").show(500);
});
//鼠标单击关闭
$(".title img").click(function(){
$(".login").hide(500);
});
</script>
</body>
</html>
作业1.1.6
最新推荐文章于 2024-07-04 00:59:27 发布