DIV+CSS布置简单登录界面

DIV+CSS布置简单登录界面

body属性定义

body {
       border: 1px solid #ADD8E6;
       text-align: center;
       background-image: url(bai.jpg);//插入背景图片(须同一文件夹内)
       background-size:100% 100%;//图片自适应大小
       fileter:alpha(opacity=80);//
       -moz-opacity: 0.8;
       opacity: 0.8;//透明度
       font-family: Arial, Helvetica,sans-serif;
       margin-left: auto;
       margin-right: auto;
   }

header属性定义

#header {
         width: auto;
         padding:10px;
         margin: 0px;
         background: -webkit-linear-gradient(top,aliceblue,lavender);//渐变色
         height: 150px;
         text-align: center;
    }

#header p{//字体定义
       font-family: cambria;//字体
       padding-top:10px;
       font-size: 100px;//大小
       margin: 10px;
       color: #9370db;//颜色
  }

contain属性定义

#contain {
          width: auto;
          height: 550px;
          border: 2px solid #ADD8E6;//边界颜色
          text-align: center;
          line-height: 20px;//边界宽度
          background: -webkit-linear-gradient(top,lavender,lightsteelblue);
          padding:10px;
          margin: 0px;
    }

footer属性定义

#footer {
       height: 100px;
       width: auto;
       padding:10px;
       background: -webkit-linear-gradient(top,lightsteelblue,lavender);
       text-align: center;
   }

文字及按钮设定

<body>
<div id="header"  style="font-family:verdana"><p><b>whale</b></p></div>
<div id="contain">
<marquee bgcolor="aliceblue" dehavior="altenernate">
     <font color="#9370db" size="5px"><IMG src="yu.jpg"border=0><IMG src="yu.jpg"border=0><IMG src="yu.jpg"border=0></font>
</marquee>
<form action="testaction">
       昵称:<input type="text" value="" name="username"/>
<br>
       密码:<input type="password" value="" name="password" id="pw" placeholder="密码不少于6位" />
<br>
       <span id="tishi"></span></input>
<br>
      <input type="button" style="width: 100px;hieght: 100px;" value="注册"οnclick="return valid(this.form)"/>
<br>
      没有账号?<a href="file:///E:/%E8%8D%89%E7%A8%BF/java%20web/%E7%BD%911.html">立即注册</a>//跳转
</from>

JavaScript实现注册

<script type="text/javascript">
    function valid(form){
      if(password.value.length==0){
           alert("密码不能为空!!")
           form.password.focus();
           return false;
      }
      else if(password.value.length<6){
           alert("密码不足6位!!")
           form.password.focus();
           return false;
      }
      else return true;
    }

    function  sam(){
          if(password.value!=repassword.value){
           alert("两次输入不同!!")
           form.password.focus();
           return false;
       }
      else return true;
    }

    function em(){
            var em=/^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/; 
          if(!em.test(email.value)){
            alert("邮箱格式错误!!");
            form.email.focus();
            return false;
          }
            return ture;
}
</script>

一个简单的登录注册界面布置,不过尝试了一些有趣的设置,感觉JavaWeb还是挺有趣的。

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页