手把手教你作手機婚戀網

時間  2019-11-19
標籤 手把手 手機 婚戀 简体版
原文   原文鏈接

上一節咱們已經講過了手機網頁佈局中的一些開發經驗，與佈局的相關知識，若是不清楚的同窗但願回頭去看一下，如下的教程是基於掌握上節知識點的基礎上來的，同時也是對手機網頁製做的一個大概的講解，建議把上節的知識點理清楚以後再繼續閱讀，上節連接地址javascript

由於在程序員這個圈子中單身狗特別多，因此就突發奇想一想來寫寫一篇關於手機婚戀網的網頁佈局css

目錄html

一、閱讀讀者具有基礎前端

二、網頁佈局思想java

三、總體佈局的實現與頂部欄功能的實現jquery

四、相關頁面的排版佈局程序員

五、總體頁面優化web

六、源碼下載chrome

七、參考文章bootstrap

八、結尾

一、閱讀讀者具有基礎

一、熟練的使用HTML和CSS

二、對HTML5和CSS3有必定的瞭解，這個沒必要深刻

三、掌握JavaScript、jquery腳本語言

若是還不能具有以上基礎的讀者們建議大家仍是去網上找一下其餘的一些相關的教學貼看一看，要否則可能會跟不上下面的學習了

二、網頁佈局思想

好了，如今咱們就來開始講解一下網頁佈局，在作手機網頁以前咱們應該在腦海中有一個大體的規劃，也就是規劃一個常規的網頁須要有哪幾部分構成的

一、頭部欄

二、主題內容

三、固定底部欄

佈局實現的代碼以下：

 

<!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支持手機模式查看效果

這樣大體的佈局咱們就已經有了，接下來咱們要來討論一下在這三塊模塊中咱們應該要添加些什麼上去。

對於這三塊模塊的佈局，在如今巨大多數的網站中是固定的，可是對其實各個模塊的自定義設計倒是不盡相同，因此在本次的教程中咱們的模塊設計是

一、頭部欄中包含一個側拉的選項，一個搜索框，一個頁面切換的按鈕

二、內容部分：因爲這是一個搭建手機頁面主體框架的教程，不是一個完整的項目，因此不添加內容部分

三、底部欄：底部欄咱們爲了簡單打算放上一個按鈕

三、總體佈局的實現與頂部欄功能的實現

咱們本次講解的項目是以打造一個婚戀網結構爲題材講解的，咱們先新建一個項目其中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來獲取

四、相關頁面的排版佈局

 因爲整個項目可能會比較冗餘，這裏咱們就挑選幾個功能進行講解，其餘的功能會在後面提供源代碼供你們下載

這裏咱們挑選比較有表明性的「全國」和底部欄進行更進一步的講解，「全國」這個相信你們都會知道這個所要實現的功能是什麼，底部欄「我也戀愛」要實現的是至關於註冊的功能，其餘的細節以下：

「全國」：跳轉到相應頁，相應頁中有，省份、城市等信息，底部有肯定和取消按鈕，右上角有一個紅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();
    });
})

 

好了，寫到這裏也有點累了，畢竟這篇文章寫了快一個星期，這裏寫這篇文章其實也就是起到拋磚引玉的做用，具體的其餘功能也就很少說了，相信若是你們能作到這樣的爲所欲爲的根據要求來實現效果，那麼網頁佈局也沒有什麼難的，接下來咱們就來談一談優化問題，相關的代碼問題就到此爲止了

五、總體頁面優化 

 上面咱們已經咱們已經基本上完成了網頁基本的框架，其餘的詳細內容就不作補充了，可是在這裏咱們還要對網頁進行性能上的優化

一、對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也是能夠進行代碼壓縮的，可是這兩個通常不推薦你們壓縮由於這兩個涉及的是頁面的效果可能會常常性的發生修改，因此壓縮會對之後形成麻煩

二、懶加載

這個概念不知道你們聽過沒有，不清楚的請自行去百度一下，懶加載最重要的一個好處是在網頁中存在大量的數據、圖片的時候能夠加快網頁框架的加載時間，而那些圖片則是在你所須要顯示的時候纔會顯示，懶加載咱們通常是使用jquery.lazyload.js插件來進行實現的

三、減小頁面的HTTP請求

在頁面加載的時候，網頁的HTML、CSS、JavaScript、圖片等其餘的內容都會各自建立各自的HTTP請求，因此當頁面的圖片內容過多的時候建立的HTTP請求也會不少，因此咱們要可使用Gulp工具來生成CSS精靈圖

四、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轉碼的字符串

這個就是咱們所要的找的

五、CDN加速

這個直接在七牛或者是又拍雲上註冊一個帳號就行了，這個在這裏就不討論了

六、源碼下載

http://pan.baidu.com/s/1dDLMvlf

七、參考文章

  網頁性能優化

 【前端攻略】：玩轉圖片Base64編碼

 八、結尾

好了，洋洋灑灑的文章終於寫完了，在此我想作一下最後的結尾，因爲本人的能力有限，也就是小菜鳥一枚，若是是有什麼錯誤或者是意見的話，歡迎來騷擾。另外若是是想轉載的話，請註明出處，請尊重別人的知識，謝謝

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程