移动开发之h5学习大纲

移动开发
学习形式：
授课、自学

1、html5 css3 htm5shiv.js response.js

2、流式布局 自适应布局 盒模型 弹性盒模型 响应式布局
3、iscroll swiper bootstrap animate.css zepto.js
4、jquery mobile、jquery ui、EasyUI、amazeui、Sencha Touch 、select3、frozenui
5、echart hcharts
图表
地图

达成效果的方法有无数种。。重要的是哪种方法效果更好，更方便

标签：

1.<meta charset="utf-8">

2.属性：width:宽度 height:高度

3.背景：background

background-attachment:fixed; 背景是否滚动

　　　　background-color：gray；背景颜色

　　　　background-image：url（bg. jpg）；背景图

　　　　background-repeat：no-repeat；背景图是否重复

　　　　background-position：center，等等；背景图位置

4.边框：border

　　　　border-width：边框宽度

　　　　border-style：边框样式

　　　　border-color：边框颜色

　　　　边框样式：solid实线；dashed虚线；dotted点线（IE6不兼容）；

　　　　例：border：1px solid red;边框为1像素大实线红色边框

5.内边框：padding

　　　　padding-top：上边内边距

　　　　padding-right：右边···

　　　　padding-left：左边···

　　　　padding-bottom：下边···

　　　　注意：内边距相当于给盒子加了填充厚度，会影响盒子大小。

6.外边距：margin

　　　　margin：top，right，left，bottom；（同上，不包括注意）

/*新版弹性盒模型*/
/*display: flex;*/
/*设置主轴方向水平（左->右）*/
/*flex-direction: row;*/
/*设置主轴方向垂直（上->下）*/
/*flex-direction: column;*/
/*设置主轴元素排列方向（右->左）*/
/*flex-direction: row-reverse;*/
/*设置主轴元素排列方向（下->上）*/
/*flex-direction: column-reverse;*/
/*主轴赋予空间管理*/
/*justify-content: flex-start;*/
/*justify-content: flex-end;*/
/*justify-content: center;*/
/*justify-content: space-between;*/
/*justify-content: space-around;*/
/*侧轴赋予空间管理*/
/*align-items: flex-start;*/
/*align-items: flex-end;*/
/*align-items: center;*/
/*文字基线对其*/
/*align-items: baseline;*/


/*老版弹性盒模型*/
display: -webkit-box;
/*设置主轴方向水平*/
/*-webkit-box-orient: horizontal;*/
/*设置主轴方向垂直*/
/*-webkit-box-orient: vertical;*/
/*设置主轴方向水平（左->右）*/
/*-webkit-box-direction: normal;*/
/*设置主轴元素排列方向（右->左）*/
/*-webkit-box-direction: reverse;*/

/*-webkit-box-pack: center;
-webkit-box-pack: start;
-webkit-box-pack: end;*/
/*-webkit-box-pack: justify;*/
/*-webkit-box-align: start;
-webkit-box-align: end;
-webkit-box-align: center;*/

/*新版*/
/*flex-grow: 1;*/
/*老板*/
/*-webkit-box-flex: 1;*/