PC網站CSS分享

這裏想總結些編寫網頁的經驗，以PC端的爲主，前面總結事後臺的，今天寫些前臺的，參考了bootstrap3.3.5、bootstrip2.3.2和模版matrix。

前段時間還寫過一篇《前端基礎學習分享》，比較基礎的文章。

每次寫CSS，總感受不用寫那麼多CSS，可是精簡的時候， 又難如下手。越寫越以爲代碼愈來愈多，愈來愈亂，因此此次我打算整理出一套比較靈活的結構，供之後使用。

CSS應該也能夠像其餘那些語言寫的有層次，有結構。

1、規劃

1）在拿到psd效果圖後，我會將全部的效果圖看一遍，而後開始打草稿，在紙上畫，在PS中標註均可以。通常都是作個大概的統計，太詳細不太現實，既費時間也費精力。

2）網站的瀏覽器兼容性要顧及到哪些，IE6，IE7仍是IE8以上等，點擊查看瀏覽器分佈狀況。寫CSS的時候還得照顧下低版本的瀏覽器。

3）頁面中的字體大小有幾種；顏色有幾種；超連接的:visit，:hover，:visit樣式有幾種

4）網站中有多少個小圖標，是否能夠用現有的字體庫替代小圖片

5）網站中是否用到了表格table，有哪幾種表格款式，可否作出抽象

6）有幾種按鈕款式，扁平的、3D的仍是啥樣的

7）寫些通用點的寬度與位移類，要能與其餘地方配合，例如表單，文本等

8）表單中是橫排的仍是豎排的；輸入框是怎麼樣的；下拉框單選框多選框又是啥樣的，有些高逼格的網站沒法忍受下拉框等的默認樣式，那就得美化；顏色有幾種

9）須要哪些輔助類，好比情境背景色等

10）網站能夠抽象出許多可複用的組建，例如分頁、錯誤頁面等

11）CSS也能夠有面向對象的思惟，將通用的結構抽象出來，作成一個基類。

12）開發的時候將CSS手冊打開，一些周邊的在線網站準備好，例如CSS參考手冊，webkit css library - 屬性速查，CSS3樣式生成器等。

 

2、低版本瀏覽器支持

以IE六、IE7爲表明的一些低版本的瀏覽器不少CSS三、HTML5都不支持，有些僞類也不支持，例如:before等。這個時候就要作些兼容的操做。

一、modernizr.js

　　Modernizr 是一個用來檢測瀏覽器功能支持狀況的 JavaScript 庫。 目前，經過檢驗瀏覽器對一系列測試的處理狀況，Modernizr 能夠檢測18項 CSS3 功能以及40多項關於HTML5 的功能。可自定義腳本下載。使用了這個插件後，在html標籤中會顯示class，以下圖所示，若是不支持某個CSS3，就會以「no-」開頭。這樣作的 話，就能優雅降級，在不支持這種樣式的時候，換成另一種樣式。

 

二、respond.js

　　Respond.js是一個快速、輕量的 polyfill，用於爲 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實現響應式網頁設計。

 

3、基本的CSS設置

一、CSS的reset

從新默認樣式，這個確定有必要。參考了HTML5 Boilerplate。模版裏的CSS註釋是洋文的，本身翻譯了一些。

/** * HTML5標籤 在IE 8 / 9沒有定義。 * 在IE 10/11 Firefox 中沒有定義`details` or `summary` * 在IE 11中沒有定義main */ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary { display: block; } figure,menu{ margin:0; padding:0; } ul,ol{ padding:0; list-style-type:none; } h1,h2,h3,h4,h5,h6,p,ul,ol,form,dl,dt,dd,li{ margin:0; } .......

 

二、CSS的通用樣式

1）左浮動，有浮動，清浮動；左對齊，右對齊，居中；字體粗細，加粗，斜體，普通等；宋體、雅黑字體等

2）position定位，相對定位，絕對定位等；display屬性，block、inline、inline-block等

3）overflow屬性，有hidden、scrolldeng；zoom屬性；cursor屬性；text-decoration屬性

