我这里是用html+css知识来编写两个页面，
功能：第一个页面是用户协议，如果同意用户协议则跳转到用户注册页面。
images:
图片自己搞吧，我都是网上下载的
目录结构如下：
html代码之用户协议
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册协议</title> <link rel="stylesheet" type="text/css" href="css/agreement.css"> </head> <body> <!--左侧10%--> <div class="left"></div> <!--中间80%--> <div class="middle"> <div class="top">用户注册协议</div> <div> <p>一、总则</p> 1.1 保宝网的所有权和运营权归深圳市永兴元科技有限公司所有。 1.2 用户在注册之前，应当仔细阅读本协议，并同意遵守本协议后方可成为注册用户。一旦注册成功，则用户与保宝网之间自动形成协议关系，用户应当受本协议的约束。用户在使用特殊的服务或产品时，应当同意接受相关协议后方能使用。 1.3 本协议则可由保宝网随时更新，用户应当及时关注并同意本站不承担通知义务。本站的通知、公告、声明或其它类似内容是本协议的一部分。 <p>二、服务内容</p> 2.1 保宝网的具体内容由本站根据实际情况提供。 2.2 本站仅提供相关的网络服务，除此之外与相关网络服务有关的设备(如个人电脑、手机、及其他与接入互联网或移动网有关的装置)及所需的费用(如为接入互联网而支付的电话费及上网费、为使用移动网而支付的手机费)均应由用户自行负担。 <p>三、用户帐号</p> 3.1 经本站注册系统完成注册程序并通过身份认证的用户即成为正式用户，可以获得本站规定用户所应享有的一切权限；未经认证仅享有本站规定的部分会员权限。保宝网有权对会员的权限设计进行变更。 3.2 用户只能按照注册要求使用真实姓名，及身份证号注册。用户有义务保证密码和帐号的安全，用户利用该密码和帐号所进行的一切活动引起的任何损失或损害，由用户自行承担全部责任，本站不承担任何责任。如用户发现帐号遭到未授权的使用或发生其他任何安全问题，应立即修改帐号密码并妥善保管，如有必要，请通知本站。因黑客行为或用户的保管疏忽导致帐号非法使用，本站不承担任何责任。 </div> <div class="agree"> <a href="Register.html"> <input type="button" value="同意"> </a> <a href="htt://www.baidu.com"> <input type="button" value="不同意"> </a> </div> </div> <!--右侧10%--> <div class="right"></div> </body> </html>
css样式之用户协议
*{margin: 0;padding: 0}
body{
font-size:12px;
background-image: url(../images/bg.png);
}
p{
font-size: 18px;
font-weight: bold;
text-indent: 10px;
margin-top:10px;
}
a{
font-size: 30px;
line-height: 50px;
padding-left: 20%;
}
.left{
height: 800px;
width: 10%;
float: left;
}
.middle{
height: 800px;
width: 80%;
float: left;
}
.right{
height: 800px;
width: 10%;
float: left;
}
.middle .top{
width: 100%;
height: 30px;
background-color: peru;
text-align: center;
line-height: 30px;
font-weight: bolder;
}
.middle .agree{
width: 100%;
height: 40px;
}
.middle .agree input{
width: 10%;
height: 40px;
font-size: 20px;
color: white;
background-color: lightseagreen;
font-weight: bolder;
cursor: pointer;
}
html代码之用户注册
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> <link rel="stylesheet" type="text/css" href="css/register.css"> </head> <body> <!--顶部--> <div class="top"> <div class="imgs"> <img src="images/logo.jpg" align="bottom"> </div> <div class="t_title">欢迎注册</div> <div class="t_right"> <span style="color: gray">已有账号</span> <a href="http://www.baidu.com">请登陆</a> </div> </div> <!--左边框--> <div class="left"></div> <!--中间区域--> <div class="middle"> <div class="m_top"></div> <!--注册信息--> <div class="item"> <div class="i_name"> <label for="username">用户名</label> </div> <div class="i_left"> <input type="text" id="username"> </div> <div class="i_right"></div> </div> <div class="item"> <div class="i_name"> <label for="password">密码</label> </div> <div class="i_left"> <input type="password" id="password"> </div> <div class="i_right"></div> </div> <div class="item"> <div class="i_name"> <label for="repassword">重复密码</label> </div> <div class="i_left"> <input type="password" id="repassword"> </div> <div class="i_right"></div> </div> <div class="item"> <div class="i_name"> <label>所在地</label> </div> <div class="i_left"> <select> <option>中国</option> <option>外国</option> </select> <select> <option>北京</option> <option>外省</option> </select> </div> <div class="i_right"></div> </div> <div class="item"> <div class="i_name"> <label>性别</label> </div> <div class="i_left"> <div class="sex"> <label for="main">男</label><input type="radio" name="sex" id="main"> </div> <div class="sex"> <label for="femain">女</label><input type="radio" name="sex" id="femain"> </div> </div> <div class="i_right"></div> </div> <div class="item"> <div class="i_name"> <label>爱好</label> </div> <div class="i_left"> <div class="i_like"> <label for="box">足球</label> <input type="checkbox" id="box"> </div> <div class="i_like"> <label for="moiv">电影</label> <input type="checkbox" id="moiv"> </div> <div class="i_like"> <label for="girl">美女</label> <input type="checkbox" id="girl"> </div> </div> <div class="i_right"></div> </div> <!--立即注册--> <div class="item"> <div class="i_name"> <label></label> </div> <div class="register"> <input type="button" value="立即注册"> </div> </div> </div> <div class="right"></div> </body> </html>
css样式之用户注册
*{padding: 0;margin: 0}
body{
background-image: url(../images/bg.png);
background-repeat: round;
}
.top{
height: 80px;
border-bottom: solid 6px darkgray;
}
.top .imgs{
height: 60px;
width: 15%;
float: left;
margin-top: 10px;
}
.top .t_title{
height: 60px;
width: 10%;
float: left;
line-height: 60px;
border-left: solid 1px gray;
margin-top:10px;
padding-left: 20px;
}
.top .t_right{
width: 10%;
float: right;
margin: 50px;
}
.left{
height: 800px;
width: 20%;
float: left;
}
.middle{
height: 800px;
width: 60%;
float: left;
}
.middle .m_top{
height: 300px;
width: 100%;
background: url('../images/wKioL1hHYfmBlmcSAAGgnWFfTz0270.jpg');
background-repeat: repeat-x;
}
.middle .item{
height: 50px;
width: 100%;
}
.middle .item .i_name{
height: 50px;
width: 20%;
float: left;
text-align: right;
line-height: 30px;
}
.middle .item .i_name label{
display: block;
margin-right:10px;
}
.middle .item .i_left{
height: 50px;
width: 60%;
float: left;
}
.middle .item .i_left input{
height: 30px;
width: 50%;
float:left;
}
.middle .item .i_left select{
height: 30px;
width: 20%;
}
.middle .item .i_left .sex{
width: 20%;
height: 30px;
float: left;
line-height: 30px;
}
.middle .item .i_left .i_like{
width: 30%;
height: 30px;
float: left;
line-height: 30px;
}
.middle .item .i_right{
height: 50px;
width: 20%;
float: left;
}
.middle .item .register input{
height: 50px;
width: 30%;
background-color: darkslategray;
cursor: pointer;
font-size:25px;
color: white;
margin-top: 20px;
}
效果图：
