Html5+css3+angularjs+jquery+webAPi 開發手機web（一）

前言

    隨着瀏覽器的發展 HTML5+CSS3 的使用也愈來愈普遍，一直想學這個，想學那個折騰下來幾乎沒學到什麼東西。工做經驗告訴我，要掌握一門技術，就須要在項目中去磨練，

因此我就準備開發一個手機端的BBS練練手，技術更新快，也要學的快，跟的上時代，才漲的了工資。

 

技術的選擇

jQuery Mobile  Phone Gap  等都是比較成熟的框架爲何我不用這些框架呢？ 由於我考慮到底層的技術應用和練習 。

個人選擇是：Html5+css3+angularjs+jquery 

 HTML5+CSS3  負責UI佈局

 angularjs        負責數據請求與綁定 

 jquery            負責頁面動畫效果

 webApi           負責服務端數據接口

 

 

首頁佈局

如圖：

 

步驟1、 設置網頁的大小爲移動設置的大小

在head添加meta標籤name爲viewport,content參數請看圖中的解釋：

 

 

 

步驟2、 編寫HTML

頁面總共分爲頭部、主體、和底部三大塊。 HTML結構以下：

 

步驟3、樣式的編寫

 

 

（1）、  字體設置爲瀏覽器默認大小  

          html{font-size: 100%;}//字體爲瀏覽器默認大小
          body{font-size: 1.0em;} //1em等於默認字體大小（好比瀏覽器默認字體大小爲16px,1em就等於16px）

 

（2）、編寫頭部樣式

          一、爲了適應全部瀏覽器，單位都採用em或者百分比

          二、頭部左邊的可愛圖片和右邊的發貼按鈕，使用float:left和float:right 左右定位，爲了讓和中間的標題文字在一條直線上使用了 position:relative 加 top進行定位（圖片和文字通常都不在一條直線上）

header h3{background: url(/img/common/line1.png) ; background-repeat:repeat-x;height: 3em;line-height: 3em;margin: 0;padding: 0;color: white;width: 100%; text-align:center}
header h3 img{ position:relative; top:0.8em; float:left; margin-left:0.5em}
header h3 .action-write-msg { outline:none; position:relative; top:0.8em;float: right;text-align: center; height: 2.5em;color: #fff; line-height: 0.5em;font-size: .875rem;border: 1px solid #e86b0f;border-radius: 4px; padding: 0 1.5em;background-color: #ff8200; margin-right:0.5em}
header h3 .action-write-msg:hover{background-color: #e86b0f}

 

 

 

（3）、編寫主體部分樣式

   主體部體很是重要，須要保證中間能夠滾動而且底部一直在最下面

 

使用：

          position: fixed;top:4em 使主體部分一直浮動在瀏覽器頂部向下4em位置,  能夠保證懸浮了，可是高度仍是有問題

          height:calc(100% - 8em);  咱們知道頭部是4em 底部也是4em 那主體部分高度就是 100%-8em

          overflow-y:scroll  上下滾動

 

article{position: fixed; overflow-y:scroll; top:4em; width: 100%; height:calc(100% - 8em);  }
article>ul{text-align:center;}
article>ul li{  display:inline-block; background:#fff; width:40%;height:8em; border-radius:10%; margin:0.5em;line-height:2em; border:solid #fff 0.2em }
article>ul li:hover{ border:0.2em  dashed red}
article>ul li img{margin-top:1em}
article>ul li .title{ font-weight:bold;}

 

（4）、編寫底部樣式

footer a {color: #B4E0D0;text-decoration: underline;margin: 5px;}
footer a.current{ text-decoration:none; color:#fff}
footer { font-size:0.7em;background: url(/img/common/line1.png);position: absolute;height: 3.5em;line-height: 1.5em;margin: 0;padding-top:0.5em ;color: white;width: 100%;text-align: center;bottom: 0em;clear: both; background-repeat:repeat-x;}

　　

步驟4、angular綁定數據

(1)、聲名一個module

var layoutApp = angular.module('layoutApp', []);

(2)、編寫module下的controller

layoutApp.controller('headController',
 function ($scope) {
     $scope.title = "美女畫畫社區";
 });

layoutApp.controller('bodyController',
function ($scope) {
    $scope.forum = [
        { title: "畫畫交流", img: "forumicon_20.jpg" },
        { title: "臨摹素材", img: "forumicon_20.jpg" },
        { title: "臨摹素材", img: "forumicon_20.jpg" },
        { title: "臨摹素材", img: "forumicon_35.jpg" },
        { title: "臨摹素材", img: "forumicon_38.jpg" },
        { title: "臨摹素材", img: "forumicon_20.jpg" },
        { title: "臨摹素材", img: "forumicon_20.jpg" },
        { title: "臨摹素材", img: "forumicon_20.jpg" }];
})

 （3）、html綁定

 

 demo地址：

https://github.com/sunkaixuan/AutoLayout

 

。。待續