4）margin的四個方向；padding的四個方向

.l{float:left;}.r{float:right;}.cb{clear:both;} .n{font-weight:normal; font-style:normal;}.b{font-weight:bold;}.i{font-style:italic;} .fa{font-family:Arial;}.fg{font-family:Georgia;}.ft{font-family:Tahoma;}.fl{font-family:Lucida Console;}.fs{font-family:'宋體';}.fw{font-family:'微軟雅黑';}.fe{font-family:'serif';} .tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;} .rel{position:relative;}.abs{position:absolute;}.fixed{position:fixed;} .db{display:block;}.dib{-moz-inline-stack:inline-block; display:inline-block;}.di{display:inline;}.dn{display:none;} .ovh{overflow:hidden;}.ovs{overflow:scroll;}.vh{visibility:hidden;}.vv{visibility:visible;} .z{_zoom:1;}.zoom1{*zoom:1;} .mt5{margin-top: 5px;}.mt10{margin-top: 10px;}.mt15{margin-top: 15px;}.mt20{margin-top: 20px;} .mr5{margin-right: 5px;}.mr10{margin-right: 10px;}.mr15{margin-right: 15px;}.mr20{margin-right: 20px;} .mb5{margin-bottom: 5px;}.mb10{margin-bottom: 10px;}.mb15{margin-bottom: 15px;}.mb20{margin-bottom: 20px;} .ml5{margin-left: 5px;}.ml10{margin-left: 10px;}.ml15{margin-left: 15px;}.ml20{margin-left: 20px;} .pt5{padding-top: 5px;}.pt10{padding-top: 10px;}.pt15{padding-top: 15px;}.pt20{padding-top: 20px;} .pr5{padding-right: 5px;}.pr10{padding-right: 10px;}.pr15{padding-right: 15px;}.pr20{padding-right: 20px;} .pb5{padding-bottom: 5px;}.pb10{padding-bottom: 10px;}.pb15{padding-bottom: 15px;}.pb20{padding-bottom: 20px;} .pl5{padding-left: 5px;}.pl10{padding-left: 10px;}.pl15{padding-left: 15px;}.pl20{padding-left: 20px;} .cursor-pointer{cursor:pointer;} .line-del{text-decoration:line-through;}

 

三、工具樣式

1）清除浮動　　2）強制換行　　

3）兩邊對齊等樣式　　4）單選框複選框文字對齊　　

5）截斷文本，多出的文字顯示...　　6）小三角顯示

.input_align{vertical-align:-3px;}/*單選框複選框文字對齊*/ .interception{white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}/*多出的顯示...*/ .br{word-wrap:break-word;word-break:break-all}/*強制換行*/ .same_height{margin-bottom:-3000px; padding-bottom:3000px}/*兩邊齊平*/ .fix{*zoom:1;} .fix:after,.fix:before{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}/*清浮動*/ .min_fix{overflow:hidden;_zoom:1} /** * 小三角 * 純色的就用一個，若是不是純色的就用兩個重疊再絕對定位 */ span[class^="triangle-"]{ content: ''; height: 0; width: 0; position: absolute; pointer-events: none; } .triangle-top{ border: solid transparent; border-width: 10px;/*寬度自定義*/ border-top-color: #821134;/*四個方向 須要顯示那個位置的就設置*/ }

 

四、視網膜屏幕（Retina）

如今的手機，或蘋果電腦等，屏幕都是Retina屏的，高清分辨率，就要作單獨處理了。下面的屬性參考了bootstrap。

@media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) { .css{ /*background-image: url(img_2x.png);*/ } }

 

五、移動端CSS

這裏簡單的介紹下移動端的開發。在這篇《移動web資源整理》的文章中有更多詳細的說明，我裏面的代碼也是參照這篇文章修改的。

