移動京東項目練習記錄 1. 流式佈局與移動端適配的基本要求 2. 綁定事件的幾個方式 on 只能綁定一次事件，但是可以相容各種瀏覽器 addeventlistener 適合各種谷歌相關的瀏覽器，可以綁定多次事件 attachEvent 適合IE瀏覽器，可以多次綁定 但是裡面事件名有on eg:tou ...
移動京東項目練習記錄
流式佈局與移動端適配的基本要求
/*流式佈局：就是百分比佈局，非固定像素，內容向兩側填充，理解成流動的佈局，稱為流式佈局*/ /*視覺視窗：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 . 一些小細節
- 設置h3不是粗體font-weight：normal
- 包含多個內容使用div，比如裡面放多個span
- 背景圖不需要設置位置就寫center
- 設置浮動會轉化為塊級元素
- a中有圖，設置為block，可不設置寬
- a img 設置margin居中 設置寬度 設置block消除下邊距
