24Web前端架構

時間 2019-11-29

標籤 24web web 前端架構欄目 HTML 简体版

原文原文鏈接

近來都是接觸前端。因此學多點這方面的東西，雖然說有實戰到項目裏面去了，但可能還沒走到所謂正確的道路上去。歡迎交流。css

轉載請說明來着：http://blog.csdn.net/wowkkhtml

---------------------------------------------------------------------------------------------前端

假設Web前端作多了一點。那就會意識到，無論項目大小，都得考慮到一個「架構」的問題。後端

因爲僅僅要是項目。就會涉及到「管理」。假設不規範，就確定會亂。假設涉及到團隊協做。狀況就會更加糟糕。瀏覽器

假設沒有架構的觀念，你們都把css、js都寫在html裏，並且css想怎麼寫就怎麼寫，js接口想怎麼放就怎麼放，不只像垃圾堆同樣讓人噁心，維護起來也是個噩夢。獲取就是直接清空又一次堆放垃圾？前端框架

這裏所談的架構。並不是什麼偉大的東西。也沒名字，僅僅是關乎前端質量。像後端的「三層架構」同樣，可以走遍大部分管理系統。架構

PS：本文思想主要學自《編寫高質量代碼--Web前端開發修煉之道》，因爲所作項目必須保密。因此演示代碼會比較少。具體內容得去這本書中學習。框架

眼下個人作法有如下幾步：函數

一：保證文檔流清晰

當肯定好頁面各模塊（版面）後，不經過不論什麼css代碼修飾，用Div標籤把佈局代碼寫好出來。打開頁面。能看懂個模塊的組織邏輯就可以進入下一步。佈局

二：引入bass.css文件

bass.css爲基礎樣式文件。引入這個文件。可以清除瀏覽器帶來的默認樣式，比方直接放個div在頁面，它和body是有個間距在那的，對於新手來講，清除這個邊距都有得受的。還有就是解決有時有些不是很是好理解的瀏覽器差別。

它的主要特性就是：「通用性」和「原子性」，可以引用到不論什麼頁面中，並且每個css類都不可再分。比方 .fl{float:left;display:inline;} 出現浮動效果，並且解決IE6的雙外邊距BUG。

經過組合使用bass.css裏面的類來裝修html頁面元素。

比方class="bc w200"表示元素寬度200px & 居中。

如下是一個bass.css文件代碼。可以經過需要本身新增代碼進去（好像代碼大部分來自 http://developer.yahoo.com/yui 雅虎的前端框架，比較成熟的代碼）

@charset "utf-8";
/* CSS Document */
/*CSS reset*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}

/*文字排版*/
.fontf{font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微軟雅黑", Heiti, "黑體",SimSun, "宋體", STXihei, "華文細黑",  sans-serif;}

.f12{font-size:12px;}

.fb{font-weight:bold}
.fn{font-weight:normal;}
.t2{text-indent:2em;}
.lh150{line-height:150%;}
.lh180{line-height:180%;}
.lh200{line-height:200%;}
.unl{text-decoration:underlline;}
.no_unl{text-decoration:none;}

/*定位*/
.m0a{margin: 0 auto;}
.tl{text-align:left;}
.tc{text-align:center;}
.tr{text-align:right;}
.bc{margin-left:0;margin-right:0;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.cb{clear:both;}
.cl{clear:left;}
.cr{clear:rigth;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.vm{verticle-align:middle;}
.pr{position:relative;}
.pa{position:absolute;}
.abs-right{position:absolute;right:0}
.zoom{zoom:1;}
.hidden{visiility:hidden;}
.none{display:none;}

/*寬度*/
.w10{width:10px;}

.w14p{width:14%}

/*高度*/
.h50{height:50px;}

.h10p{height:10%}


/*邊距*/
.m10{margin:10px;}

/*上邊距*/
.mt0{margin-top:0px;}
.mt25{margin-top:25px;}

.mt2p{margin-top:2%;}

/*下邊距*/
.mb0{margin-bottom:0px;}
.mb5{margin-bottom:5px;}

.b9p{bottom:9%;}
/*左邊距*/
.ml0{margin-left:0px;}
.ml20{margin-left:20px;}

.ml1p{margin-left:1%;}

/*右邊距*/
.mr5{margin-right:5px;}

.p10{padding:10px;}

.pt5{padding-top:5px;}

.pb5{padding-bottom:5px;}

.pl5{padding-left:5px;}

.pr5{padding-right:5px;}