<!-- 頁面自動調整到設備寬度，並禁止用戶縮放頁面--> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <!-- 忽略將頁面中的數字識別爲電話號碼 --> <meta name="format-detection" content="telephone=no"> <!-- 忽略Android平臺中對郵箱地址的識別 --> <meta name="format-detection" content="email=no"> <!-- 當網站添加到主屏幕快速啓動方式，可隱藏地址欄，僅針對ios的safari ios7.0版本之後，safari上已看不到效果 --> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 將網站添加到主屏幕快速啓動方式，僅針對ios的safari頂端狀態條的樣式 --> <!-- 可選default、black、black-translucent --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 去除winphone系統中a、input標籤被點擊時產生的半透明灰色背景 --> <meta name="msapplication-tap-highlight" content="no"> <!-- iOS 設備的桌面圖標 --> <link rel="apple-touch-icon" href="apple-touch-icon.png">

 

4、字體ICON

一、自定義字體

1）之前的icon基本都是用圖片sprite技術，如今有了自定義字體，在高版本的瀏覽器中能夠替代圖片了。這裏我選用了Font-Awesome，有400多個圖標能夠選擇。

2）下載後，稍微修改下那個CSS。第二個樣式使用了屬性選擇符，這樣的話只要是「fa-」開頭的就是會顯示字體。

3）能夠直接引用字體庫的CSS，也能夠按需引用，寫到本身的CSS文檔中。

4）這裏順便介紹下Simple Icons，收集衆多網站的Logo，並提供高質量、不一樣尺寸的png格式圖片給廣大網友。裏面是圖片，不是字體。

@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.3.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } .fa, i[class^="fa-"]{ display: inline-block; font: normal normal normal 14px/1 FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); }

 

二、h1--h6標籤

