移動京東項目練習記錄

時間 2019-12-09

標籤移動京東項目練習記錄欄目無線简体版

原文原文鏈接

移動京東項目練習記錄

流式佈局與移動端適配的基本要求javascript

/*流式佈局：就是百分比佈局，非固定像素，內容向兩側填充，理解成流動的佈局，稱爲流式佈局*/
    /*視覺窗口：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;

綁定事件的幾個方式css

on 只能綁定一次事件，可是能夠兼容各類瀏覽器html
addeventlistener 適合各類谷歌相關的瀏覽器，能夠綁定屢次事件java

attachEvent 適合IE瀏覽器，能夠屢次綁定可是裏面事件名有onweb

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 基於屏幕url

倒計時設置時分秒spa

var timeDown = function() {
var time = 2 * 60 * 60;code

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 . 一些小細節

設置h3不是粗體font-weight：normal
包含多個內容使用div，好比裏面放多個span
背景圖不須要設置位置就寫center
設置浮動會轉化爲塊級元素
a中有圖，設置爲block，可不設置寬
a img 設置margin居中設置寬度設置block消除下邊距

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。