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="登 &nbsp; &nbsp; &nbsp; 录" οnclick="registersuccess()" >     
            </form>
        </div>
        <div class="footer">
            <p><a href="#">联系我们</a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href="#">诚聘英才</a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href="#">合作招商</a>&nbsp;&nbsp; | &nbsp;&nbsp;<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简单应用实例——购物网站的制作（二）注册页面