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实现即可
```