1.響應式布局；
響應式布局有兩種方法：1. 流式布局：百分比布局（寬，高，定位置） 所謂百分比，尺寸的百分比：基於父級的百分比。
流式布局需要在head裡面寫上這句話：
使用流式布局是需要注意幾點：margin，padding 設定這兩個數值時，
需要根據螢幕寬度變化而改變量值（並不是高度）即：margin數值/螢幕寬度（父級寬度）= 百分比，left,top,right,bottom 需要根據各自的方向而計算百分比。
top/父級的高度 = 百分比
left/父級的寬度 = 百分比
2. **查詢： @media only screen and (max-width: 00px) and (min-width: 00px)
外部引用樣式時的**查詢新增方法是：
這個，適用於，整個頁面變化較大的情況
3. h5的新標籤 語義標籤：定義文章 ，定義文章側邊欄，定義一組**物件及文字 / 標題，導航條，頭部，分割槽，尾部。表單input的新屬性值：
子元素選擇器：nth-child(n) ，nth-last-child(n)，first-child，last-child（括號中，可以填表示式，數字，n / n是從0開始取）
first-of-type , last-of-type , nth-of-type , nth-last-of-type
5. 動畫效果：transform2d / transform3d 以及 transition
transtion: 過渡屬性，讓乙個元素從乙個效果過度到乙個效果。
延遲 幾秒出現效果： -webkit-transition-delay: 0s;
過度某個元素的某個屬性 property： -webkit-transition-property: ;
規定過渡效果的時間曲線： -webkit-transition-timing-function: ease; 也可以使用貝塞爾曲線
/ ease 慢 快 慢; ease-in 先慢後快; ease-out 先快再慢； linear 勻速 /
transform2d：
1. 父級裡設定 -webkit-transition: all 1s;
2. 在父級裡 設定/* 原點，基準點 */
/* 數值，left center right bottom top */
/* 可以影響 傾斜 旋轉 縮放 */
-webkit-transform-origin: right top;
2d 轉換方法：
3./* transform 運動，做何種運動，需要後面規定 */
/*-webkit-transform: translate(50px, 50px);
/*-webkit-transform: translatex(300px);
/*-webkit-transform: translatey(300px);
/* scale(x,y) 縮放 */
/*-webkit-transform: scale(2, 2);
/* scalex 沿著x軸變換比例 */
-webkit-transform: scalex(3);
/* scaley 沿著y軸變換比例 */
-webkit-transform: scaley(3);
/* rotate 旋轉 也可以單獨設定 x y軸*/
/*-webkit-transform: rotate(180deg);
* skew 傾斜(x, y) 也可以單獨設定 x y軸*/
/*-webkit-transform: skew(30deg, 30deg);
transform3d：
/* 透視點 */
/* 設定乙個位置觀察運動 */
/* 放在父級 最好放在body裡 */
perspective: 1000px;
/* 開啟3d模式 給父級加開啟 */
-webkit-transform-style: preserve-3d;
/* 透視原點 */
-webkit-perspective-origin: center center;
/* 背面是否可見 */
-webkit-backface-visibility: visible;
3d 轉換方法：
translate3d(x,y,z) 定義 3d 轉化。
/* 沿z軸平移 */
/*-webkit-transform: translatez(999px);
rotate3d(x,y,z,angle) 定義 3d 旋轉。
/* 沿z軸旋轉 */
-webkit-transform: rotatez(360deg);
/* 兩個運動共同執行，中間用空格隔開 */
/* 運動是有先後順序的 */
scale3d(x,y,z)
定義 3d 縮放轉換。
/* scalez 沿著z軸變換比例 */
-webkit-transform: scalez(3);
/* 可以在顏色前面 設定 數值 百分比 英文 */
background-image: -webkit-radial-gradient(50% 50%, yellow, red, green, blue);
線性漸變：/* linear-gradient 線性漸變 顏色前面可以加位置 top left right bottom */
background-image: -webkit-linear-gradient(top, red 10%, yellow 50%, green 90%);
1234/5678
border-radius: 10px 20px 30px 70px / 20px 20px 30px 40px;
body
/* 動畫宣告和定義 */
/* move 動畫的名稱 */
/* from 0% to 100% */
@-webkit-keyframes move
50%to
}div
css倒影：
/* 上 above */
/* 下 below */
/* 左 右 left right*/
/* 第乙個值 倒影的方向 第二個值 倒影與內容的距離 第三個值 漸變 */
-webkit-box-reflect: below 0px -webkit-linear-gradient(top, rgba(255, 233, 123, 0) 10%, rgba(0, 0, 0, 0.6));
/* box-shadow: x y size blur inset; */
/* 可以設定多個值用逗號間隔 */
css3 文字陰影
text-shadow: 0px 0px 5px pink, 0px 0px 10px pink, 0px 0px 15px purple, 0px 0px 20px pink, 0px 0px 25px pink,2px 2px 30px purple;
HTML5 快取 CSS3動畫
1 語義標籤 2 增強性表單 4 canvas 繪圖 5 svg繪圖 6 地理定位 7 拖放api 8 web worker 9 web storage 10 websockket 處理html5新標籤的瀏覽器相容問題？1 使用document.createelement tag 來解決 2 使用h...
Css3 動畫效果
相關作品 最近看了比較多的動畫效果，想做些自己感興趣的作品，遇到以下問題，記錄下來 1.簡單的動畫主要用transition和transform 2.滑鼠放上去產生的效果，before和after顯示寫法如下 item style3 hover before 3.關於3d動畫效果，要顯示出來，需要新...
css3動畫效果
css3中的transform中有旋轉，放縮，傾斜，平移的功能，分別對應的屬性是 rotate，scale，skew，translate 旋 rotate css view plaincopy webkit transform rotate 10deg moz transform rotate 10...