【前端学习笔记】移动web-黑马程序员学习笔记
移動web-黑馬程序員學習筆記
- 1 字體圖標
- 2 平面轉換
- 2.1 絕對定位元素居中：
- 2.2 雙開門效果
- 2.3 旋轉效果
- 2.4* 轉換原點
- 2.5 多重轉換效果
- 2.6 縮放
- 3* 漸變
- 4 空間轉換（3D轉換）
- 4.1 空間位移
- 4.2 透視效果
- 4.3 空間旋轉
- 4.4 立體呈現
- 4.5 縮放
- 5 動畫
- 5.1 精靈動畫
- 5.2 無縫動畫：走馬燈
- 6 移動端特點
- 7 百分比布局
- 8 Flex
- 8.1 Flex布局：
- 8.2 側軸
- 8.3 伸縮比
- 8.4 改變元素排列方向
- 8.5 彈性盒子換行
- 9 移動適配
- rem
- 9.1 添加媒體查詢
- 9.2 flexible.js
- 9.3 Less語法
- 1.注釋
- 2.計算
- 3.嵌套
- 4.變量
- 5.導入
- 6.導出
- vw/vh（用法更簡潔）
- 10 響應式布局
- 10.1 媒體查詢
- 1. 媒體特性常用寫法：
- 2. 書寫順序
- 3. link屬性
- 4. 隱藏
- 10.2 BootStrap
- 一些設計過程中的常用知識點
1 字體圖標
作用：使用字體圖標技巧實現網頁中簡潔的圖標效果
展示的是圖標，本質上是字體，處理簡單的顏色單一的圖片。
每個網站的標題欄圖標：網站網址+/favicon.ico
素材庫： Iconfont：https://www.iconfont.cn/
使用字體圖標 - 類名
如果想要的圖標沒有，可以問設計師要svg格式的圖，上傳后再下載即可。
2 平面轉換
作用：使用transform屬性實現元素的位移、旋轉、縮放等效果
.father:hover .son {transform: translate(100px, 50px);/* 百分比: 盒子自身尺寸的百分比 */transform: translate(100%, 50%);/* 只給出一個值表示x軸移動距離 */transform: translate(100px);transform: translateY(100px); }2.1 絕對定位元素居中：
步驟：
2.2 雙開門效果
向左側移動盒子自身寬度大小
向右側移動盒子自身寬度大小
2.3 旋轉效果
必須有過渡屬性，旋轉才能生效
img {width: 250px;/* 旋轉效果必須設置過渡 */transition: all 2s; } img:hover {/* transform: rotate(角度); *//* 順 */transform: rotate(360deg);/* 逆 */transform: rotate(-360deg); }2.4* 轉換原點
作用：使用transform-origin屬性改變轉換原點
默認旋轉圓點是盒子中心點，旋轉后會改變坐標軸向，修改效果設置在標簽上，hover時設置旋轉效果
transform-origin: 原點水平位置 原點垂直位置;
/*transform-origin: left、top、right bottom center;*/ transform-origin: left bottom;2.5 多重轉換效果
邊走邊轉，順序不能反
transform: translate(600px) rotate(360deg);2.6 縮放
使用scale改變元素尺寸
使用時要注意transform設置定位和縮放會存在層疊特性，導致部分設置不生效
3* 漸變
設置背景透明度漸變的步驟：
1.用偽元素書寫盒子控制位置，設置漸變效果并設置過渡屬性和opacity:0;
2.用hover顯示，設置opacity:1
設置圖片大小漸變的步驟：
1.給圖片設置過渡屬性transition:all 0.5s，給hover設置放大屬性transform:scale(1.2)
2.給父元素設置overflow:hidden,使圖片超出的部分隱藏
設置文字移動漸變步驟:
hover設置txt的位置移動transform:translate()
4 空間轉換（3D轉換）
作用：使用transform屬性實現元素在空間內的位移、旋轉、縮放等效果
Z軸的變化需要設置透視效果才能看到
4.1 空間位移
加在hover上
.box:hover {/* transform: translate3d(50px, 100px, 200px); */transform: translateX(100px);transform: translateY(100px);transform: translateZ(100px); }4.2 透視效果
作用：產生近大遠小，近清晰，遠模糊的效果
標簽加在父級上，取值為800-1200之間的數值
數值給的小代表距離屏幕近，給的大代表距離屏幕非常遠
4.3 空間旋轉
都加在hover上
繞中心旋轉，可以用以下命令：
transform:rotateZ(值)或者transform: rotate(360deg);
繞x軸旋轉：
transform: rotateX(60deg); transform: rotateY(60deg);
左手法則：判斷旋轉方向，左手握住旋轉軸，拇指指向正值方向，手指彎曲方向為旋轉正值方向
4.4 立體呈現
構建立體圖形，給盒子設置該屬性
transform-style: preserve-3d;4.5 縮放
空間縮放
transform: scale3d(0.5,1.1,2);5 動畫
animation: 動畫名稱 動畫時長 速度曲線 延遲時間 重復次數 動畫方向 執行完畢時狀態
速度曲線：steps(3)分三階段執行
重復次數：infinite(無限循環)/3
動畫方向：alternate為反向
執行完畢時的狀態：forwards最后一幀狀態/backwards第一幀狀態
5.1 精靈動畫
使用steps實現逐幀動畫，制作步驟
改變背景圖的位置，移動的距離就是精靈圖的寬度
添加速度曲線steps(N),N與精靈圖上小圖個數相同，添加無限重復效果
forwards：停留在最終狀態
5.2 無縫動畫：走馬燈
6 移動端特點
pc端和移動端網頁區別：pc端有版心，版心居中
移動端：網頁充滿屏幕
分辨率：
物理分辨率出廠就被固定，不可被改變。
邏輯分辨率：軟件決定的，可以改變，寫代碼參考的分辨率
視口：使用meta標簽設置視口寬度，制作適配不同設備寬度的網頁
- 手機屏幕尺寸都不同，網頁寬度為100%
- 網頁的寬度和邏輯分辨率尺寸相同
- 默認情況下，網頁寬度和邏輯分辨率不同，默認網頁寬度為980px，移動端都是375px
二倍圖：一般給的都是二倍圖，將設計圖改為2x，再測量進行開發
7 百分比布局
百分比布局也叫流式布局，實現效果為寬度自適應，高度固定
.toolbar {/* 百分比布局 流式布局 */width: 100%;height: 50px;}.toolbar li img {height: 100%;}.toolbar li {float: left;width: 20%;height: 50px;}8 Flex
子級浮動脫標，父級必須設置寬度，采用flex可以不設置浮動，也不會脫標
給父級設置display: flex;
Flex布局是一種瀏覽器提倡的布局模型，可以避免浮動脫標的問題，布局網頁更簡單靈活，非常適合結構化布局。
但是Flex布局僅適用于高 版本瀏覽器，可以查詢caniuse.com搜索兼容性
8.1 Flex布局：
- 彈性容器
- 彈性盒子
- 主軸：默認主軸在水平，彈性盒子都是沿著主軸排列
8.2 側軸
使用align-items調節元素在側軸的對齊方式，添加到彈性容器上。
當盒子沒給高，按內容大小撐開高度，
給了寬高，則對應給定的寬高
8.3 伸縮比
單獨設置在某一個子盒子上，去掉剩下和盒子寬度剩下的寬度獨占份數
flex:1;8.4 改變元素排列方向
主軸默認是水平方向, 側軸默認是垂直方向
/*修改主軸方向*/ flex-direction：column; /*視覺效果：實現盒子水平居中*/ align-items:center;8.5 彈性盒子換行
當一行顯示不完時，flex可以自動將子級壓縮成一行
實現換行：flex-wrap:wrap
9 移動適配
- rem：目前多數企業在用的解決方案
- vw/vh：未來的解決方案
目標：使用rem單位設置i網頁元素的尺寸，屏幕尺寸不同，最終呈現出來的大小也不同
1rem = 1HTML字號大小
rem
9.1 添加媒體查詢
1. 手機屏幕大小不同，分辨率不同， 如何設置不同的HTML標簽字號？
可以檢測視口的寬度，編寫差異化的css樣式，當某個條件成立, 執行對應的CSS樣式。
2. 設備寬度不同，HTML標簽字號設置多少合適？
目前rem布局方案中，將網頁等分成10份， HTML標簽的字號為視口寬度的 1/10
3. 如何確定rem數值？
查看設計稿寬度–確定參考設備寬度（視口寬度）–確定基準根字號（1/10視口寬度)
rem單位尺寸=px單位尺寸/基準根字號（取小數點后三位）
9.2 flexible.js
使用flexible.js配合rem實現在不同寬度的設備中，網頁元素尺寸等比縮放效果
優點：rem需要多個視口，移動端尺寸較多，每一個都需要設置太麻煩
寫在body最下邊。
<body><script src="../js/flexible.js"></script> </body>9.3 Less語法
使用less運算完成px到rem單位的轉換
less是一個CSS預處理器，后綴為.less，網頁引入對應的css文件。
1.注釋
單行注釋：//
塊注釋：/**/
2.計算
.less
.box {width: 100 + 10px;width: 100 - 20px;width: 100 * 2px;// 除法，兩種表示方法// 68 > remwidth: (68 / 37.5rem);//推薦用法height: 29 ./ 37.5rem; }對應的.css:
.box {width: 110px;width: 80px;width: 200px;width: 1.81333333rem;height: 0.77333333rem; }3.嵌套
.less
.father {width: 100px;.son {color: pink;// & 表示當前選擇器&:hover {color: green;}}&:hover {color: orange;} }對應的.css:
.father {width: 100px; } .father .son {color: pink; } .father .son:hover {color: green; } .father:hover {color: orange; }4.變量
能夠使用Less變量設置屬性值。
.less
//1.定義變量 @colora:pink; .box {color:@colora; } .aa {background-color:@colora; }對應的.css:
.box {color: pink; } .aa {color: pink; }5.導入
.less內容：
@import 'less路徑';6.導出
less導出CSS文件
**方法1：**配置EasyLess插件， 實現所有Less有相同的導出路徑
在less.compile當中添加導出路徑：
**方法2：**控制當前Less文件導出路徑
/*導出到qqq文件夾，改名字為daqiu.css*/ // out: ./qqq/daqiu.css /*導出到abc文件夾，不改名字*/ // out: ./abc/不想導出：
// out: falsevw/vh（用法更簡潔）
- vw=1/100視口寬度
- vh=1/100視口高度
不允許兩者混用，只能用單次。
10 響應式布局
10.1 媒體查詢
目標：能夠根據設備寬度的變化，設置差異化樣式
1. 媒體特性常用寫法：
/* 視口寬度小于等于768px， 網頁背景色是粉色 */ @media (max-width: 768px) {body {background-color: pink;} } /* 視口寬度大于等于1200px， 網頁背景色是skyblue */ @media (min-width: 1200px) {body {background-color: skyblue;} }2. 書寫順序
能夠根據設備寬度的變化，設置差異化樣式
- min-width（從小到大）
- max-width（從大到小）
3. link屬性
外鏈式css屬性：media里一定要加小括號
<!-- 視口寬度 >= 992px，網頁背景色為粉色 --> <!-- 視口寬度 >= 1200px，網頁背景色為綠色 --> <link rel="stylesheet" href="./one.css" media="(min-width: 992px)"> <link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">4. 隱藏
當視口寬度發生變化時，顯示的內容發生改變，部分內容隱藏
<head><style>/* 如果檢測到視口寬度小于768px, 認為是手機端, left隱藏 */@media (max-width: 768px) {.left {display: none;}}</style> </head> <body><div class="box"><div class="left">bbbbbb</div><div class="main">aaaaa</div></div> </body>10.2 BootStrap
UI框架：將常見效果進行統一封裝后形成的一套代碼, 例如：BootStrap，使用 BootStrap框架快速開發響應式網頁。
BootStrap3默認將網頁分成12等份
柵格系統布局：
在BootStrap.com里找到合適的樣式，支持定制，下載導入，再將對應的盒子添加對應效果的類即可。
一些設計過程中的常用知識點
background-size:contain：設置背景，圖片等比例縮放，當寬度或者高度和盒子尺寸相等，圖片就不再縮放。
再給文字父級設置：
flex：1； width：0；給彈性盒子寬度設置為0.則多出的文字就不會撐開盒子。
總結
以上是生活随笔為你收集整理的【前端学习笔记】移动web-黑马程序员学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
