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