作业1.1.6

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值