jDapp项目收获

项目开发：

• 新建文件夹：index.html，css,js,images；项目尽量使用英文目录
• css文件夹至少一个base.css：reset+common，还有一个index.css
• 移动端开发：

• html中head中要加关于viewport的设置，+主要引入的css,js文件骨架搭好
• Pc端是固定像素容器居中，在移动端，有最大最小宽度限制

• index.css，一般都会有一个版心容器，居中
• 通栏：和整版的宽度一致，但面积不到半个版。
• 切图，雪碧图：减少网络请求次数。

一般图标都会做一个0.5倍的压缩

• 轮播图：列表形式，

CSS

• reset.css：

• list-style:列表前的标点样式去除
• text-decoration：none,消除超链接下默认的下划线

• 选择器问题：

• div p:指div内部的p
• div,p:指所有div和p

• 定位position属性：

• fixed固定定位的默认会基于原来的容器定位，宽度基准是浏览器宽度
• 将插入的图片放置到合适的位置：position:absolute;top和left具体px值。
• 绝对定位元素的位置是相对于距离它最近的已定位的祖先元素决定；

• 浮动不显示效果的问题：

• span,a非块级元素，要设置为display:block才可以应用
• 或者不用浮动，设置父级元素position：relative；再设置left：0；或right：0；

• margin:0 auto上下为0，左右居中

• x:设置全部；（上右下左）
• x,y：上下x，左右y
• x,y,z:上x，左右y,下z

• 移动端特有：
  box-sizing:border-box，从边框开始计算宽度；
  top-highlight-color:transparent,点击高亮消除
• width,用px为单位，传统布局；用100%，是自适应流式布局，自适应布局由width:100%,max(min)-width,margin:0 auto实现。
  width的百分比是基于父容器的内容来计算的。
• input,textarea默认有边框，border:none;outline:none,去除边框；background-color:rgba(0,0,0,0)透明背景；resize:none,不能改变大小
• 双飞翼布局：左右两侧固定，中间自适应

• 左右两侧固定通过父级元素定位position:relative，本身定位absolute,且左left:0;右right:0，实现。再进一步设置各自的宽度和高度
• 实现双飞翼布局中间的自适应：百分比

• form标签：为用户输入创建表单，里面包含input,textarea等。
• 像登录信息的文字要设置居中text-align:center
• line-height,font-size

• 行高（行间距）：line-height,指文本基线之间的距离，基线指英文字母
• font-size:指同一行顶线和底线之间的距离
• 行距：上行底线和下行顶线之间的距离

• 搜索框的自适应：width:100%,然后留出左右侧固定的位置，input是form内容的部分设置左右padding；搜索框里的图标，设置input的padding留住图标位置
• border-radius:为元素添加圆角边框
  border属性：设置边框
• class^=’’,以…开头，class*=’’,包含…
• transform属性：元素2D或3D转换，允许元素进行旋转，缩放，平移或倾斜。
• z-index属性：设置元素的堆叠顺序，只能在定位元素上使用
• left:百分比的形式也可以进行布局排布，比如一行4个，25%，再float。
• border-shadow属性：给元素添加阴影。
• rgba(x,y,z,o)：考虑改变背景透明度，用rgba格式表示背景颜色。兼容性问题：
  .cssbackgroung:rgba(0,0,0,07); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);

JS

移动端不常用jQuery,体积大，大量兼容

• 获取指定元素

• document.querySelector()：返回文档中匹配指定css选择器的第一个元素。

• Chrome控制台报错：unexpected end of input
  一般是符号{}，“”，[],未终止导致。
• 获取当前页面的滚动距离：document.body.scrollTop;
• touch事件：移动端特有事件。

• touchstart:手指刚触摸到屏幕所触发的事件
• touchmove
• touchend

对应页面上触摸点的集合

• changedTouches:当前页面最新改变的触摸点集合
• TargetTouches:当前元素上触摸点的集合
• Touches：记录当前页面上所有触摸点的集合。

• 监听事件：

• on,绑定会覆盖
• addEventListener(‘event’,function)
  使用的时候注意语法格式：elenment.addEventListener();

• js代码调试：控制台console打印一行一行调试