首页 > > 网页制作 > css >

移动京东项目练习记录

2019-12-06 16:00:55来源：博客园阅读 ()

移动京东项目练习记录

流式布局与移动端适配的基本要求

    /*流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局*/
    /*视觉窗口：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{
            /*设置浮动和宽度*/
             width: 100px;
             height: 100px;
             background-color: pink;
             float: left;
         }
         .box2{
             /*可以清楚浮动，可以让自己绝对绝缘 bfc*/
                /*不让其他浮动元素影响自己*/
            /*不让自己的浮动去影响别的元素*/
             overflow:hidden;
         }

图标的裁切提升响应面积

 a{
    width: 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{
    /*占满剩余的高度*/
    width: 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 . 一些小细节