css樣式
1.圓角
border-radius
border-top-left-radius
兩個角一起寫需要上下在前秒咐，左右在后
2.漸變
線性漸變
background:linear-gradient(red,green);從上到下
background:linear-gradient(to left,red,green)從左到右
徑向漸變
background:radial-gradient(yellow,purple);
3.盒子陰影
box-shadow: apx bpx cpx dpx yellow;
a 控制水平位置 正值偏左 0 兩邊均等
b 控制水平位置 正值靠下 0 上下均等
c 模糊程度
d 陰影范圍
4.過渡
transition:all 1s; all所有 1s 時間
transition-delay: 1s; 1s 延遲
5.2d 3d 轉換
transfrom
- translate 位移 translateX translateY
transform: trans000late(200px,200px);
- rotate 旋轉 rotateX rotateY
transform: rotate(200deg,200deg); deg度數
- scale 縮放 scaleX scaleY
transform: scale(2,2); x,y
- skew 傾斜 skewX skewY
transform:skew(30deg,30deg);
- maxtrix 矩陣 (兼容不好) 組合起來
- 組合
transfrom：translate(200px,200px) rotate(200deg,200deg) scale(2,2) skew(30deg,30deg);
! 多個顯示只有最后一個實現谬晕，想要多個實現，組合成一個
6.動畫
@keyframes 規(guī)定動畫携取。 3
animation 所有動畫屬性的簡寫屬性攒钳，除了 animation-play-state 屬性。 3
animation-name 規(guī)定 @keyframes 動畫的名稱雷滋。 3
animation-duration 規(guī)定動畫完成一個周期所花費的秒或毫秒不撑。 3 事件
animation-timing-function 規(guī)定動畫的速度曲線。 3 ease ease-in進入慢 ease-out出去慢 ease-in-out 進入出去慢
animation-delay 規(guī)定動畫何時開始晤斩。 3 延遲
animation-iteration-count 規(guī)定動畫被播放的次數焕檬。 3 infinite循環(huán)播放
animation-direction 規(guī)定動畫是否在下一周期逆向地播放。 3 alternate 交替 alternate-reverse反向交替 normal正序
animation-play-state 規(guī)定動畫是否正在運行或暫停澳泵。 3 running 運行 paused 暫停
animation-fill-mode 規(guī)定對象動畫時間之外的狀態(tài)实愚。(動畫保持) backwards 默認回到第一幀 forwards 動畫結束保持最后一幀
/* 透視距離，物體越遠顯示越小 */
Ｍ酶ā＠扒谩！/* perspective: 800px; */
/* 透視基點 水平维苔，垂直*/
/* perspective-origin: 186px 112px; */
animation-fill-mode: forwards;
/* backwards 默認回到第一幀 */
/* 動畫結束保持最后一幀 */
transform-origin: left; 基點
animation-delay: 1s;延遲加載
7.彈性盒子
父類設置
display:flex/inline-flex
flex:彈性布局
inline-flex 內聯塊級彈性布局
控制主軸方向
flex-direction:row/column/row-reverse/column-reverse 豎列反向
控制換行
flex-wrap:
nowrap 不換行
wrap 換行
wrap-reverse
可用替換成 （控制主軸方向碰辅，控制換行）
flex-flow:row wrap;
控制主軸排序方式(對齊)
jistify-content
flex-start 左對齊（靠上）
flex-end 右對齊 （靠下）
center 居中
space-between 兩端靠邊中間平分（項目之間間隔相等）
space-around 兩側間隔相等，（項目邊距與邊框間隔大一倍）
控制軸線之間的距離
algin-content
flex-start 左對齊（靠上）
flex-end 右對齊 （靠下）
center 居中
space-between 兩端靠邊中間平分（項目之間間隔相等）
space-around 兩側間隔相等介时，（項目邊距與邊框間隔大一倍）
stretch 拉伸至父級
align-items
flex-start 上對齊
flex-end 下對齊
center 中對齊
stretch 不設高度或為 auto 是充滿整屏
baseline 根據基線 和 flex-start 基本一致
子類設置
flex 設置寬度比例
flex:1/2/3/4
order排序
1234
可以設置order:-1;提到前面
用彈性盒子不生效的屬性
float：浮動
清除浮動
vertical-align
@media 媒體查詢
響應式布局
同一個網頁用于多個設備没宾，手機凌彬，ipad，pc
<meta name="viewport" content="width=device-width, initial-scale=1.0">
移動端head設置
<meta name="viewport" content="width=device-width循衰，initial-scale=1.0,maximun-scale=1,minimun-scale=1,user-scalable=no" />
width=device-width 移動端自適應
initial-scale=1.0,不縮放
user-scalable=no yes,no是否可以縮放
@media only screen and (min-width:960px) and (max-width:1200px){}
偽類
偽類 :
偽元素 ::
h5 移動端
1.語義化更好的內容標簽
header 頭部信息
footer 底部信息
nav 導航
section 段铲敛，節(jié)，區(qū)域
2.帶功能
progress 進度條
- 屬性 max value
/* 改變進度條樣式 */
progress {
width: 168px;
height: 5px;
color: #f00;
background: #efeff4;
border-radius: 0.1rem;
}
progress::-webkit-progress-bar {
background-color: burlywood;
border-radius: 0.2rem;
}
/* 表示已完成進度背景色 */
progress::-webkit-progress-value {
background: red;
border-radius: 0.2rem;
}
dialog 對話框
- 默認樣式 diaplay:none;
details 帶詳細信息標題 默認隱藏,只顯示里面 summary 標簽 open='open' 打開
- 里標簽 summary 標題標簽
bdi 可拖拽 默認無作用
- 屬性 draggable='true' 可拖拽
figure 放圖片羹蚣，圖表原探，代碼等
- 里標簽 figcaption 圖表的標題 可以放圖表的上或下
article 文章/博客標簽
section 電池電量控制
- 里標簽 meter 屬性 max value low 警告 high 也是警告
aside 側邊欄
canvas 畫布容器 屬性 width height ????
embed 屬性 src
3.input 新增屬性 type 類型
color 拾色器
date
datetime
datetime-local
email
month
number
range
search
tel maxlength
url 統(tǒng)一資源定位符 協議名乱凿、域名顽素，文件夾，文件名
week
time
4.視頻和音頻
video
- 屬性
src 引入地址
controls='controls' 控制器
autoplay='autoplay' 自動播放
loop='loop'循環(huán)播放
muted='muted' 靜音播放
preload 刷新網頁是否加載 'metadata'加載 'none'不加載
poster='地址' 封面
audio
- 屬性
src 引入地址
controls='controls'
autoplay='autoplay' 自動播放
loop='loop'循環(huán)播放
muted='muted' 靜音播放
preload 刷新網頁是否加載 'metadata'加載 'none'不加載
rem
px 像素是兼容所有瀏覽器徒蟆，是一個固定值
em 是根據父級縮放字體比例胁出，每次都需要設置父級的寬度
rem 是根據根元素 html 的縮放比例，ie6-ie8 不兼容熱門段审，所以為了兼容性 rem px 都會寫全蝶，移動端用 rem 比較方便網頁默認字體 16px,html 100%
100%=16px 1px=6.25$, 10px=62.5%
1rem=10px 12px=1.2rem
注意：谷歌瀏覽器有默認最小值 12px,當到達最小值就不會再小了
移動端問題
移動端文件命名標準;
- css
common.css 公共的
base.css 基礎的
文件.css
標準盒模型和怪異盒模型如何設置？
標準盒模型
box-sizeing:content-box
在標準模式下寺枉，一個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)
怪異盒模型
box-sizing:border-box;
一個塊的總寬度= width + margin(左右)（即 width 已經包含了 padding 和 border 值）
移動端 a 標簽點擊有背景如何去除抑淫？ 1.取消 a 標簽在移動端點擊時的藍色
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none; 2.使用圖片作為 a 標簽的點擊按鈕時，當觸發(fā) touchstart 的時候姥闪，往往會有一個灰色的背景
a,a:hover,a:active,a:visited,a:link,a:focus{
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
outline:none;
background: none;
text-decoration: none;
}
input 框點擊時邊框顏色統(tǒng)一始苇，如何實現？
input{outline:none}
input:focus { outline: none; }
自己添加的樣式 公共樣式
eg:
l_left{
float:left;
}
l-right{
float:right;
}
清除浮動
學海石崖
背景圖
background:url() no-repeat;
background-position:5px 5px;
background-size:;
input{
outline:none;
}
input:focus{
outline:none;
border:1px solid #666;
}
base.css\
/_ 禁用 iPhone 中 Safari 的字號自動調整 /
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
/ 解決 IOS 默認滑動很卡的情況 _/
-webkit-overflow-scrolling : touch;
height: 100%;
width: 100%;
}
/_ 禁止縮放表單 _/
input[type="submit"], input[type="reset"], input[type="button"], input {
resize: none;
border: none;
}
/_ 取消鏈接高亮 _/
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
注意
1.0 img{
vertical-align:baseline; baseline 按基線 bottom 下
}
2.0 img{
display:block;
}
3.0 父級{
font-size:0;
}
清除浮動
img
.clearfix:before,.clearfix:after{
clear:both;
}
left:calc(50% -29)
設置省略號
兼容
xxx {
width: xx;
height: xx;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
}
不要兼容
xxx {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
pc 移動端
鼠標事件
mousedown:鼠標按鈕被按下（左鍵或者右鍵）時觸發(fā)筐喳。不能通過鍵盤觸發(fā)催式。
mouseup:鼠標按鈕被釋放彈起時觸發(fā)。不能通過鍵盤觸發(fā)避归。
click:單擊鼠標左鍵或者按下回車鍵時觸發(fā)荣月。這點對確保易訪問性很重要，意味著 onclick 事件處理程序既可以通過鍵盤也可以通過鼠標執(zhí)行梳毙。
dblclick:雙擊鼠標左鍵時觸發(fā)哺窄。
mouseover:鼠標移入目標元素上方。鼠標移到其后代元素上時會觸發(fā)账锹。
mouseout:鼠標移出目標元素上方萌业。
mouseenter:鼠標移入元素范圍內觸發(fā)，該事件不冒泡牌废，即鼠標移到其后代元素上時不會觸發(fā)咽白。
mouseleave:鼠標移出元素范圍時觸發(fā)，該事件不冒泡鸟缕，即鼠標移到其后代元素時不會觸發(fā)晶框。
mousemove:鼠標在元素內部移到時不斷觸發(fā)排抬。不能通過鍵盤觸發(fā)。
pc 端網頁事件
click 當鼠標點擊時觸發(fā)
mouseover 當鼠標指針移動到元素上時觸發(fā)
mouseout 當鼠標指針移出元素時觸發(fā)
mouseenter 當鼠標指針移動到元素上時觸發(fā)（不支持冒泡）
mouseleave 當鼠標指針移出元素上時觸發(fā)（不支持冒泡）
mousemove 當鼠標指針移動到元素上時觸發(fā)
mousedown 當元素上按下鼠標按鈕時觸發(fā)
mouseup 當在元素上釋放鼠標按鈕時觸發(fā)
mousewheel 當鼠標滾輪正在被滾動時運行的腳本
keydown 在用戶按下按鍵時觸發(fā)
keyup 當用戶釋放按鍵時觸發(fā)
load 頁面結束加載之后觸發(fā)
scroll 當元素滾動條被滾動時運行的腳本
blur 元素失去焦點時運行的腳本
focus 當元素獲得焦點時運行的腳本
change 在元素值被改變時運行的腳本
移動端事件
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
click 當點擊時觸發(fā)（單擊）
load 頁面結束加載之后觸發(fā)
scroll 當元素滾動條被滾動時運行的腳本
blur 元素失去焦點時運行的腳本
focus 當元素獲得焦點時運行的腳本
change 在元素值被改變時運行的腳本
input 代替 keyup授段、keydown
touch 事件模型 處理單手指操作
? 最基本的 touch 事件包括 4 個事件： - touchstart
當在屏幕上按下手指時觸發(fā) - touchmove
當在屏幕上移動手指時觸發(fā) 調用 preventDefault()可以阻止?jié)L動 - touchend
當在屏幕上抬起手指時觸發(fā) - touchcancel
當系統(tǒng)停止跟蹤觸摸時觸發(fā)（電話進來結束）\
touchenter
移動手指進入一個 dom 元素 - touchleave
移動手指離開一個 dom 元素-
移動端事件列表
- touches
當前操作的 touches 數組 - 蹲蒲！targetTouches（觸摸點）
特定于事件目標的 touch 對象的數組 - changedTouches（手指個數）
上次觸摸改變的 touches 數組
//判斷是否是一個手指 if (e.targetTouches.length > 1) { return; } - touches
d1.addEventListener("touchstart", function(e) {
console.log(e.targetTouches[0]);
});
d1.addEventListener("touchmove", function(e) {
console.log(e.targetTouches[0]);
});
d1.addEventListener("touchend", function(e) {
console.log(e.changedTouches[0]);
});
屬性 identifier:
表示每一個 touch 對象的獨一無二的 identifier，可以保證跟蹤到 touches 數組
移動端
offsetX
相對于屏幕左邊緣的距離
pageX
觸摸點相對于 docuemnt 左側邊緣的距離侵贵，與 clientX 不同的是届搁，當有滾動條是 page 包括滾動條距離，client 不包括
clientX
觸摸點相對于視口（窗口）的距離
outcomplate ='off'取消自動 from 那個啥
window.onresize=fn 屏幕改變觸發(fā)
zepto
5 個基本模塊
- !* zepto 核心模塊窍育，包含大多數方法‘
- !* event 事件 通過 on()& off()處理事件
- !* ajax XMLHttpRequest 和 JSONP 實用功能
- !* form 序列化 & 提交 web 表單
- !* ie 增加支持桌面的 Internet Explorer 10+和 Windows Phone 8卡睦。
其他模塊
- detect 提供
.browser 消息
- fx The animate()方法
- fx_medthods 以動畫形式的 show, hide, toggle, 和 fade*()[褪色淡化]方法.
- assets 實驗性支持從 DOM 中移除 image 元素后清理 iOS 的內存。
- data 一個全面的 data()方法, 能夠在內存中存儲任意對象漱抓。
- deferred 提供
.ajax() 支持 promise 接口鏈式的回調表锻。
- callbacks 為"deferred"模塊提供 $.Callbacks。
- selector 實驗性的支持 jQuery CSS 表達式 實用功能乞娄，比如 $('div:first')和 el.is(':visible')瞬逊。
- touch 在觸摸設備上觸發(fā) tap– 和 swipe– 相關事件。這適用于所有的
touch(iOS, Android)和pointer事件(Windows Phone)仪或。 - gesture 在觸摸設備上觸發(fā) pinch 手勢事件确镊。
- stack 提供 andSelf& end()鏈式調用方法
- ios3 String.prototype.trim 和 Array.prototype.reduce 方法 (如果他們不存在) ，以兼容 iOS 3.x.
修改引入
make 文檔
target.build = ->
cd __dirname
mkdir '-p', 'dist'
modules = (env['MODULES'] || 'zepto event ajax form ie selector fx touch').split(' ')
node 修改
npm install
npm run-script dist
引包
- click 與 touch
click 在移動端有延遲
touch 事件在 pc 端無效范删，在移動端的優(yōu)先級比移動端高
- 移動端點擊注意事項 touchstart touchend
單個手指
e.targetTouches.length>1
時間范圍 150-200
Date.now()
抖動距離 6
e.targetTouches[0].clientX
li[i].classList.remove('class')//去除 class 樣式
li[i].classList.add('class)//添加 class 樣式
zpto
父類.removeClass('類名').eq(下標).addClass('類名')
//解決 pc 端 touch 點擊無效
//點擊穿透 tap 事件的缺點
https://www.npmjs.com/package/fastclick
使用 http://www.reibang.com/p/67bae6dfca90
web 移動端的插件
zepto (類似 jquery)
https://www.html.cn/doc/zeptojs_api/
iScroll(平滑滾動網頁)
https://github.com/cubiq/iscroll
swip 輪播
https://github.com/thebird/swipe
