VScode
呵呵
H5C3
讲过了
label标签
meta 元语言
charset 字符集
新增语义化标签
-
header— 头部标签 -
nav— 导航标签 -
article— 内容标签 -
section— 块级标签扫描二维码关注公众号，回复： 12620483 查看本文章
-
aside— 侧边栏标签 -
footer— 尾部标签
新增音频标签
<body>
<!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->
<!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
<!--
因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件
-->
<audio controls>
<source src="./media/snow.mp3" type="audio/mpeg" />
</audio>
</body>
Input’s type
<form action="">
邮箱<input type="email" name="" id=""> <input type="submit" value="提交"><br /><br />
手机号码<input type="tel" name="" id=""> <input type="submit" value="提交"><br /><br />
网址<input type="url" name="" id=""> <input type="submit" value="提交"><br /><br />
数字<input type="number" name="" id=""> <input type="submit" value="提交"><br /><br />
搜索框<input type="search" name="" id=""> <input type="submit" value="提交"><br /><br />
拖动滑块<input type="range" name="" id=""> <input type="submit" value="提交"><br /><br />
时间<input type="time" name="" id=""> <input type="submit" value="提交"><br /><br />
日期<input type="date" name="" id=""> <input type="submit" value="提交"><br /><br />
日期时间<input type="datetime" name="" id=""> <input type="submit" value="提交"><br /><br />
几年几月<input type="month" name="" id=""> <input type="submit" value="提交"><br /><br />
几年几周<input type="week" name="" id=""> <input type="submit" value="提交"><br /><br />
</form>
新增特性
required 要求文本框内容不能为空
autofocus 自动聚焦属性，页面加载完成，光标自动定位到这里
autocomplete = on 记录以前的输入记录，然后进行快速输入。需要在表单内加上name属性
multiple 多选文件提交
结构性伪类选择器—nth-child(n)与nth-last-child(n)
无论计算式如何，n都从零开始计算
计算结果小于等于0，则无效，大于被使用对象的最大值，无效。
nth-last-child(n)从最后一个开始，倒着数数。
nth-child和nth-of-type 的区别
-
代码演示
<style> div :nth-child(1) { background-color: lightblue; } div :nth-child(2) { background-color: lightpink; } div span:nth-of-type(2) { background-color: lightseagreen; } div span:nth-of-type(3) { background-color: #fff; } </style> -
区别
nth-child选择父元素里面的第几个子元素，不管是第几个类型nt-of-type选择指定类型的元素
伪类选择器
结构伪类选择器
属性选择器
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用。
DOM
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准[编程接口)
阴影
可以同时写两个，中间逗号隔开
如果px只写了两个，那么代表x和y的数据，省略了模糊程度和宽度。
e.g. box-shadow: 0 1px #5670a4 inset, 0 0 10px 5px rgba(0, 0, 0, .1);
这里写了内外两个阴影，内阴影x=0，y=1，模糊和宽度都为0，相当于没有左右下，只有上边框，宽度1px；外阴影严格套在边框上没有偏移，模糊10，宽度5，透明度.3。
第三课 2D转换
1.transform
不脱标，不影响其他盒子。
transition 过渡效果。实现基础动画效果，鼠标放上去开始动。
1.1translate
transform:translate(x,y)或者分开写
transform:translataX(n);
transform:translataY(n);
如果写成transform:translataX(%50);那么移动的是盒子自身的宽度或者高度决定。
定位配合转换让盒子在盒子里垂直水平都居中。
translate(-50%,-50%);
对行内元素translate 无效。
1.2rotate
rotate(45deg);//顺时针旋转45度
案例：字体图标的小三角
实现方法：正方形边框，隐藏一半，留下来的一半就是三角形，然后旋转一定角度，实现效果。
如果要做动画，鼠标放上之后实现，那么添加
div:hover {
transform:rotate(225deg);
transition:all 0.6s ;
}
转换旋转中心点
transform-origin:(left bottm);
缩放scale
transform:scale(x,y);
x and y 没有单位。直接是倍数。
如果只有一个数字那就是xy同时变换同样倍数。
scale优势：
1不影响其他盒子
2可以设置旋转中心点。
可以用于放大缩小图片
2D旋转会改变坐标轴，所以transform综合写法要先写位移再写旋转等其他属性。
动画
1定义2调用
1用keyframes定义动画类似定义类选择器
@keyframes move { //move为动画名称
0% {//开始状态
transform:translateX(0px);
}
100% {//结束状态
transform:translateX(1000px);
}
}
2调用
2.1animation-name：move；
2.2animation-duration:15s;
opacity:0.5？？？value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
第四课 3D
第四课 3D
3D位移和3D旋转
主要知识点
1、3D位移：translate3d(x,y,z)
2、3D旋转：rotate3d(x,y,z)
3、透视：perspective
4、3D呈现：transform-style
1、3D移动translate3d(x,y,z)
比2D多一个移动方向Z，
transform:translateX(npx)；沿着x轴移动n个px；
transform:translateX(100px) translateY(100px);
综合写法。
transform:translate3d(100px,100px,100px);
3d要小写xyz不可省略。
2透视
透视写在被观察元素的父盒子上
透视越小，出来的效果越大。透视距离单位：PX， 模拟眼睛与屏幕的距离。
2、3D旋转：rotate3d(x,y,z)
左手准则判断旋转方式，是从上面向里转还是从下面向里转
4、3D呈现：transform-style
transform-style:flat 默认子元素不开启3d旋转效果。
transform-style:preserve-3d;子元素开启3d立体空间 效果。 写给父级，作用在子集上。
第五课 移动布局
视口
浏览器显示内容的屏幕区域，分为布局视口视觉视口和理想视口。
用理想视口
写入
<meta name="viewport" content = "width = device-width, user-scalable =0 initial-scale = 1.0,maximum-scale = 1.0,minium-scale = 1.0">
物理像素比
PC端口 1PX 就等于 物理上的1PX
DPR dpr 设备像素比 device pixel ratio
DP device pixel
DIP device indepent pixel 设备独立像素 即 逻辑像素
PPI pixels per inch 每英寸像素取值 即 像素密度
移动端存在物理像素比的关系
IPH8 物理像素比为2
Apple提出了单位pt（点），Android提出了单位dp（图形的单位）和sp（字体的单位）。
background-size 背景拉伸
7.13 响应式页面
content-box;传统盒子模型
border-box;c3盒子模型
-webkit-tap-heightlight-color:transprant;
去掉ios默认按钮输入框外观:
-webkit-appearance:none;
禁用长按弹出菜单：
img ,a {
-webkit-touch-callout:none;
}
移动端常见布局
1 移动端单独制作
- 流式布局（百分比布局）
- flex 弹性布局（强烈推荐）
- less+rem+媒体查询布局
- 混合布局
2 响应式
- 媒体查询
- bootstarp
流式布局：
流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
出现行内块的时候，一般会出现
vertical-aline:middle; 图片和文字居中对齐
CSS初始化
使用normalize.css
二倍精灵图
二倍图
分辨率100×100
直接给盒子赋值 width:50px; height:50px;
然后给background-size:50px 50px;
不是给图，是给放图片的盒子。
放在fw里面等比例缩放然后在放新测量数据
css3 盒子模型
原始盒子模型:
width=content ，真实宽度为： width+border+padding
boxsizing:border-box :
width=content+padding+border 真实宽度为： width
background-size 背景缩放
单位可以跟百分比，比例相对父盒子来说
可以放盒子
cover 高度和宽度等比例拉伸，要把整个盒子给盖住，图片变形不变形无所谓
contain 高度和宽度等比例拉伸，当高度或者宽度完全铺满就不再进行拉伸
特殊样式清除
1点击高亮背景清除
-webkit-tap-hightlight-color:transparent;
2移动端浏览器在ios上给按钮和输入添加自定义输入框样式
-webkit-appearance:none;
3禁用长按页面时弹出右键菜单
img,a { -webkit-touch-callout:none;}
0. 移 动 端 开 发 选 择 综 述
1 单独开发移动端页面（主流）
1.1 流式布局
1.2 flex伸缩布局
1.3 less+rem+媒体查询布局
1.4 混合布局
2 响应式页面兼容移动端（其次）
2.1 媒体查询
2.2 Bootstrap
A. 流 式 布 局/ 百分比布局
百分比布局 非固定像素布局 把盒子宽度设置为百分比 根据屏幕宽度来进行伸缩。
设定最大最小值 max-width min-width
A.1.移 动 首 页 项 目
各种居中看这里
1.父亲给了高度孩子浮动的时候就不会有清除浮动的问题了。
2.图片水平居中，给图片放一个盒子，然后盒子写 text-align:center;
3.图片垂直居中，盒子写 line-height;
4.图片如果没有和文字对齐，图片文字对齐：vertical-align:middle;
5.外边距合并：给父盒子添加overflow:hidden; 子盒添加margin-top会把父盒子带下来。
6.二倍精灵图缩放做法：“先在fireworks里面把图片等比例缩放为原来一半，然后 再去测量坐标，最后写background-size缩放整个精灵图的一半。”
7.加了固定定位的盒子要给宽度，可以给百分比。
8.子盒子写100%，就是和父盒子一样宽，如果父盒子有宽度那就和父盒子一样宽。
9.border-ridus可以按每个角来写 1px 2px 3px 4px
10.如果一个盒子里面全部都是图片然后上边出现了一个空白，像是margin，那是因为图片与文字基线对齐模式有问题，把图片的vertical-align改为:vertical-align:top; / vertical-align:middle; 即可取出空白缝隙。
11.a是行内元素，写了宽度要给转换成块级元素，但是写了浮动就不用了。
12.缩放图片，宽高写给装图片的盒子，不是给图片？待验证
13.nth-child(n)：括号中的 n从零开始计算，但是nth-child是从1开始算，遇到0自动停止。所以可以用(-n+3)这样的结构实现选择出前三个子元素。
14.
B.F l e x 布 局 / 弹性 / 伸缩 / 自适应
flex布局 与 传统布局
1.传统布局：兼容性好，布局繁琐（浮动占不占位置，要不要清除浮动等），局限性高不能很好适配移动端
2.flex弹性布局：伸缩，自适应， 操作简单布局简单，pc端支持较差ie11或更低版本不支持。
转换为flex布局，只需要在父盒子css中写上
display:flex;
没有浮动自然不需要清除浮动。
flex:1 平均分配在一行上。
任何容器都可以指定为flex布局
设置为flex布局后float clear vertical-align 失效
flex直接垂直居中了，vertical-align失效。
采用flex布局的元素称为flex容器，
子元素称为flex item flex项目。
父元素添加display:flex;
1.flex父项添加属性：
flex-direction：设置主轴方向
默认主轴x方向，默认侧轴y
写谁，谁就是主轴，元素跟着主轴来排列
row 从左到右
row-reverse 从右到左
column 以y为主轴 从上到下
column-reverse
justify-content：
定义项目在 主轴 上排列方式
justify v.证明…正确(或正当、有理); 对…作出解释; 为…辩解(或辩护); 调整 使全行排满; 使每行排齐; 使齐行;
flex-start：从头部开始
flex-end：正序排列，但是贴着尾部开始
center：沿着主轴居中对齐 ，以前需要套父盒子再父盒子maigin0auto
如果是x做主轴那就是水平居中，如果是y那就是垂直居中
space-around：平分剩余空间 around 围绕; 环绕;
space-between：首尾两个盒子先贴边,剩下的盒子再平分剩余空间
flex-wrap：
项目超出容器范围，则自动调整项目宽度，以适应容器。
flex布局中默认不换行 nowrap。
flex-wrap:wrap;
align-items
align：校准使成一线，排整齐，使一致。
item：项目 子项目
设置 侧轴 上子元素排列方式（单行）
flex-start flex-end
center 居中显示
stretch 拉伸 拉到和父盒子一样宽度或者高度
属性有：上对齐下对齐居中和拉伸
align-content
多行（有换行情况才是多行）有用，单行没用。
属性有：上对齐、下对齐、居中、拉伸、平均分配剩余空间等。
align-item适用于单行。
stretch：默认值，拉伸
center
flex-start
flex-end
space-between 前后第一个盒子紧贴边框然后剩下的平分空间
space-around 平均分
initial 默认
inherit 继承
flex-flow
属性是 flex-direction 和 flex-wrap 属性的复合属性
设置主轴和是否换行
2.flex子项属性
flex属性定义子项分配剩余空间，用flex来表示占多少份。
.item {
flex:<number>;
} //写在子盒子的属性里面
number可以是数字，1，2等。也可以是百分比如：20%。
align-self 控制子项自己在侧轴的排列方式
允许单项和其他项目不同。
order定义排列顺，数值越小，越是靠前
已经有定位的条件下，maigin:0 auto 无效
加了绝对定位直接有大小，不需要在写display：block；
::before 是行内元素没有高度。
需要转换为display:block;
B.1 小 案 例
1.加定位之后，想把盒子挪回去：
transform:translateX(-50%);
2.去除 a标签中的 文字的下划线
a {
text-decoration:none;
}
3.css3 盒子模型，高度算上了边框在内，所以内部文字想要垂直居中，line-height的值要写为：总高度减去上下边框高度的值。
5.多个相似结构但是名字不同的板块统一写样式：class ^=“local-nav-icon”
其中，类名相同部分为local-nav-icon ，不同部分为后面的 icon1，icon2.
6.父盒子给了border-ridus，但是子盒子没给，导致圆角失败，可以给父盒子添加overflow:hidden;来解决。
7.文字阴影 text-shadow ：1px 1px rgba(0,0,0,.2);
8.背景渐变色：背景渐变色
1线性2非线性
语法：background:linear-gradient(起始方向，颜色1，颜色2，。。。)；
e.g. : background:-webkit-linear-gradient(left,red,blue);
background:-webkit-linear-gradient(left top,red,blue);
9.flex可以写百分比，相对父亲的百分比。
10.text-indent 首行缩进 赋值-999 再给盒子overflow:hidden SEO 优化
C. R E M 适 配 布 局 与 L E S S
新问题：
以往方案，字体不能随着界面大小变化。
流式布局和flex布局主要针对宽度，高度如何设置？
怎样唐屏幕发生变化时候元素的高度和宽度等比例缩放？
1.rem是一个单位
root em 是一个相对单位 类似于em em是父元素字体大小，rem是相对于html元素的文字大小
2.媒体查询
Media Query css3新语法 根据不同尺寸屏幕设置不同样式。
写法：
@media mediatype and|not|only (media feature) {
css-code;
}
e.g.
@media screen and (max-width:800px){
//小于等于 800px 的可以用
body {
background-color:pink;
}
}
小技巧：F12调试模式下拖动窗口会在右上角显示当前分辨率
3.引入资源
针对不同媒体，引入不同资源 ，调用不同css样式，称为引入资源
媒体查询最好方法从小到大来写。
语法规范：
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:320px)">
font-size 可以写0.5rem。
href是Hypertext Reference的缩写。意思是指定超链接目标的URL
4.less
css弊端：
1.需要书写大量看似没有逻辑代码，冗余度太高
2.不方便维护扩展，不利于复用。
3.不能计算
4.非前端工程师，缺少经验，难以写出组织子良好易于维护的css代码
less是什么？
一门css扩展语言，也成为css预处理器。css有多种预处理器。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
新建less文件，扩展名.less。安装node.js npm-install
1.less变量
1.1 定义粉色变量
@color：pink;//@变量名:值；
body {
background-color:@color;
}
1.2 定义字体大小
@font14:14px;
body {
background-color:@color;
font-size:@font14;
}
不能数字开头,不能包含特殊字符,区分大小写.
less包含一套自定义语法和一个解析器，less编译之后能生成css文件，引入html
使用vscode插件Easy Less
easy less插件，把less文件编译为css文件
2.嵌套
less中 ，直接写嵌套。
.header {
width:100px;
a {
color:red;
}
}
a是header的后代，直接把a写在header里面。
.nav {
.logo {
}
}
3.伪类选择器
&指定样式为本身的样式，不是后代的样式。
如果不加&符号，less默认写的内容是加空格的，这样就不是子代的特性。
.nav {
&:hover {
color:blue;
}
}
生成的css为
.nav:hover{
color:blue;
}
如果有伪类、交集选择器、伪元素选择器，内层选择器前面要加&。
4.less运算
less中，任何数字颜色变量都可以参与运算，less提供四则运算
@border：5px +5；
div {
width:200px - 50;
height:200px * 2;
border:@border solid red;
}
运算符前后要加空格
如果只有一个数字有单位，则以这个单位为准。
如果有两个单位，以前面的单位为准。
补充：交集并集选择器
1、交集选择器
交集选择器就是在两个标签相交的部分，也就是交集进行修改格式。
对于交集选择器，可以与id和class共同使用。
格式：
标签1标签2
{ 属性;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>交集选择器与并集选择器</title>
<style>
p.p1 {
color: red;
}
</style>
</head>
<body>
<p>我是段落</p>
<p class="p1">我是段落</p>
<p class="p2">我是段落</p>
</body>
</html>
2、并集选择器
与交集选择器不同，并集选择器是对两个标签同时进行修改样式。
并集选择器同样可以与id和class同时使用。
格式：
标签1,标签2
{ 属性；
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>交集选择器与并集选择器</title>
<style>
h2,p{
color: red;
}
</style>
</head>
<body>
<h2>我是标题</h2>
<p>我是段落</p>
</body>
</html>
5.REM适配方案
不同页面像素不同，宽度不同，一份设计稿需要对应多个设备，那就需要自适应。不可能一个个手工修改宽度，所以需要REM统一单位，rem = font-size。统一单位之后，想要页面自动适应设备，需要媒体查询，查询完了根据不同页面大小修改对应font-size，font-size = 页面宽度 / 份数，修改了font-size就相当于修改了rem，字体大小就可以随着变动。查询完毕不同页面适配不同大小，手工一个个计算太麻烦，所以需要LESS自动计算。
html {
font-size:50px; //初始化定义html页面的font-size
}
@no:15; //no = number 表示页面被平均分的份数
@media screen and (min-width:320px) {
html {
font-size:320px / @no ;
}
}
动态标签设置font-size大小：
例如，设计稿750px，把设计稿子划分为15等分，每一份作为html字体大小，这是50px，在适配320屏幕时候，字体大小为320/15份， 就是21.33px。这样实现了文字大小的自动转换。
C.1 小 案 例（方 案 一）
如果在网页端打开，在less最上面写
html {
font-size:50px;
}
在首页的index.less中写内容的时候，把common.less导入
@import “common.css”;
导入，把一个样式文件引入另一个文件中。
盒子里有图片，图片要做成链接，选取的结构是：
.ad {
display:flex; //父盒子设定flex伸缩布局
a { //a 是子盒子，做出链接效果，只有一个a ，所以flex1
flex:1; //这样a盒子完全填充父ad盒子
img {
width:100%;
//img盒子100%填充父盒子a 实现img与ad盒子适配
}
}
}
C.2 小 案 例 （方 案 二）
使用淘宝前端团队的flexiable.js
.js称为库文件，引入方法：
<script src = "js/flexible.js"></script>//写在index.html中
使用flexible.js只需要提前设置好html文字大小
VScode插件，px转rem插件 cssrem ，不用less 自动转。
这个插件默认html文字大小 cssroot 16px，但是默认字体大小不一定，需要根据设计图来走，所以修改方法：
点击vscode下方齿轮打开设置，搜索cssroot，在右侧修改。改完之后重启vscode。即可在书写px单位时候下方出现自动转换的数值。
D.响应式布局 与 栅 格 系 统
响应式布局：根据不同屏幕大小更改布局，以前的方案只是改变比例大小，不改变布局。
Responsive Web Design ＝ RWD，Adaptive Web Design ＝ AWD
超小屏幕（手机）<768 ：设置宽度100%
小屏幕（平板）768～992 ：设置宽度750px
中等屏幕（桌面显示器）992～1200 ：设置宽度970px
宽屏 1200+：宽度设置1170px
查询媒体，手动改变页面盒子排列。
相应式开发原理：媒体查询，针对不同宽度设备改变布局和样式的设置，适配不同屏幕。
BOOTSTRAP
bootstrap来自推特，响应式布局，移动设备优先的web项目。
暂时只考虑样式库。
控制权在框架本身所以要按照框架所规定的规范进行开发
使用四步曲：
1.创建文件夹结构
2.创建html骨架结构
3.引入相关文件
4.写入内容
Bootstrap 提供了两种container，响应式布局需要一个父容器，在不同屏幕下改变容器大小。
1.container
响应式布局容器固定宽度 ，区分大中小屏幕，自动修改宽度
2.container-fluid
流式布局 百分百宽度，占据全部视口，适合单独开发移动端。
如何让网页中的图片随网页窗口的大小自动缩放
width：100%;
height:100%;
如果是背景图的话
background-size:cover
background-size: cover;
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
格栅系统
基本用法
给页面分成很多个格栅，然后不同板块对于数量的格栅，页面大小变化的时候，框架修改格栅宽高，从而修改内容宽高，实现自适应。
行（row）要放进container布局容器里面，
实现列的平均划分，要给列添加类前缀，
大于12的列会被当做一个整体另起一横行进行显示，
可以为同一个列指定多个设备类名，以划分不同份数，
每一列默认有左右15px的panding。
bootstrap 盒子排列在一行上，是通过添加浮动实现的。
占比是通过赋值给width百分比实现。
例子：
<div class ="container">
<div class = "row">
四个盒子排列在一行，大屏幕中，每个占3，共计12.
<div class = "col-lg-3">1</div>
<div class = "col-lg-3">2</div>
<div class = "col-lg-3">3</div>
<div class = "col-lg-3">4</div>
</div>
<div class = "row">
四个盒子排列在一行，中等屏幕中，每个占4，共计12.
<div class = "col-md-4">1</div>
<div class = "col-md-4">2</div>
可以复写
<div class = "col-md-4 col-sm-6">3</div>
</div>
</div>
列嵌套
不同列之间如果给margin值，一行将排列不下，可以大盒子套小盒子，大盒子给padding（相对于小盒子），从而实现大盒子之间的空隙。
列内再嵌套列：
<div class = "container">
<div class = "row">
<div class = "col-md-4"> <!--第 1 列-->
<div class = "row"> <!--列 1 内嵌套的新的行 -->
<div class = "col-md-6">
第一列里面嵌套的第1小列
</div>
<div class = "col-md-6">
第一列里面嵌套的第2小列
</div>
</div>
</div>
<div class = "col-md-4">2</div> <!--第 2 列-->
<div class = "col-md-4">3</div> <!--第 3 列-->
</div>
</div>
在列内嵌套列如果直接写，会有一个padding 所以在多加一个row这样就没有padding。
列偏移
.col-md-offset -n 向右偏移n份
相当于给右侧盒子添加外边距margin，系统自动计算。
列排序
push 和pull 都是以浏览器右侧为准
响应式工具
加快对设备友好的页面开发工作，利用媒体查询，并使用这个工具可以方便针对不同页面展示或者隐藏内容。
隐藏
.hidden-屏幕缩写，遇到那个屏幕就隐藏这个盒子，如：
.hidden-xs 超小屏幕下隐藏
注意，对应屏幕隐藏，超过和不足都不隐藏。
展示
.visible-屏幕大小;
D.1 小 项 目
技术选型
方案：响应式页面开发方案
技术：Bootstrap框架
设计图：1280px设计尺寸
需求分析
大屏与中屏一个样，直接布局一样的
小屏幕布局发生变化，为小屏幕改变布局
超小屏幕单独布局
策略：先布局md以上pc端布局。然后根据需求修改小和超小屏幕布局。
设计过程
1.修改屏幕尺寸
默认尺寸1170
修改为需求尺寸1280，采用媒体查询
@media screen and (min-width:1280) {
.container {
width:1280px;
}
}
2.设定标签 (h5新增标签)
设定为，左侧header 中间 artical 右侧aside
图片需要随着列宽自动变化，如果父盒子可以自动变化，那就给img添加属性width:100%;
清除a样式
清除li样式
清除搜索框边框样式
添加Bootstrap提供的字体图标
在参考文档中找到字体图标，复制名称，添加给目标标签类名。
Bootstrap清除浮动
框架已经写好，直接在类名中写 class = “clearfix”;
选择一种技术作为主要技术，其他技术作为辅助，混合技术开发。