移動京東專案練習記錄
-
流式布局與移動端適配的基本要求
/*流式布局：就是百分比布局，非固定像素，內容向兩側填充，理解成流動的布局，稱為流式布局*/ /*視覺視窗：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 > </div> <div > 我是內容我是內容我是內容我是內容我是內容我是內容我是內容 我是內容我是內容我是內容我是內容我是內容我是內容我是內容 我是內容我是內容我是內容我是內容我是內容我是內容我是內容 我是內容我是內容我是內容我是內容我是內容我是內容我是內容 我是內容我是內容我是內容我是內容我是內容我是內容我是內容 我是內容我是內容我是內容我是內容我是內容我是內容我是內容 我是內容我是內容我是內容我是內容我是內容我是內容我是內容 我是內容我是內容我是內容我是內容我是內容我是內容我是內容 我是內容我是內容我是內容我是內容我是內容我是內容我是內容 我是內容我是內容我是內容我是內容我是內容我是內容我是內容 我是內容我是內容我是內容我是內容我是內容我是內容我是內容 我是內容我是內容我是內容我是內容我是內容我是內容我是內容 </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 ></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消除下邊距
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/93655.html
標籤：Html/Css