標籤：樣式 `` 自訂 介面 mic mob 檔案 知識 插入
1、HTML5文檔結構注意lang=“zh-CN”表示網頁為中文，如果是英文則為lang=“en-CN”。
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>頁面標題</title> 6 </head> 7 <body> 8 9 </body>10 </html>2、瀏覽器安全色模式
如果網頁在IE中開啟，必須用最新的引擎渲染開啟
捷徑：sublime中通過emmet meta：compat插入
1 <meta http-equiv="X-UA-Compatible" content="IE=edge">
3、favicon網站表徵圖捷徑：sublime中通過emmet link:favicon 插入
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
4、預設字型1 body{2 font-family: "Helvetica Neue", 3 Helvetica, 4 Microsoft Yahei, 5 Hiragino Sans GB, 6 WenQuanYi Micro Hei, 7 sans-serif;8 }5、柵格系統
- Bootstrap中定義了一套響應式的網格系統，
- 其使用方式就是將一個容器劃分成12列，
- 然後通過col-xx-xx的類名控制每一列的佔比
row類
- 因為每一個列預設有一個15px的左右外邊距
- row類的一個作用就是通過左右-15px屏蔽掉這個邊距
<div class="container"> <div class="row"></div></div>
col-*\*-\*類
- col-xs-[列數]：在超小螢幕下展示幾份
- col-sm-[列數]：在小螢幕下展示幾份
- col-md-[列數]：在中等螢幕下展示幾份
- col-lg-[列數]：在大螢幕下展示幾份
- __xs__ : 超小螢幕 手機 (<768px)
- __sm__ : 小螢幕 平板 (≥768px)
- __md__ : 中等螢幕 案頭顯示器 (≥992px)
- __lg__ : 大螢幕 大案頭顯示器 (≥1200px)
1 css 2 @font-face { 3 font-family: ‘itcast‘; 4 src: url(‘../font/MiFie-Web-Font.eot‘) format(‘embedded-opentype‘), url(‘../font/MiFie-Web-Font.svg‘) format(‘svg‘), url(‘../font/MiFie-Web-Font.ttf‘) format(‘truetype‘), url(‘../font/MiFie-Web-Font.woff‘) format(‘woff‘); 5 } 6 7 [class^="icon-"], 8 [class*=" icon-"] { 9 /*注意上面選取器中間的空格*/10 /*我們使用的名為itcast的字型就是上面的@font-face的方式聲明的*/11 font-family: itcast;12 font-style: normal;13 }14 15 .icon-mobilephone::before{16 content: ‘\e908‘;17 }
1 html 2 <div class="col-md-2 text-center"> 3 <a class="mobile-link" href="#"> 4 <i class="icon-mobile"></i> 5 <span>手機微金所</span> 6 <!-- 這裡使用的是bootstrap中的字型表徵圖 --> 7 <i class="glyphicon glyphicon-chevron-down"></i> 8 <img src="..." alt=""> 9 </a>10 </div>7、字型檔格式
- eot : embedded-opentype
- svg : svg
- ttf : truetype
- woff : woff
http://blog.koalite.com/bbg/
可以通過介面產生一個新的按鈕樣式
1 .btn-itcast { 2 color: #ffffff; 3 background-color: #E92322; 4 border-color: #DB3B43; 5 } 6 7 .btn-itcast:hover, 8 .btn-itcast:focus, 9 .btn-itcast:active,10 .btn-itcast.active,11 .open .dropdown-toggle.btn-itcast {12 color: #ffffff;13 background-color: #E92322;14 border-color: #DB3B43;15 }16 17 .btn-itcast:active,18 .btn-itcast.active,19 .open .dropdown-toggle.btn-itcast {20 background-image: none;21 }22 23 .btn-itcast.disabled,24 .btn-itcast[disabled],25 fieldset[disabled] .btn-itcast,26 .btn-itcast.disabled:hover,27 .btn-itcast[disabled]:hover,28 fieldset[disabled] .btn-itcast:hover,29 .btn-itcast.disabled:focus,30 .btn-itcast[disabled]:focus,31 fieldset[disabled] .btn-itcast:focus,32 .btn-itcast.disabled:active,33 .btn-itcast[disabled]:active,34 fieldset[disabled] .btn-itcast:active,35 .btn-itcast.disabled.active,36 .btn-itcast[disabled].active,37 fieldset[disabled] .btn-itcast.active {38 background-color: #E92322;39 border-color: #DB3B43;40 }41 42 .btn-itcast .badge {43 color: #E92322;44 background-color: #ffffff;45 }9、小螢幕隱藏
- __hidden-xx__ : 在某種螢幕下隱藏
- __visible-xx__ : 在某種螢幕尺寸下顯示
visible-xx-xx：最後一個xx是決定顯示時的display到底是什麼。
<div class="topbar hidden-xs hidden-sm"></div>
或者
<div class="topbar visible-md visible-lg"></div>10、Bootstrap擴充
- 通過bootstrap文檔對導航條樣式的設定發現，其實本身是有一個類似於主題的概念
- navbar-default：預設的外觀
- navbar-inverse：暗色背景的樣式
- 所以我們希望可以通過自訂一套完整的風格：
+ navbar-itcast
```css
.navbar-itcast{
...
}
...具體代碼參考navbar-default實現即可
```
第121天：移動端開發基本知識
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
