此文章只记录关于项目实战的记录
html + css
1: 品优购PC端 （仿京东电商购物）
1. 项目仓库地址
项目效果：
2. 目录结构
3. 结构分析
4. css分析
4.1： base.css 主要是重置元素样式，设置元素的与生俱来的第一次包装。
4.2： common.css 主要是设置每个网页都可能用到的公共类名，提前预设好样给类名，在html中就可以直接使用该类名，达到样式的修改
5: html页面结构分析
5.1：注意css的引入顺序，1.先base清除元素的样式影响 2.引入common公共样式(里面预先预定义好了公共样式，在html的class直接使用即可，如果有特定样式，就在单独的index.css中去完善页面的布局)
总结：传统PC端页面是相对容易，只要耐心基本都能很好完成页面样式布局。但需要 规范化开发，物以类分，有顺序的编写代码。`
2: 移动端携程 (Flex弹性布局)
以下Flex弹性布局知识，基于阮一峰的Flex教程，简化改写。只讲解最常用的几个属性，更多Flex知识请移步他的博客去学习 --> 阮一峰的博客地址
一、使用前注意事项：
1: 任何一个容器都可以指定为 Flex 布局。(如 .box {display: flex})。声明弹性布局方式去对待
2：Webkit 内核的浏览器，必须加上-webkit前缀。（如： .box {display:-webkit-flex; display:flex; }）必须给Safari浏览器先加上-webkit-flex
3：注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
二、基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
三、6个容器属性
X轴 元素排列方向：flex-direction: row默认 | row-reverse起点在右端 | column 垂直| column-reverse垂直倒序; (主轴 子项的排列方向)
Y轴 多行，是否换行：flex-wrap: nowrap不换行 | wrap换行 | wrap-reverse;换行，第一行被替换到下面 (子项排列不下的情况下，是否换行)
X轴 子元素内部对齐方式：justify-content: flex-start默认 | flex-end 起点在右端| center 左右居中| space-between左右紧贴，中间自适应 | space-around等份平分;（X轴水平对齐方式）
Y轴 单行 垂直排列方式：align-items: flex-start 靠上紧贴| flex-end 靠下紧贴| center 上下居中| baseline以每项子项中文字的基线对齐| stretch垂直占满容器，子元素会被撑大 ;（Y轴垂直对平方式）
Y轴 多行 垂直排列方式：align-content: flex-start 左上角对齐| flex-end 左下角对齐| center 上下居中对齐| space-between 上下紧贴，中间等份| space-around 上下等份平分| stretch垂直等份占满容器，子元素会被撑大;（多行子项对齐方式，单行无效）
一张图总结5个常用属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap（所以不做画图分析）
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
flex-flow 是flex-direction + flex-wrap的简写方式一句代码代替2行。
四、实际项目中的使用
上项目！
Flex弹性布局分析图
源代码分析
flex总结：通常在外层父容器，需要排列内部盒子，都会声明display:flex弹性布局， 子盒子会flex：1，占满当前的行。
每个子盒子，也可以声明flex布局，来摆放盒子内部元素，通常是通过direction设置元素方向，再通过align-items：center来设置元素上下居中。
注意：除了能设置flex：1，还能用flex：20%，百分比的方式来设置一行中的子盒子数量。flex在移动端中非常多的使用，所以需要熟练使用常用操作属性
3： 苏宁移动端（rem元素自适应布局）
字体图片等比例大小缩放
效果分析：
源代码
rem布局总结：其核心原理是通过设置html根字体，配合rem自适应特性来实现元素自适应的。需要搭配媒体查询@media screen and (min-width: 320px)到当前屏幕发生改变，来实现自适应。通常我们会设置body的最小和普通宽度，来将页面居中。
注意：每个元素就不能使用px，而是rem单位，为了方便根据750的设置稿来转换rem，需要安装cssrem插件，需要设置html的根字体大小为50.因为750的设计稿 / 50字体大小 = 15rem。
4:阿里百秀 （Bootstrap 响应式布局）
1:效果分析：
bootstrap具体的知识就不一一介绍了，大致的使用方式在画图分析中。
主要代码结构
次要的代码就不截图出来分析了
bootstrap响应式布局总结： 下载和引入bootstrap库，就可以按照他的规范开发了，但是需要配合媒体查询@media screen and (min-width:320px)来感应屏幕变化，来改变页面样式布局。
其次就是开始写的时候，需要按照开发规范，用户container包裹，row表示行，col表示等份（一行12等份）， hidden表示隐藏，visible表示显示，其次bootstrap还内置了图标、轮播图等一系列项目解决方案。
至此，H5C3告一段落了，下一节介绍关于JavaScript项目相关的分析：
