上一節(jié)我們已經(jīng)講過了手機網(wǎng)頁布局中的一些開發(fā)經(jīng)驗，與布局的相關(guān)知識，如果不清楚的同學(xué)希望回頭去看一下，以下的教程是基于掌握上節(jié)知識點的基礎(chǔ)上來的，同時也是對手機網(wǎng)頁制作的一個大概的講解，建議把上節(jié)的知識點理清楚之后再繼續(xù)閱讀，上節(jié)鏈接地址
因為在程序員這個圈子中單身狗特別多，所以就突發(fā)奇想想來寫寫一篇關(guān)于手機婚戀網(wǎng)的網(wǎng)頁布局
目錄
3、整體布局的實現(xiàn)與頂部欄功能的實現(xiàn)
1、閱讀讀者具備基礎(chǔ)
1、熟練的使用HTML和CSS
2、對HTML5和CSS3有一定的了解，這個不必深入
3、掌握JavaScript、jquery腳本語言
如果還不能具備以上基礎(chǔ)的讀者們建議你們還是去網(wǎng)上找一下其他的一些相關(guān)的教學(xué)貼看一看，要不然可能會跟不上下面的學(xué)習(xí)了
2、網(wǎng)頁布局思想
好了，現(xiàn)在我們就來開始講解一下網(wǎng)頁布局，在做手機網(wǎng)頁之前我們應(yīng)該在腦海中有一個大致的規(guī)劃，也就是規(guī)劃一個常規(guī)的網(wǎng)頁需要有哪幾部分構(gòu)成的
1、頭部欄
2、主題內(nèi)容
3、固定底部欄
布局實現(xiàn)的代碼如下：
<!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支持手機模式查看效果
這樣大致的布局我們就已經(jīng)有了，接下來我們要來討論一下在這三塊模塊中我們應(yīng)該要添加些什么上去。
對于這三塊模塊的布局，在現(xiàn)在巨大多數(shù)的網(wǎng)站中是固定的，但是對其實各個模塊的自定義設(shè)計卻是不盡相同，所以在本次的教程中我們的模塊設(shè)計是
1、頭部欄中包含一個側(cè)拉的選項，一個搜索框，一個頁面切換的按鈕
2、內(nèi)容部分：由于這是一個搭建手機頁面主體框架的教程，不是一個完整的項目，所以不添加內(nèi)容部分
3、底部欄：底部欄我們?yōu)榱撕唵未蛩惴派弦粋€按鈕
3、整體布局的實現(xiàn)與頂部欄功能的實現(xiàn)
我們本次講解的項目是以打造一個婚戀網(wǎng)結(jié)構(gòu)為題材講解的，我們先新建一個項目其中HTML文件命名為Index.html，CSS文件命名為style.css，JavaScript命名為script.js,圖標我們統(tǒng)一采用awesome圖標，下載地址,并且在網(wǎng)上下載一張ico圖片
首先我們先來引入HTML5網(wǎng)頁布局所需要的一些內(nèi)容
HTML代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自己動手寫婚戀網(wǎng)</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" /> <!--主要是正對蘋果手機將數(shù)字自動識別為號碼--> <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>
上面的引入在上一節(jié)中提及過，不做解釋，好了我們運行一下試試，這一步主要是用來檢驗文件是否正常被引入以及標題欄中的圖標是否被設(shè)置了，建議開發(fā)人員首選chrome
運行并打開調(diào)試工具
從這里和運行效果我們可以確定程序是正確的
好了我們來設(shè)計一下頭部，中部和底部這3塊大的模塊
我們把頭部設(shè)計為高36px（em大小的確定主要是通過上級父類的font-size屬性來確定的，換句話說也就是1em等于上級的font-size的大小，默認的font-size是16px），在開發(fā)的過程中我們一般不考慮amazon kindle的兼容效果，還有切記header和footer中的樣式要盡量的保持一致
注：我們在設(shè)計的時候最好是采用em這種單位來做計量單位，不采用px的主要原因是px是固定多少像素，這樣會給后期維護帶來麻煩,同時em也能夠很好的處理不同屏幕以及不同分辨率之間的兼容性
好了接下來我們就創(chuàng)建一個命名為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模式下，選擇各種不同的手機型號你會看到效果都是不一樣的，這樣的用戶體驗應(yīng)該說是很不好的，那該怎樣辦呢？
我們在上面有說到要使用em來處理，因為em會獲取上級的百分比進行自動計算，另外如果我們能夠獲取當(dāng)前移動屏幕高度的像素，并把高度的像素平均分成幾份那么不就可以保證模塊在屏幕中所占的百分比，即位置是確定的，其他的整體布局也會跟著變化，JS代碼如下：
$(function(){ var fontsize=window.screen.height/30; $(".container").css("fontSize",fontsize);})
其中我們?yōu)槭裁匆@取屏幕在除以30呢？最主要的原因還是個人的原因，因為我的調(diào)試環(huán)境是在iphone4下面進行的，iphone4的height值是480像素，所以除以30剛好也就是16像素，這根默認的像素值是一直的，也是為了方便我在后面的em與px之間的換算，當(dāng)然這個fontsize不一定要跟我一樣，主要是看你的習(xí)慣。
首頁的的基本結(jié)構(gòu)也已經(jīng)搭建好了，這時我們應(yīng)該將body的background設(shè)置為white，yellow只是為了讓效果更為明顯而已
在頭部我們應(yīng)該要包括一個地區(qū)的選擇按鈕，一個搜索框，和一個性別的選擇按鈕
各部分的設(shè)計如下：
地區(qū)選擇按鈕：點擊跳轉(zhuǎn)到相應(yīng)的頁面，左邊距5px
搜索框：點擊跳轉(zhuǎn)到相應(yīng)的頁面
性別選擇按鈕：點擊跳轉(zhuǎn)到相應(yīng)的頁面，右邊距5px，
代碼如下：
HTML代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自己動手寫婚戀網(wǎng)</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" /> <!--主要是正對蘋果手機將數(shù)字自動識別為號碼--> <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="請輸入你所要搜索的內(nèi)容" disabled></input> </div> <div class="fr setting" id="sex"> <span>設(shè)置</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代碼我們要注意一下規(guī)范，就是對各部分的CSS樣式進行分開注解一下，這樣有利于以后的代碼維護
JS代碼
$(function(){ var fontsize=window.screen.width/20; $("body").css("fontSize",fontsize); $("#search>input").css("height",fontsize*1.2); $("#footer").click(function(){ //alert("該內(nèi)容未設(shè)置"); });})
好的我們來運行一下結(jié)果看看，結(jié)果如下所示：
這里我們要關(guān)注一下配色方案，具體的配色方案我們可以在網(wǎng)上查找，然后通過fast stone來獲取
4、相關(guān)頁面的排版布局
由于整個項目可能會比較冗余，這里我們就挑選幾個功能進行講解，其他的功能會在后面提供源代碼供大家下載
這里我們挑選比較有代表性的“全國”和底部欄進行更進一步的講解，“全國”這個相信大家都會知道這個所要實現(xiàn)的功能是什么，底部欄“我也戀愛”要實現(xiàn)的是相當(dāng)于注冊的功能，其他的細節(jié)如下：
“全國”：跳轉(zhuǎn)到相應(yīng)頁，相應(yīng)頁中有，省份、城市等信息，底部有確定和取消按鈕，右上角有一個紅X用來取消，左上角有一個返回按鈕，背景不透明
“我也戀愛”：跳轉(zhuǎn)到相應(yīng)頁，相應(yīng)頁中有姓名，年齡，匹配范圍等設(shè)置，有確定和取消按鈕，右上角有一個白色的X，背景為透明
好了基本的細節(jié)就是這樣了，其他的一些細節(jié)我們就來自由發(fā)揮
那么我們就來看一下我們所實現(xiàn)的“全國”相應(yīng)頁面的效果圖：
其中我們雖然實現(xiàn)了大部分的頁面上的基本功能，但是省市聯(lián)動這一塊我們是沒有實現(xiàn)的，具體的實現(xiàn)方法請自行百度解決，這個問題在網(wǎng)上的教程比較多
HTML核心代碼：
<div class="city"> <div class="cityheader"> <div class="fl" id="return"> <i class="icon-reply"></i> </div> <div class="fl area">選擇地區(qū)</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>所在地區(qū)：</td> <td><input class="xiala" type="text" /></td> </tr> </table> </center> </div> <hr id="hr2"> </div> <div class="cityfooter">確定</div> </div>
其中在編寫相關(guān)HTML代碼的時候，相關(guān)頁我們是采用將代碼寫在同一個HTML文件之中，這樣的好處是可以減少了HTTP請求的次數(shù)，為了比較直觀的看到效果，我們應(yīng)該對首頁進行隱藏，相關(guān)頁就直接顯示
核心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("該內(nèi)容為設(shè)置"); }); $(".address").click(function(){ $("#main").addClass("hide"); $(".city").slideToggle(); }); $("#return").click(function(){ $("#main").removeClass("hide"); $(".city").slideToggle(); }); $(".close").click(function(){ $("#main").removeClass("hide"); $(".city").slideToggle(); });})
好了，地區(qū)的相關(guān)頁面我們就實現(xiàn)了，下面我們就來討論一下怎樣實現(xiàn)“我也戀愛”相關(guān)頁面，其實這個頁面說白了也就是一個登陸頁面
我們最后實現(xiàn)的效果大致如下所示：
我們在實現(xiàn)這個效果的時候，是通過實現(xiàn)三層盒子模型來實現(xiàn)的，最底下是首頁層，然后是一層高斯模糊的濾鏡層，但是直接在濾鏡層上面寫姓名等信息會導(dǎo)致字體模糊等問題，所以我們就創(chuàng)建第三層，也就是你所看到的黃色的區(qū)域內(nèi)的內(nèi)容，在實現(xiàn)這三層關(guān)系的時候我們采用的布局是absolute，但是經(jīng)過實踐發(fā)現(xiàn)，黃色的區(qū)域會被顯示在濾鏡層的下面，所以我們可以通過z-index屬性來把黃色層提到最上面
HTML相關(guān)代碼：
<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相關(guān)代碼：
/*登陸頁面*/.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("該內(nèi)容為設(shè)置"); }); $(".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(); });})
好了，寫到這里也有點累了，畢竟這篇文章寫了快一個星期，這里寫這篇文章其實也就是起到拋磚引玉的作用，具體的其他功能也就不多說了，相信如果大家能做到這樣的隨心所欲的根據(jù)要求來實現(xiàn)效果，那么網(wǎng)頁布局也沒有什么難的，接下來我們就來談一談優(yōu)化問題，相關(guān)的代碼問題就到此為止了
5、整體頁面優(yōu)化
上面我們已經(jīng)我們已經(jīng)基本上完成了網(wǎng)頁基本的框架，其他的詳細內(nèi)容就不做補充了，但是在這里我們還要對網(wǎng)頁進行性能上的優(yōu)化
1、對JS進行壓縮，壓縮后的結(jié)果是：
$(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()})});
現(xiàn)在壓縮工具的地址是http://tool.lu/js/，但是在使用JS壓縮的時候，建議大家要調(diào)試好了，確保無誤之后再進行壓縮，這樣可以避免后期修改的麻煩，相對的CSS和HTML也是可以進行代碼壓縮的，但是這兩個一般不推薦大家壓縮因為這兩個涉及的是頁面的效果可能會經(jīng)常性的發(fā)生修改，所以壓縮會對以后造成麻煩
2、懶加載
這個概念不知道大家聽過沒有，不清楚的請自行去百度一下，懶加載最重要的一個好處是在網(wǎng)頁中存在大量的數(shù)據(jù)、圖片的時候可以加快網(wǎng)頁框架的加載時間，而那些圖片則是在你所需要顯示的時候才會顯示，懶加載我們一般是使用jquery.lazyload.js插件來進行實現(xiàn)的
3、減少頁面的HTTP請求
在頁面加載的時候，網(wǎng)頁的HTML、CSS、JavaScript、圖片等其他的內(nèi)容都會各自創(chuàng)建各自的HTTP請求，所以當(dāng)頁面的圖片內(nèi)容過多的時候創(chuàng)建的HTTP請求也會很多，所以我們要可以使用Gulp工具來生成CSS精靈圖
4、Base64轉(zhuǎn)換
其實Base64位的轉(zhuǎn)換原理是將HTTP請求圖片的地址，有一串字符串來代替，但是這種方法雖然好處很多，但是在使用Base64轉(zhuǎn)碼的關(guān)鍵是要注意一下轉(zhuǎn)碼的圖片不能過大，因為過大的圖片轉(zhuǎn)碼生成的字符串過長，這樣會給開發(fā)者造成困擾
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轉(zhuǎn)碼工具有很多，這個網(wǎng)上自行查找就可以了，但是今天我們要來推薦一款神器，就是chrome，這個大家都知道吧，但是大家知道這個也是可以生成base64圖片嗎？
在Source中找到HTTP發(fā)送請求的圖片，單擊一下，右側(cè)欄就會出現(xiàn)Base64轉(zhuǎn)碼的字符串
這個就是我們所要的找的
5、CDN加速
這個直接在七?；蛘呤怯峙脑粕献砸粋€賬號就好了，這個在這里就不討論了
6、源碼下載
http://pan.baidu.com/s/1dDLMvlf
7、參考文章
8、結(jié)尾
好了，洋洋灑灑的文章終于寫完了，在此我想做一下最后的結(jié)尾，由于本人的能力有限，也就是小菜鳥一枚，如果是有什么錯誤或者是意見的話，歡迎來騷擾。另外如果是想轉(zhuǎn)載的話，請注明出處，請尊重別人的知識，謝謝
聯(lián)系客服
