DIV+CSS布置简单登录界面
程序员文章站
2022-07-03 19:49:15
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;...
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还是挺有趣的。
本文地址：https://blog.csdn.net/weixin_44417735/article/details/109264717