1號盒子命名為header
2號盒子命名為registerarea
3號盒子命名為footer
1. 結構搭建
step1:新建register.html和register.css文件
注意：注冊頁面涉及隱私 不需要優化 怎么簡單怎么寫 怎么安全怎么寫
<!--注冊頁面涉及隱私 不需要優化 怎么簡單怎么寫 怎么安全怎么寫-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注冊頁面</title>
<!--初始化css-->
<link rel="stylesheet" type="text/css" href="css/base.css">
<!--引入register.css文件-->
<link rel="stylesheet" type="text/css" href="css/register.css">
</head>
<body>
<div class="w">
123
</div>
</body>
</html>
/*注冊頁面的CSS*/
.w {/*由於注冊頁面的html文件沒有引入版心的樣式 所以這里要重新寫*/
width: 1200px;
margin: auto;
}
2.header制作
<div class="w">
<!--header部分-->
<div class="header">
<div class="logo">
<a href="index.html">
<img src="img/logo.png">
</a>
</div>
</div>
</div>
.header {
height: 82px;
border-bottom: 2px solid #b1191a;
}
.logo {
padding-top: 15px;
/*這里希望品優購這個logo可以距離瀏覽器頂端遠一點
用margin-top會發生外邊距合並的現象，不合適
這里用padding-top比較合適*/
}
3. registerarea制作
registerarea也分兩個部分，上面一個盒子放標題（h3）下面一個盒子放內容注冊內容（reg-form）
step1: registerarea結構搭建
<div class="w">
<!--header部分-->
<div class="header">
<div class="logo">
<a href="index.html">
<img src="img/logo.png">
</a>
</div>
</div>
<!--registerarea部分-->
<div class="registerarea">
<h3>123</h3>
<div class="reg_form">abc</div>
</div>
</div>
.registerarea {
height: 520px;/*大一點、小一點沒有關系*/
border: 1px solid #ccc;
margin-top: 20px;
}
step2: h3部分
<h3>
注冊新用戶
<em>我有賬號，去<a href="login.html">登陸</a></em>
</h3>
.registerarea h3 {
height: 40px;
border-bottom: 1px solid #ccc;
background-color: #ececec;
padding: 0 10px;/*反正h3沒給寬度 可以放心地*/
font-weight: 400;/*不加粗*/
line-height: 40px;
font-size: 18px;
}
.registerarea em {
font-size: 14px;
float: right;
}
.registerarea a {
color: #c81623;
}
step3: reg-form部分
結構分析： 大盒子左右居中對齊，里面每一行看作一個li。
(1)第一個li為例子(手機號)：第一行小li里面分三部分，用行內塊元素比較恰當（label、input、span）。
<div class="reg_form">
<ul>
<li>
<label>手機號：</label><!--label標簽是行內元素-->
<input type="text" name="">
<span class="error">
<i class="error_icon"></i><!--里面放小圖標做背景處理-->
手機號碼格式不正確，請從新輸入
</span>
</li>
</ul>
</div>
.reg_form {
/*這個盒子要求左右居中對齊*/
width: 600px;
height: 400px;/*寬高都是隨手拉的*/
/*background-color: pink;*/
margin: 40px auto 0;/*上40px 左右auto 不給下外邊距*/
}
.reg_form label {
display: inline-block;
width: 100px;
height: 36px;
line-height: 36px;
text-align: right;/*文字右對齊*/
}
.reg_form input {
width: 238px;
height: 34px;
border: 1px solid #ccc;
margin-left: 5px;
}
.error {
margin-left: 10px;
color: #df3033;
}
.error_icon {
display: inline-block;
width: 20px;
height: 20px;
background: url(../img/error.png) no-repeat;
/*出現行內塊元素的地方一般都會出現這句話*/
vertical-align: middle;/*讓背景圖片和文字對齊（中線對齊）*/
/*若中線對齊之后依然覺得不夠齊 這里可以利用這個微調 讓圖標再往上走2px*/
margin-top: -2px;
}
(2)第2個li為例子(短信驗證碼)：主要是li的復制粘貼和簡單修改
<!--第2個li-->
<li>
<label>短信驗證碼：</label><!--label標簽是行內元素-->
<input type="text" name="">
</li>
注意：樣式里面要加上下面一句話，讓每個小li之間留點距離。
.reg_form li {
margin-bottom: 15px;/*讓每個li 之間留點距離*/
}
(3)第3個li為例子(登陸密碼)：密碼輸入正確
<!--第3個li-->
<li>
<label>登陸密碼：</label><!--label標簽是行內元素-->
<input type="password" name="">
<span class="success">
<i class="success_icon"></i><!--里面放小圖標做背景處理-->
輸入正確
</span>
</li>
.success {
margin-left: 10px;
color: #40b83f;
}
.success_icon {
display: inline-block;
width: 20px;
height: 20px;
background: url(../img/success.png) no-repeat;
/*出現行內塊元素的地方一般都會出現這句話*/
vertical-align: middle;/*讓背景圖片和文字對齊（中線對齊）*/
/*若中線對齊之后依然覺得不夠齊 這里可以利用這個微調 讓圖標再往上走2px*/
margin-top: -2px;
}
(4)第4個li:安全程度：弱、中、強
<!--第4個li-->
<li class="safe">
安全程度
<em class="ruo">弱</em>
<em class="zhong">中</em>
<em class="qiang">強</em>
</li>
.safe {
padding-left: 181px;/*全部寫完之后 在檢查元素里面調*/
color: #b2b2b2;
}
.safe em {
/*em行內元素內邊距不要給上下 可以給左右*/
padding: 0 12px;
color: #fff;
}
.ruo {
background-color: #de1111;
}
.zhong {
background-color: #40b83f;
}
.qiang {
background-color: #f79100;
}
同時注意將之前的
.registerarea em {/*放的內容是：我有賬號，去登陸*/
font-size: 14px;
float: right;
}
修改為
.registerarea h3 em {
/*如果只是.registerarea em則會對下面的.safe em造成影響
因為.safe em也屬於registerarea內 所以需要h3在這里把這限定死*/
font-size: 14px;
float: right;
}
(5)第5個li:確認密碼（直接復制,樣式不用修改）
<!--第5個li-->
<li>
<label>確認密碼：</label><!--label標簽是行內元素-->
<input type="password" name="">
<span class="error">
<i class="error_icon"></i><!--里面放小圖標做背景處理-->
密碼不一致，請重新輸入
</span>
</li>
(6)第6個li:同意模塊制作
<!--第6個li-->
<li class="agree">
<input type="checkbox" name="">
同意協議並注冊
</li>
寫樣式之前在瀏覽器中打開，會發現這個input特別打，原因是受到前面幾個li中.reg_form input樣式沖突的影響。所以對前面.reg_form中input添加類名class="inp"
<div class="reg_form">
<ul>
<!--第1個li-->
<li>
<label>手機號：</label><!--label標簽是行內元素-->
<input type="text" name="" class="inp">
<span class="error">
<i class="error_icon"></i><!--里面放小圖標做背景處理-->
手機號碼格式不正確，請從新輸入
</span>
</li>
<!--第2個li-->
<li>
<label>短信驗證碼：</label><!--label標簽是行內元素-->
<input type="text" name="" class="inp">
</li>
<!--第3個li-->
<li>
<label>登陸密碼：</label><!--label標簽是行內元素-->
<input type="password" name="" class="inp">
<span class="success">
<i class="success_icon"></i><!--里面放小圖標做背景處理-->
輸入正確
</span>
</li>
<!--第4個li-->
<li class="safe">
安全程度
<em class="ruo">弱</em>
<em class="zhong">中</em>
<em class="qiang">強</em>
</li>
<!--第5個li-->
<li>
<label>確認密碼：</label><!--label標簽是行內元素-->
<input type="password" name="" class="inp">
<span class="error">
<i class="error_icon"></i><!--里面放小圖標做背景處理-->
密碼不一致，請重新輸入
</span>
</li>
<!--第6個li-->
<li class="agree">
<input type="checkbox" name="">
同意協議並注冊
</li>
</ul>
</div>
並將css中的原樣式
.reg_form input {
width: 238px;
height: 34px;
border: 1px solid #ccc;
margin-left: 5px;
}
修改成
.inp {
width: 238px;
height: 34px;
border: 1px solid #ccc;
margin-left: 5px;
}
之后再寫同意模塊的樣式
.agree {
padding-left: 100px;
}
.agree input {
vertical-align: middle;
margin-right: 5px;
}
.agree a {
color: #1ba1e6;
}
(7)第7個li:完成注冊
<!--第7個li-->
<li>
<input class="over" type="submit" name="" value="完成注冊">
</li>
.over {
width: 200px;
height: 34px;
background-color: #c81623;
margin: 30px 0 0 130px;
border: 0;/*不要默認的小邊框*/
color: #fff;
font-size: 14px;
}
(8)添加表單域
表單應該有表單域
<form action="demo.php">
<ul>
<!--第1個li-->
<li>
<label>手機號：</label><!--label標簽是行內元素-->
<input type="text" name="" class="inp">
<span class="error">
<i class="error_icon"></i><!--里面放小圖標做背景處理-->
手機號碼格式不正確，請從新輸入
</span>
</li>
<!--第2個li-->
<li>
<label>短信驗證碼：</label><!--label標簽是行內元素-->
<input type="text" name="" class="inp">
</li>
<!--第3個li-->
<li>
<label>登陸密碼：</label><!--label標簽是行內元素-->
<input type="password" name="" class="inp">
<span class="success">
<i class="success_icon"></i><!--里面放小圖標做背景處理-->
輸入正確
</span>
</li>
<!--第4個li-->
<li class="safe">
安全程度
<em class="ruo">弱</em>
<em class="zhong">中</em>
<em class="qiang">強</em>
</li>
<!--第5個li-->
<li>
<label>確認密碼：</label><!--label標簽是行內元素-->
<input type="password" name="" class="inp">
<span class="error">
<i class="error_icon"></i><!--里面放小圖標做背景處理-->
密碼不一致，請重新輸入
</span>
</li>
<!--第6個li-->
<li class="agree">
<input type="checkbox" name="">同意協議並注冊
<a href="#">用戶協議</a>
</li>
<!--第7個li-->
<li>
<input class="over" type="submit" name="" value="完成注冊">
</li>
</ul>
</form>
4. footer制作
<!--footer部分-->
<div class="footer">
<p class="links">
關於我們 | 聯系我們 | 聯系客服 | 商家入駐 | 營銷中心 | 手機品優購 | 友情鏈接 | 銷售聯盟 | 品優購社區 | 品優購公益 | English Site | Contact U
</p>
<p class="copyright">
地址：北京市昌平區建材城西路金燕龍辦公樓一層 郵編：100096 電話：400-618-4000 傳真：010-82935100 郵箱: zhanghj+itcast.cn<br>京ICP備08001421號京公網安備110108007702
</p>
</div>
.footer {
height: 120px;
text-align: center;
}
.links {
margin-top: 20px;
height: 30px;
}
.copyright {
line-height: 20px;
}