您的位置：首页 > Web前端 > CSS

注册页面DIV实现（CSS盒子模型、超链接的伪类）

2017-09-15 11:29 369 查看










<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<script type="text/javascript">
function tips(){
document.getElementById("usernamespan").innerHTML="<font color='red'>用户名是应该字母</font>";
}
function checkusername(){
document.getElementById("usernamespan").innerHTML="<font color='green'>用户名是正确</font>";
}

function checkform(){
var username=document.getElementById("inputusername").value;
if(username==""){
window.alert(username);
document.getElementById("usernamespan").innerHTML="<font color='green'>用户名是空</font>";
return false;
}
else{
document.getElementById("usernamespan").innerHTML="<font color='green'>注册成功</font>";
return true;
}
}
</script>
<style type="text/css" contenteditable="inherit">
div {
border: 1px solid blue;
width: 100%;
}

#bodydiv {
width: 90% px;
}

.logodiv {
border: solid 1px blue;
width: 33%;
float: left;
height: 48px;
}

.clear {
clear: both;
}

.cd {
background-color: black;
height: 30px;
}
</style>
</head>
<body>
<div id="bodydiv">
<div class="logodiv">
<img alt="" src="../imag/head1.png" height=100%>
</div>
<div class="logodiv">
<img alt="" src="../imag/head2.png" height=100%>
</div>
<div class="logodiv"
style="padding-top: 5px; text-align: center; height: 43px"
align="center">
<a href="#">登陆</a> <a href="zhuce.html">注册</a> <a href="#">购物车</a>
</div>
<div class="clear"></div>
<div class="cd">
<a href="shouyediv.html">首页</a> <a href="#">手机数码</a> <a href="#">电脑办公</a>
<a href="#">研烟酒箱包</a>
</div>
<div
style="height: 800px; background-image: url('../imag/zhuce.jpg'); background-size: 100% 100%;">
<div
style=" border: 1px red solid; height:90%;position: absolute;top: 300px;"
align="left">
<form method="post" action="zhucediv.html"
onsubmit=" return checkform()">
<table align="center" border="1" width=50%>
<tr>
<td align="right" width=50%>用户名    
<td align="left"><input type="text" name="username" value=""
onfocus="tips()" onblur="checkusername()" id=inputusername></input><span
id="usernamespan"></span>
</td>
</tr>
<tr>
<td align="right" width=50%>密码    
<td align="left"><input type="password" name="password"
onfocus="tips()"></input><span id="passwordspan"></span></td>
</tr>
<tr>
<td align="right" width=50%>确认密码    
<td align="left"><input type="password" name="repassword"></input><span
id="repassword"></span></td>
</tr>
<tr>
<td align="right" width=50%>邮箱    
<td align="left"><input type="text" name="email"></input>
</td>
</tr>
<tr>
<td align="right" width=50%>性别    
<td align="left"><input type="radio" name="sex" value="man"
checked="checked">男<input type="radio" name="sex"
value="woman">女</td>
</tr>
<tr>
<td align="right" width=50%>生日    
<td align="left"><input type="date" name="birth">
</td>
</tr>
<tr>
<td align="right" width=50%>爱好    
<td align="left"><input type="checkbox" name="love"
value="1">看电视<input type="checkbox" name="love"
value="2">打游戏<input type="checkbox" name="love"
value="3">吃饭<input type="checkbox" name="love" value="4"
checked>睡觉</td>
</tr>
<tr>
<td align="right" width=50%>籍贯    
<td align="left"><select name="pro">
<option>--请选择--
<option value="sx">陕西
<option value="hn">河南
<option value="hb">河北
<option value="yn">云南
</select>
<tr>
<td align="right" width=50%>头像    
<td align="left"><input type="file">
</td>
</tr>
<tr>
<td align="right" width=50%>个人简介    
<td align="left"><textarea cols="" rows="5" name="a">我是一个</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit"
value="注册"><input type="reset" value="重置">
</td>
</tr>

</table>
</form>
</div>
</div>
<div>
<img alt="" src="../imag/q.png" width="100%">
</div>
<div style="text-align: center;">
<a href="html.html">关于我们</a>  公司简介  招贤纳士  广告服务  联系方式  合作伙伴  论坛反馈<br>版权声明：Copyright
© 1999-2016,赵瑾的网站 , All Rights Reserved
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航