移动京东项目练习记录
-
流式布局与移动端适配的基本要求
/*流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局*/ /*视觉窗口：viewport,是移动端特有。这是一个虚拟的区域，承载网页的。 承载关系：浏览器---->viewport---->网页 */ /*适配要求： 1. 网页宽度必须和浏览器保持一致（因为只要横向不出现滚动条就好） 2. 默认显示的缩放比例和PC端保持（缩放比例为1.0时和网页上一致） 3. 不允许用户自行缩放网页（否则破坏了网页的显示方式） 满足这些要求达到了适配，国际上通用的适配方案，标准的移动端适配方案。 */ /*防止内容溢出 不出现滚动条 提供用户体验*/ box-sizing: border-box; /*手机端的浏览器大多数都是使用webkit内核，故要这么适配*/ -webkit-box-sizing: border-box; /*点击高亮效果的清除*/ tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; -
绑定事件的几个方式
-
on 只能绑定一次事件，但是可以兼容各种浏览器
-
addeventlistener 适合各种谷歌相关的浏览器，可以绑定多次事件
-
attachEvent 适合IE浏览器，可以多次绑定 但是里面事件名有on
eg:touch事件
var div=document.querySelector(".div1"); div.addEventListener("touchstart",function(){ console.log("start！") }); div.addEventListener("touchmove",function(){ console.log("start move！") }); div.addEventListener("touchend",function(){ console.log("end move！") });
-
-
关于触摸事件的补充，注意几个坐标的差异
在每一个触摸点中会记录当前触摸点的坐标 e.touches[0] 第一个触摸点
clientX clientY 基于浏览器窗口（视口）
pageX pageY 基于页面（视口）
screenX screenY 基于屏幕 -
倒计时 设置时分秒
var timeDown = function() {
var time = 2 * 60 * 60;setInterval(function() { time--;//使用定时器，自动减时间，更新时间 var h = Math.floor(time / 3600);//小时 var m = Math.floor(time % 3600 / 60);//分钟 var s = time % 60;//秒 var spans = document.querySelectorAll(" .all-time span"); spans[0].innerHTML = Math.floor(h / 10);//向下取整得到十位数 spans[1].innerHTML = Math.floor(h % 10);//取余得到个位数 spans[3].innerHTML = Math.floor(m / 10); spans[4].innerHTML = Math.floor(m % 10); spans[6].innerHTML = Math.floor(s / 10); spans[7].innerHTML = Math.floor(s % 10); }, 1000) -
两栏自适应
</head> <body> <div class="box1"> </div> <div class="box2"> 我是内容我是内容我是内容我是内容我是内容我是内容我是内容 我是内容我是内容我是内容我是内容我是内容我是内容我是内容 我是内容我是内容我是内容我是内容我是内容我是内容我是内容 我是内容我是内容我是内容我是内容我是内容我是内容我是内容 我是内容我是内容我是内容我是内容我是内容我是内容我是内容 我是内容我是内容我是内容我是内容我是内容我是内容我是内容 我是内容我是内容我是内容我是内容我是内容我是内容我是内容 我是内容我是内容我是内容我是内容我是内容我是内容我是内容 我是内容我是内容我是内容我是内容我是内容我是内容我是内容 我是内容我是内容我是内容我是内容我是内容我是内容我是内容 我是内容我是内容我是内容我是内容我是内容我是内容我是内容 我是内容我是内容我是内容我是内容我是内容我是内容我是内容 </div>.box1{ /*设置浮动和宽度*/ 100px; height: 100px; background-color: pink; float: left; } .box2{ /*可以清楚浮动，可以让自己绝对绝缘 bfc*/ /*不让其他浮动元素影响自己*/ /*不让自己的浮动去影响别的元素*/ overflow:hidden; }
-
图标的裁切提升响应面积
a{ 40px; height: 44px; padding: 12px 10px; position: absolute; top: 0; /*让背景从内容开始平铺*/ background-origin: content-box; /*没有做背景裁剪 背景图默认就是从边框显示*/ /*默认的就是 border-box 边框以外被裁剪掉 padding-box 内边距以外被裁剪掉 content-box 内容以外被裁剪掉 */ background-clip: content-box; } -
两个盒子，设置上面盒子高度之后，在设置下面盒子占据剩余高度
.jd_main{ /*占满剩余的高度*/ 100%; height: 100%; padding-top: 45px; } -
图片下间隙的处理方法
body{ /*font-size: 0px;*/ } /*img{ display: block; }*/ img{ vertical-align: middle; } -
实现一个盒子的居中，使用margin：0 auto ; 是在父容器中居中，因此要设置宽度。但是如果该盒子设置了定位，margin居中将不可用。
-
行内元素，只要设置行高和高度,使得文本水平垂直居中即可
-
关于选择器加空格问题
-
没有加空格表示同级元素
li.now -
当两个选择器之间有空格的情况下，代表的是子类选择器
.a .b{} /*代表的是a类的b子类 */ <div class="a b"></div> /*.a.b{}两个选择器之间没有空格的情况下，代表的是同时拥有两个类名的标签*/
-
-
清除浮动 (当子元素设置了float属性之后，且父元素的高度和宽度没有进行设置，而是由子元素支撑起来，则会导致父元素的高度塌陷(原本的height后来被置为0))
即子元素要浮动，则其父元素就要清除浮动，否则子元素不在里面。
清除浮动的方式:
- 在父元素内添加冗余元素clear:both;
- 在父元素中设置属性overflow:hidden||auto
- after 方法(伪元素选择器的方法)
.clearFix::before, .clearFix::after{ content: ""; display: block; visibility: hidden; height: 0; line-height: 0; clear: both; }13 . 设置精灵图公共样式，之后再为每个图标单独设置位置
[class^="icon-"],[class*=" icon-"]{ background-repeat: no-repeat; background-image: url("../images/sprites.png"); background-size: 200px 200px; } ```14 . 伪元素可以替代一些span，用于设置小图标，默认行内元素，要设置为block
15 . 一些小细节
- 设置h3不是粗体font-weight：normal
- 包含多个内容使用div，比如里面放多个span
- 背景图不需要设置位置就写center
- 设置浮动会转化为块级元素
- a中有图，设置为block，可不设置宽
- a img 设置margin居中 设置宽度 设置block消除下边距