上一節我們已經講過了手機網頁布局中的一些開發經驗，與布局的相關知識，如果不清楚的同學希望回頭去看一下，以下的教程是基於掌握上節知識點的基礎上來的，同時也是對手機網頁制作的一個大概的講解，建議把上節的知識點理清楚之后再繼續閱讀，上節鏈接地址
因為在程序員這個圈子中單身狗特別多，所以就突發奇想想來寫寫一篇關於手機婚戀網的網頁布局
目錄
1、閱讀讀者具備基礎
1、熟練的使用HTML和CSS
2、對HTML5和CSS3有一定的了解，這個不必深入
3、掌握JavaScript、jquery腳本語言
如果還不能具備以上基礎的讀者們建議你們還是去網上找一下其他的一些相關的教學貼看一看，要不然可能會跟不上下面的學習了
2、網頁布局思想
好了，現在我們就來開始講解一下網頁布局，在做手機網頁之前我們應該在腦海中有一個大致的規划，也就是規划一個常規的網頁需要有哪幾部分構成的
1、頭部欄
2、主題內容
3、固定底部欄
布局實現的代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="background-color: red;width: 100%;height:50px">header</div> <div style="background-color:yellow;width:100%;height:1500px">contain</div> <div style="background-color:blue;width:100%;height: 30px;position: fixed;left:0px;bottom: 0px">footer</div> </body> </html>
在Chrome（酷容）瀏覽器中運行，然后，按F12打開手機模式進行查看
注：因為Chrome支持手機模式查看效果
這樣大致的布局我們就已經有了，接下來我們要來討論一下在這三塊模塊中我們應該要添加些什么上去。
對於這三塊模塊的布局，在現在巨大多數的網站中是固定的，但是對其實各個模塊的自定義設計卻是不盡相同，所以在本次的教程中我們的模塊設計是
1、頭部欄中包含一個側拉的選項，一個搜索框，一個頁面切換的按鈕
2、內容部分：由於這是一個搭建手機頁面主體框架的教程，不是一個完整的項目，所以不添加內容部分
3、底部欄：底部欄我們為了簡單打算放上一個按鈕
3、整體布局的實現與頂部欄功能的實現
我們本次講解的項目是以打造一個婚戀網結構為題材講解的，我們先新建一個項目其中HTML文件命名為Index.html，CSS文件命名為style.css，JavaScript命名為script.js,圖標我們統一采用awesome圖標，下載地址,並且在網上下載一張ico圖片
首先我們先來引入HTML5網頁布局所需要的一些內容
HTML代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自己動手寫婚戀網</title> <link rel="short icon" style="image/x-icon" href="HLLogo.ico" > <link rel="icon" style="image/x-icon" href="HLLogo.ico"> <link rel="bookmark" style="image/x-icon" href="HLLogo.ico"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <!--開啟對web app的支持--> <meta name="apple-mobile-web-app-capable" content="yes" /> <!--主要是正對蘋果手機將數字自動識別為號碼--> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no"> <meta name="HandheldFriendly" content="true"> <script type="text/javascript" src="js/script.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> </body> </html>
上面的引入在上一節中提及過，不做解釋，好了我們運行一下試試，這一步主要是用來檢驗文件是否正常被引入以及標題欄中的圖標是否被設置了，建議開發人員首選chrome
運行並打開調試工具
從這里和運行效果我們可以確定程序是正確的
好了我們來設計一下頭部，中部和底部這3塊大的模塊
我們把頭部設計為高36px（em大小的確定主要是通過上級父類的font-size屬性來確定的，換句話說也就是1em等於上級的font-size的大小，默認的font-size是16px），在開發的過程中我們一般不考慮amazon kindle的兼容效果，還有切記header和footer中的樣式要盡量的保持一致
注：我們在設計的時候最好是采用em這種單位來做計量單位，不采用px的主要原因是px是固定多少像素，這樣會給后期維護帶來麻煩,同時em也能夠很好的處理不同屏幕以及不同分辨率之間的兼容性
好了接下來我們就創建一個命名為style.css文件，代碼如下：
*{ margin:0; padding:0; } html{ font-size:100%; } /*body{ font-size:1em; }*/ #header{ height:2em; line-height:2em; width:100%; background:#339EE2; color:white; } #contain{ min-height:50em; width:100%; background:yellow; } #footer{ position:fixed; left:0px; bottom:0px; height:2em; line-height:2em; width:100%; background:#339ee2; color:white; }
在HTML的body下面添加
<body> <div id="header"> </div> <div id="contain"></div> <div id="footer"></div> </body>
好了問題來了打開chrome切換到webkit模式下，選擇各種不同的手機型號你會看到效果都是不一樣的，這樣的用戶體驗應該說是很不好的，那該怎樣辦呢？
我們在上面有說到要使用em來處理，因為em會獲取上級的百分比進行自動計算，另外如果我們能夠獲取當前移動屏幕高度的像素，並把高度的像素平均分成幾份那么不就可以保證模塊在屏幕中所占的百分比，即位置是確定的，其他的整體布局也會跟着變化，JS代碼如下：
$(function(){ var fontsize=window.screen.height/30; $(".container").css("fontSize",fontsize); })
其中我們為什么要獲取屏幕在除以30呢？最主要的原因還是個人的原因，因為我的調試環境是在iphone4下面進行的，iphone4的height值是480像素，所以除以30剛好也就是16像素，這根默認的像素值是一直的，也是為了方便我在后面的em與px之間的換算，當然這個fontsize不一定要跟我一樣，主要是看你的習慣。
首頁的的基本結構也已經搭建好了，這時我們應該將body的background設置為white，yellow只是為了讓效果更為明顯而已
在頭部我們應該要包括一個地區的選擇按鈕，一個搜索框，和一個性別的選擇按鈕
各部分的設計如下：
地區選擇按鈕：點擊跳轉到相應的頁面，左邊距5px
搜索框：點擊跳轉到相應的頁面
性別選擇按鈕：點擊跳轉到相應的頁面，右邊距5px，
代碼如下：
HTML代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自己動手寫婚戀網</title> <link rel="stylesheet" type="text/css" href="FontAwesome/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="FontAwesome/css/font-awesome.min.css"> <!--引入fontawesome圖標--> <link rel="short icon" style="image/x-icon" href="HLLogo.ico" > <link rel="icon" style="image/x-icon" href="HLLogo.ico"> <link rel="bookmark" style="image/x-icon" href="HLLogo.ico"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <!--開啟對web app的支持--> <meta name="apple-mobile-web-app-capable" content="yes" /> <!--主要是正對蘋果手機將數字自動識別為號碼--> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no"> <meta name="HandheldFriendly" content="true"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/script.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div id="header"> <div id="area" class="fl address"> <span>全國</span> <i class="icon-circle-arrow-down"></i> </div> <div id="search" class="fl"> <input type="text" placeholder="請輸入你所要搜索的內容" disabled></input> </div> <div class="fr setting" id="sex"> <span>設置</span> <i class="icon-heart"></i> </div> </div> <div id="contain"></div> <div id="footer"> <span>我也戀愛</span> </div> </body> </html>
CSS代碼
*{ margin:0; padding:0; } /*header*/ #header{ height:2em; line-height:2em; width:100%; background:#339EE2; color:#FCECDF; } #area{ margin-left:0.5em; } #sex{ margin-right:0.5em; } #search{ margin-left: 0.5em; width: -webkit-calc(100% - 9em); height: 1.2em; } #search>input{ width: 100%; height:1.2em; line-height: 1.2em; padding-top: 0.3em; font-size: 0.8em; border-radius: 0.5em; box-shadow:0 0.125em 2px #ccc; } /*container*/ #contain{ min-height:50em; width:100%; background: #FCECDF; } /*footer*/ #footer{ position:fixed; left:0px; bottom:0px; height:2.5em; line-height:2.5em; width:100%; background:#339ee2; color:#FCECDF; vertical-align: center; text-align: center; } /*other*/ .fl{ float: left; } .fr{ float: right; }
其中的CSS代碼我們要注意一下規范，就是對各部分的CSS樣式進行分開注解一下，這樣有利於以后的代碼維護
JS代碼
$(function(){ var fontsize=window.screen.width/20; $("body").css("fontSize",fontsize); $("#search>input").css("height",fontsize*1.2); $("#footer").click(function(){ //alert("該內容未設置"); }); })
好的我們來運行一下結果看看，結果如下所示：
這里我們要關注一下配色方案，具體的配色方案我們可以在網上查找，然后通過fast stone來獲取
4、相關頁面的排版布局
由於整個項目可能會比較冗余，這里我們就挑選幾個功能進行講解，其他的功能會在后面提供源代碼供大家下載
這里我們挑選比較有代表性的“全國”和底部欄進行更進一步的講解，“全國”這個相信大家都會知道這個所要實現的功能是什么，底部欄“我也戀愛”要實現的是相當於注冊的功能，其他的細節如下：
“全國”：跳轉到相應頁，相應頁中有，省份、城市等信息，底部有確定和取消按鈕，右上角有一個紅X用來取消，左上角有一個返回按鈕，背景不透明
“我也戀愛”：跳轉到相應頁，相應頁中有姓名，年齡，匹配范圍等設置，有確定和取消按鈕，右上角有一個白色的X，背景為透明
好了基本的細節就是這樣了，其他的一些細節我們就來自由發揮
那么我們就來看一下我們所實現的“全國”相應頁面的效果圖：
其中我們雖然實現了大部分的頁面上的基本功能，但是省市聯動這一塊我們是沒有實現的，具體的實現方法請自行百度解決，這個問題在網上的教程比較多
HTML核心代碼：
<div class="city"> <div class="cityheader"> <div class="fl" id="return"> <i class="icon-reply"></i> </div> <div class="fl area">選擇地區</div> <div class="close"> <span class="fr">X</span> </div> </div> <div class="citybody"> <hr id="hr1" > <div id="hot"> 熱門城市: <a href="#">廣州</a> <a href="#">北京</a> <a href="#">深圳</a> <a href="#">上海</a> </div> <div id="selectarea" > <center> <table class="table"> <tr> <td>所在省份：</td> <td> <input class="xiala" type="text" /> </td> </tr> <tr> <td>所在城市：</td> <td><input class="xiala" type="text" /></td> </tr> <tr> <td>所在地區：</td> <td><input class="xiala" type="text" /></td> </tr> </table> </center> </div> <hr id="hr2"> </div> <div class="cityfooter">確定</div> </div>
其中在編寫相關HTML代碼的時候，相關頁我們是采用將代碼寫在同一個HTML文件之中，這樣的好處是可以減少了HTTP請求的次數，為了比較直觀的看到效果，我們應該對首頁進行隱藏，相關頁就直接顯示
核心CSS代碼：
.cityheader{ height:2em; line-height:2em; width:100%; background:#339EE2; color:#FCECDF; } #return{ margin-left: 0.5em; } .area{ line-height: 2em; padding-left: 35%; color: #FCECDF; } .close span{ margin-right: 0.5em; line-height: 2em; color: #FCECDF; } #hr1{ border:0.125em dashed #D7AE53; margin-top: 3em; } #hr2{ border:0.125em dashed #D7AE53; margin-bottom: 3em; } .cityfooter{ position:fixed; left:0px; bottom:0px; height:2.5em; line-height:2.5em; width:100%; background:#339ee2; color:#FCECDF; vertical-align: center; text-align: center; } #selectarea{ margin:1em 1em; } .table{ cellspacing:10%; } .xiala{ height: 1.5em; width: 13em; } #hot{ margin-left: 2em; margin-top:3em; margin-bottom: 1em; } #hot>a{ text-decoration:none; }
由於Jq代碼比較少，就直接全部拿出來展示
jquery代碼
$(function(){ var fontsize=window.screen.width/20; $("body").css("fontSize",fontsize); $("#search>input").css("height",fontsize*1.2); $(".xiala").css("height",fontsize*1.2); $("#footer").click(function(){ //alert("該內容為設置"); }); $(".address").click(function(){ $("#main").addClass("hide"); $(".city").slideToggle(); }); $("#return").click(function(){ $("#main").removeClass("hide"); $(".city").slideToggle(); }); $(".close").click(function(){ $("#main").removeClass("hide"); $(".city").slideToggle(); }); })
好了，地區的相關頁面我們就實現了，下面我們就來討論一下怎樣實現“我也戀愛”相關頁面，其實這個頁面說白了也就是一個登陸頁面
我們最后實現的效果大致如下所示：
我們在實現這個效果的時候，是通過實現三層盒子模型來實現的，最底下是首頁層，然后是一層高斯模糊的濾鏡層，但是直接在濾鏡層上面寫姓名等信息會導致字體模糊等問題，所以我們就創建第三層，也就是你所看到的黃色的區域內的內容，在實現這三層關系的時候我們采用的布局是absolute，但是經過實踐發現，黃色的區域會被顯示在濾鏡層的下面，所以我們可以通過z-index屬性來把黃色層提到最上面
HTML相關代碼：
<div class="hide pop"> <table> <tr> <td>姓名：</td> <td><input class="inp" type="text"></input></td> </tr> <tr class="tr"> <td>性別：</td> <td><input class="inp" type="text"></input></td> </tr> <tr> <td colspan="2"> <center> <input class="inpbut" type="button" style="margin-left: 1em" value="確定"></input> <input id="cancel" class="inpbut" type="button" value="取消"></input> </center> </td> </tr> </table> </div> <div class="change hide blur"> <div class="changeheader"> <div class="clo fr">X</div> </div> <div class="changebody"></div> </div>
CSS相關代碼：
/*登陸頁面*/ .change{ background:#462C75; width:100%; top:0px; left:0px; position:absolute; opacity:0.7; } .changeheader{ height:2em; line-height:2em; width:100%; } .changebody{ width:100%; height:-webkit-calc(100%-4.5em); } .changeheader>.clo{ margin-right:0.4em; font-size:1.8em; font-weight:bold; color:red; } .blur{ -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); } /*彈出窗口*/ .pop{ position:absolute; top:calc(9em); left:20%; border-radius:1em; background:yellow; padding:0.7em; width:9em; height:4.5em; z-index:10; } .pop>table{ } .inp{ width:5em; height:2em; } .inpbut{ width:3em; height:2em; }
注:彈出窗口所指的是黃色層
Jq的所有代碼：
$(function(){ var fontsize=window.screen.width/20; $("body").css("fontSize",fontsize); $("#search>input").css("height",fontsize*1.2); $(".xiala").css("height",fontsize*1.2); $(".inp").css("height",fontsize); $("#footer").click(function(){ //alert("該內容為設置"); }); $(".address").click(function(){ $("#main").addClass("hide"); $(".city").slideToggle(); }); $("#return").click(function(){ $("#main").removeClass("hide"); $(".city").slideToggle(); }); $(".close").click(function(){ $("#main").removeClass("hide"); $(".city").slideToggle(); }); $("#footer").click(function() { var h=window.screen.height; $(".change").css('height', h); //$("#main").addClass("hide"); $(".change").slideToggle(); $(".pop").slideToggle(); $(".change").css('position', 'fixed'); $(".pop").css('position', 'fixed'); }); $(".clo").click(function() { $(".pop").slideToggle(); $(".change").slideToggle(); //$("#login").css('display', 'none'); }); $("#cancel").click(function(){ $(".pop").slideToggle(); $(".change").slideToggle(); }); })
好了，寫到這里也有點累了，畢竟這篇文章寫了快一個星期，這里寫這篇文章其實也就是起到拋磚引玉的作用，具體的其他功能也就不多說了，相信如果大家能做到這樣的隨心所欲的根據要求來實現效果，那么網頁布局也沒有什么難的，接下來我們就來談一談優化問題，相關的代碼問題就到此為止了
5、整體頁面優化
上面我們已經我們已經基本上完成了網頁基本的框架，其他的詳細內容就不做補充了，但是在這里我們還要對網頁進行性能上的優化
1、對JS進行壓縮，壓縮后的結果是：
$(function(){var fontsize=window.screen.width/20;$("body").css("fontSize",fontsize);$("#search>input").css("height",fontsize*1.2);$(".xiala").css("height",fontsize*1.2);$(".inp").css("height",fontsize);$("#footer").click(function(){});$(".address").click(function(){$("#main").addClass("hide");$(".city").slideToggle()});$("#return").click(function(){$("#main").removeClass("hide");$(".city").slideToggle()});$(".close").click(function(){$("#main").removeClass("hide");$(".city").slideToggle()});$("#footer").click(function(){var h=window.screen.height;$(".change").css("height",h);$(".change").slideToggle();$(".pop").slideToggle();$(".change").css("position","fixed");$(".pop").css("position","fixed")});$(".clo").click(function(){$(".pop").slideToggle();$(".change").slideToggle()});$("#cancel").click(function(){$(".pop").slideToggle();$(".change").slideToggle()})});
現在壓縮工具的地址是http://tool.lu/js/，但是在使用JS壓縮的時候，建議大家要調試好了，確保無誤之后再進行壓縮，這樣可以避免后期修改的麻煩，相對的CSS和HTML也是可以進行代碼壓縮的，但是這兩個一般不推薦大家壓縮因為這兩個涉及的是頁面的效果可能會經常性的發生修改，所以壓縮會對以后造成麻煩
2、懶加載
這個概念不知道大家聽過沒有，不清楚的請自行去百度一下，懶加載最重要的一個好處是在網頁中存在大量的數據、圖片的時候可以加快網頁框架的加載時間，而那些圖片則是在你所需要顯示的時候才會顯示，懶加載我們一般是使用jquery.lazyload.js插件來進行實現的
3、減少頁面的HTTP請求
在頁面加載的時候，網頁的HTML、CSS、JavaScript、圖片等其他的內容都會各自創建各自的HTTP請求，所以當頁面的圖片內容過多的時候創建的HTTP請求也會很多，所以我們要可以使用Gulp工具來生成CSS精靈圖
4、Base64轉換
其實Base64位的轉換原理是將HTTP請求圖片的地址，有一串字符串來代替，但是這種方法雖然好處很多，但是在使用Base64轉碼的關鍵是要注意一下轉碼的圖片不能過大，因為過大的圖片轉碼生成的字符串過長，這樣會給開發者造成困擾
Base64在HTML中的使用
//在html代碼img標簽里的寫法 <img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">
Base64在CSS中的使用
//在css里的寫法 #fkbx-spch, #fkbx-hspch { background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center; ... }
Base64轉碼工具有很多，這個網上自行查找就可以了，但是今天我們要來推薦一款神器，就是chrome，這個大家都知道吧，但是大家知道這個也是可以生成base64圖片嗎？
在Source中找到HTTP發送請求的圖片，單擊一下，右側欄就會出現Base64轉碼的字符串
這個就是我們所要的找的
5、CDN加速
這個直接在七牛或者是又拍雲上注冊一個賬號就好了，這個在這里就不討論了
6、源碼下載
http://pan.baidu.com/s/1dDLMvlf
7、參考文章
8、結尾
好了，洋洋灑灑的文章終於寫完了，在此我想做一下最后的結尾，由於本人的能力有限，也就是小菜鳥一枚，如果是有什么錯誤或者是意見的話，歡迎來騷擾。另外如果是想轉載的話，請注明出處，請尊重別人的知識，謝謝