盒子模型、超链接的伪类）"/>
注册页面DIV实现（CSS盒子模型、超链接的伪类）
<!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><divstyle="height: 800px; background-image: url('../imag/zhuce.jpg'); background-size: 100% 100%;"><divstyle=" border: 1px red solid; height:90%;position: absolute;top: 300px;"align="left"><form method="post" action="zhucediv.html"οnsubmit=" return checkform()"><table align="center" border="1" width=50%><tr><td align="right" width=50%>用户名 <td align="left"><input type="text" name="username" value=""οnfοcus="tips()" οnblur="checkusername()" id=inputusername></input><spanid="usernamespan"></span></td></tr><tr><td align="right" width=50%>密码 <td align="left"><input type="password" name="password"οnfοcus="tips()"></input><span id="passwordspan"></span></td></tr><tr><td align="right" width=50%>确认密码 <td align="left"><input type="password" name="repassword"></input><spanid="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>
更多推荐
注册页面DIV实现（CSS盒子模型、超链接的伪类）
发布评论