第121天：移动端开发基本知识
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)
6、字体图标
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
8、按钮样式生成
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实现即可
```
