我這里是用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;
}
效果圖：
