# 微金所项目实战
## 1. 搭建Bootstrap页面骨架及项目目录结构
```
├─ /weijinsuo/ ··················· 项目所在目录
└─┬─ /css/ ······················· 我们自己的CSS文件
├─ /font/ ······················ 使用到的字体文件
├─ /img/ ······················· 使用到的图片文件
├─ /js/ ························ 自己写的JS脚步
├─ /lib/ ······················· 从第三方下载回来的库【只用不改】
├─ /favicon.ico ················ 站点图标
└─ /index.html ················· 入口文件
```
### 1.1.约定编码规范
#### 1.1.1.HTML约定
-
在head中引入必要的CSS文件，优先引用第三方的CSS，方便我们自己的样式覆盖
-
在body末尾引入必要的JS文件，优先引用第三方的JS，注意JS文件之间的依赖关系，比如bootstrap.js依赖jQuery，那就应该先引用jquery.js 然后引用bootstrap.js
#### 1.1.2.CSS约定
-
除了公共级别样式，其余样式全部由 模块前缀
-
尽量使用 直接子代选择器， 少用间接子代 避免错杀
### 1.2.HTML5文档结构
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
</body>
</html>
```
### 1.3.Viewport设置
```html
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
```
> html中插入视口设置，可以通过emmet __meta:vp__ 插入
### 1.4.浏览器兼容模式
```html
<meta http-equiv="X-UA-Compatible" content="IE=edge">
```
> html中插入兼容模式设置，可以通过emmet __meta:compat__ 插入
### 1.5.favicon（站点图标）
```html
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
```
> html中插入图标链接，可以通过emmet __link:favicon__ 插入
### 1.6.引入相应的第三方文件
```html
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="my.css">
...
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="my.js"></script>
```
### 1.7.在我们默认的样式表中将默认字体设置为：
```css
body{
最低0.47元/天 解锁文章
1229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