這裏參考了bootstrap中對這幾個標籤的重置，設置標題、副標題等能夠用到，否則總是用p標籤加字體大小，頁面中的標籤就太不豐富啦。

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } h1 small,h2 small,h3 small,h4 small,h5 small,h6 small, .h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small, h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small, .h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small { font-weight: normal; line-height: 1; color: #777; } h1,.h1,h2,.h2,h3,.h3 { margin-top: 20px; margin-bottom: 10px; } h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small, h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small { font-size: 65%; } h4,.h4,h5,.h5,h6,.h6 { margin-top: 10px; margin-bottom: 10px; } h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small, h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small { font-size: 75%; } h1,.h1 {font-size: 36px;} h2,.h2 {font-size: 30px;} h3,.h3 {font-size: 24px;} h4,.h4 {font-size: 18px;} h5,.h5 {font-size: 14px;} h6,.h6 {font-size: 12px;}

 

5、表格

網站中或多或少會用到些表格結構，關於表格的一些屬性，我在文章《關於table的一些記錄》中作過記錄。

實際應用中的表格是多種多樣的，毫不是bootstrip模版中的幾個樣式所能擺平的，但模版中的思路能夠借鑑，將樣式抽象出來作到複用。

在CSS中單獨開闢一段專門給表格的樣式區域。

一、加.table樣式

1）表格內的單元格是居中，居左仍是居右可根據實際狀況來定。

2）準備了三個對齊類.tr、.tc和.tl

 

二、條紋狀網格.table-striped

1）這裏是依賴:nth-child CSS 選擇器實現的，這樣就會有兼容性的問題，IE8瀏覽器及如下的都不支持

2）但能夠寫的普通點，就是在偶數或單數的tr上面單獨加樣式

 

三、帶邊框的表格.table-bordered

1）就是給td、th加上border屬性。

2）注意標題下面的border是2像素，這些均可以找到相應的代碼自定義。

 

四、鼠標懸停.table-hover

1）就是給tr加個:hover

 

五、顏色狀態

1）有時候要給標題欄或內容欄給定不一樣的顏色，這裏作了幾個示例顏色

2）實際狀況可能就是幾種徹底不一樣的顏色

 

1）根據實際狀況能夠組合運用

2）也能夠自定義本身實際項目中的樣式，組合也行，單獨使用也行

 

6、按鈕

1）這裏仍是參照bootstrip的按鈕作demo。

2）若是模版中沒有合適的，能夠點擊Buttons網站，一個開源的按鈕CSS樣式庫，款式衆多，也可自定義，總有一款適合你吧。

3）有三種標籤能夠作成按鈕，<a>、<button>和<input>

 

一、普通樣式按鈕

1）如上圖所示，咱們常見到的

2）抽象出一個通用類.btn，而後根據顏色不一樣再編寫不用的類.btn-default、.btn-success等，還有一個disabled，不可點擊時候的樣式。

3）將大小類也獨立出來，.btn-lg、.btn-sm等

4）根據實際狀況也能夠作這三次的抽象，實際的按鈕確定與這裏的不同

5）CSS代碼僅僅是部分的，將抽象基類展現了出來

<div> <a href="#" class="btn btn-default btn-lg">按鈕</a> <button class="btn btn-default btn-sm">按鈕</button> <input type="button" class="btn btn-default btn-xs" value="按鈕"/> <a href="#" class="btn btn-primary">按鈕</a> <button class="btn btn-primary">按鈕</button> <input type="button" class="btn btn-primary" value="按鈕"/> <button class="btn btn-primary" disabled="disabled">按鈕</button> </div>

 

二、超連接式按鈕

1）像個超連接同樣，如上圖的最後一個按鈕，只要加個.btn-link樣式便可。

2）這裏也能夠將超連接樣式給抽象出來，將大小、顏色分出來

3）獨特的超連接能夠單獨寫樣式

<button class="btn btn-link">按鈕</button>

 

三、塊級按鈕

將按鈕寬度變爲100%，有時候會有所須要，以下圖所示的就要比剛剛的按鈕寬不少。

<button class="btn btn-primary btn-block">塊級按鈕</button>

 

7、柵格

這裏把bootstrip2.3.2中的流佈局.row-fluid等搬了過來。

 

一、流式柵格佈局

1）span1--span12，有12種選項，默認會margin-left:2%左右

2）offset1--offset12，也有12種選項，表明向左便宜的量

3）margin-left與width，都用到了小數點後14位。

4）show-grid這個類僅僅是展現用的，我就寫在了頁面上面，沒有寫在style.css文件中

<div> <div class="row-fluid show-grid"> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> </div> <div class="row-fluid show-grid"> <div class="span4">4</div> <div class="span4">4</div> <div class="span4">4</div> </div> <div class="row-fluid show-grid"> <div class="span4">4</div> <div class="span8">8</div> </div> <div class="row-fluid show-grid"> <div class="span6">6</div> <div class="span6">6</div> </div> <div class="row-fluid show-grid"> <div class="span12">12</div> </div> </div>

 

2）默認柵格佈局

1）流是用百分比計算，這裏的話是直接用像素計算

2）span也有12種，詳細信息可查看CSS。範圍在100px---940px。

3）offset也有12種。範圍在100px---980px。

 

8、表單

這裏參考了bootstrip2.3.2和bootstrip3.3.5中的表單佈局。

 

一、輸入框樣式

1）默認高度是20px，line-height也是20px，加了CSS3的圓角

2）當:focus的時候，邊框顏色會改變，並加了CSS3的陰影效果

3）disabled，readonly的效果稍有不一樣

4）有些輸入框旁邊須要小圖標，左邊或右邊，這裏我就不列出來了，bootstrip中有說明

5）可將輸入框的height，line-height，padding等抽象出來，運用到不一樣場景

<fieldset class="form-group"> <input type="text" placeholder="第一個輸入框" class="form-control mb5"/> <input type="text" placeholder="第一個輸入框" class="form-control input-sm mb5"/> <input type="text" placeholder="第一個輸入框" class="form-control mb5" disabled="disabled"/> <input type="text" placeholder="第一個輸入框" class="form-control mb5" readonly="readonly"/> </fieldset>

 

二、多選框與單選框

1）一樣也有disabled樣式

2）第一種是堆疊在一塊兒的狀況

3）第二種是內聯的樣式

<fieldset class="form-group"> <div class="checkbox"><label><input type="checkbox">獨佔一行</label></div> <div class="checkbox"><label><input type="checkbox" disabled="disabled">獨佔一行 不能點擊</label></div> <div class="radio"><label><input type="radio">獨佔一行</label></div> <div class="radio"><label><input type="radio" disabled="disabled">獨佔一行 不能點擊</label></div> </fieldset> <fieldset class="form-group"> <div> <label class="checkbox-inline"><input type="checkbox">內聯一</label> <label class="checkbox-inline"><input type="checkbox">內聯二</label> </div> <div> <label class="radio-inline"><input type="radio">內聯一</label> <label class="radio-inline"><input type="radio">內聯二</label> </div> </fieldset>

 

三、下拉框

1）默認高度是34px

2）IE七、IE6低版本瀏覽器是不受CSS影響的

3）若是還想好看點的話，能夠用插件select2，他還提供了額外的功能。

<select class="form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select>

 

四、靜態控件

1）常常是在查看頁面，直接將文字輸出

2）使用了form-control-static類

3）注意這裏用到了上面的流佈局，我是在fieldset的父級加上了row-fluid的類。

<fieldset class="form-group"> <label class="control-label">Email</label> <div class="controls"> <p class="form-control-static span6">email@example.com</p> </div> </fieldset>

 

五、堆疊佈局

control-label-block，label標籤上面加上這個類便可。

<fieldset class="form-group"> <label class="control-label-block">Name</label> <div class="controls"> <input type="text" class="form-control span6"/> </div> </fieldset>

 

六、內聯佈局

1）注意下面的span3，這裏沒有用流佈局row-fluid，而是直接引用，這個時候不是百分比，而是寫死的px值。

2）fieldset外面套的是form-inline。

<div class="form-inline"> <fieldset class="form-group"> <label class="control-label">Name</label> <div class="controls"> <input type="text" class="form-control span3"/> </div> </fieldset> <fieldset class="form-group"> <label class="control-label">Email</label> <div class="controls"> <input type="text" class="form-control"/> </div> </fieldset> <fieldset class="form-group"> <button class="btn btn-primary">搜索</button> </fieldset> </div>

 

七、水平佈局

1）標題label，默認是沒有設置寬度的，能夠添加span1或者其餘設置寬度

2）按鈕能夠設置offset1或者其餘，來設置偏移

3）加入form-horizontal類和row-fluid類

<div class="form-horizontal row-fluid"> <fieldset class="form-group"> <label class="control-label span2">Name</label> <div class="controls"> <input type="text" class="form-control span6"/> </div> </fieldset> <fieldset class="form-group"> <label class="control-label span2">Email</label> <div class="controls"> <input type="text" class="form-control span6"/> </div> </fieldset> <fieldset class="form-group"> <button class="btn btn-primary offset2">搜索</button> </fieldset> </div>

 

八、校驗狀態

1）表單免不了要作驗證，而驗證的時候就須要醒目的顏色提示

2）默認給了三種顏色類.has-error、.has-warning和.has-success

 

9、輔助類

一、情境背景顏色

經過顏色來展現意圖，當你表單驗證的時候，能夠用下面的樣式展現提示信息。

 

10、組建

一、分頁

1）分頁有四種狀況，默認的、當前頁、不可點擊的和移過去變色

2）分頁能夠經過URL來分，也能夠經過ajax來分，用ajax的話代碼會複雜一些

3）下面是個簡單的分頁結構，有上一頁，下一頁，中間頁面，還能夠有總記錄數，總頁數，最後一頁，第一頁，跳轉到第幾頁等

4）分頁也能夠在樣式不變的基礎上，作不一樣尺寸

<nav> <ul class="pagination"> <li class="disabled"><span>&laquo;</span></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">&raquo;</a></li> </ul> </nav>

 

二、錯誤頁面

1）例如404錯誤呀，查詢信息但返回的是空頁面。這些根據實際不一樣，都會特別的設計。

2）這裏作個簡單的demo。demo比較樸素，沒有圖標，只有句簡單的話

<div class="no-list"> <h4>暫無數據</h4> </div>

 

點擊查看在線demo

 

demo下載：

http://download.csdn.net/detail/loneleaf1/8961803