移动开发
学习形式:
授课、自学
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.属性:宽度 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;*/