HTML+CSS简单应用实例——购物网站的制作（二）注册页面
接上一篇文章，本片文章是注册页面。
下面是效果图：
分析：上方欢迎注册是DIV,下面是表单，点击登录按钮会出现注册成功提示。下方为脚本，同主页。
下方为具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘淘网注册</title>
<style>
.Bar{width: 100%; background-color:#FFFFFF;height:100px;position: absolute;top:0px;left:0px;}
.loginBox{ width:400px;border:1px solid #ddd;box-shadow: 2px 2px 5px 2px #ddd;background: white;margin:30px auto;position:absolute;top:150px;left:565px;}
.loginContent{width: 300px; margin:20px auto;}
.loginTit{color:#666;line-height: 30px;font:"微软雅黑";}
.loginInp{border:#bbb solid 1px;height:32px;width: 100%;line-height: 32px;text-indent:5px;}
.checked{margin-right: 3px;margin-top: 20px;}
.login_btn{width: 310px; height: 36px;color:rgb(248, 248, 248);cursor: pointer;margin-top: 20px;}
.footer{ width:1100px;margin:0 auto;border-top:#dddddd 1px solid;margin-top:600px; height: 210px; background: rgb(245,245,245);text-align: center;}
.footer p{ margin-top:20px;}
.footer a{color:#666;}.footer a:hover{ color:rgb(228, 121, 89);}.footer .fp{color:#666;margin-top:10px;}
.footimg{width="120px";height: "10px";}
</style>
<script type="text/javascript">
function registersuccess()
{
alert("注册成功！");
}
</script>
</head>
<body bgcolor="plum" >
<div class="Bar">
<p align="center" style="font-family: 宋体; font-size: 40px; color:black;"><b>-欢迎注册-</b></p>
</div>
<div class="loginBox">
<form class="loginContent">
<p class="loginTit">用户名/邮箱/手机号：</p>
<input type="text" class="loginInp" id="uname" name="user" placeholder="5-12位字符">
<p class="loginTit">密码:</p>
<input type="password" class="loginInp" name="password" placeholder="6-12位字符">
<input type="checkbox" id="a1" class="checked">自动登录
<input type="submit" class="login_btn" value="登 录" οnclick="registersuccess()" >
</form>
</div>
<div class="footer">
<p><a href="#">联系我们</a> | <a href="#">诚聘英才</a> | <a href="#">合作招商</a> | <a href="#">广告平台</a></p>
<p class="fp">本网站直接或间接向消费者推销商品或者服务的商业宣传均属于“广告”（包装及参数、售后保障等商品信息除外）</p>
<div class="footimg">
<img src="img/冠名商标2.jpg" width="70px";height="60px";>
<img src="img/冠名商标.jpg" width="60px";height="40px">
<img src="img/商标.jpg" width="70px";height="60px">
<img src="img/商标2.jpg" width="60px";height="30px">
</div>
</div>
</body>
</html>
更多推荐
HTML+CSS简单应用实例——购物网站的制作（二）注册页面
发布评论