DIV+CSS布置简单登录界面

更新时间:2023-04-03 20:40:56 阅读：评论：0

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-rif;       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="urname"/><简历教育背景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 hre中秋节的手抄报三年级f="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 fal;      }      el if(password.value.length<6){            alert("密码不足6位！！")           form.password.focus();           return fal;      }      el return true;    }    function  sam(){           if(password.value!=repassword.value){            alert("两次输入不同！！")           form.password.focus();           return fal;       }      el 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 fal;          }            return ture;}</script>