前端学习day28：响应式布局、阿里图标等
1. 阿里圖標(biāo)
使用場景及原理
原理：將小圖標(biāo)定義成字體，通過引入字體來展示這些小圖標(biāo)。因?yàn)榇藭r(shí)的小圖標(biāo)相當(dāng)于是一個(gè)文字，所以支持文字對應(yīng)的所有樣式。
使用步驟
1.打開阿里圖標(biāo)官網(wǎng)(https://www.iconfont.cn/ )
2.登陸
3.選擇需要的圖標(biāo)加入購物車
4.全部選擇完后，點(diǎn)擊右上角購物車，下載代碼
5.打開下載的文件中的 demo頁面，其中會詳細(xì)的介紹三種引入方式、各方式的優(yōu)缺點(diǎn)以及對應(yīng)代碼。選擇合適的一種方式引入到自己代碼中即可。
2. 響應(yīng)式布局
什么是響應(yīng)式布局
CSS3響應(yīng)式布局是指同一頁面在不同的瀏覽器窗口尺寸下展示不同的布局方式。
傳統(tǒng)的開發(fā)方式是PC端一套代碼，移動端再開發(fā)另一套代碼。而響應(yīng)式只需要一套代碼就可以了，既可以適用于PC端也可以適用于移動端。
響應(yīng)式布局的缺點(diǎn)是需要的css比較多。
實(shí)現(xiàn)響應(yīng)式的方案
方案一：媒體查詢
最好用最常用的方案。媒體查詢可以規(guī)定元素在頁面對應(yīng)的尺寸展示對應(yīng)的css樣式。
/*媒體類型：screen 用于電腦屏幕，平板電腦，智能手機(jī)等。all 用于所有設(shè)備（一般選用這兩個(gè)值之一即可，其他值大部分被廢棄或者用不到）and：每一個(gè)值之間的鏈接符號*//*初始樣式*/body{background-color: #aaa;}/*屏幕寬度 小于700px 時(shí)*/@media screen and (max-width: 700px ){body{ background-color: #1dba2d;}}/*屏幕寬度 大于700px 且 小于900px 時(shí)*/@media screen and (min-width: 700px) and (max-width: 900px ){body{ background-color: #3f1dba;}}/*屏幕寬度 大于900px 且 小于1200px 時(shí)*/@media screen and (min-width: 900px) and (max-width: 1200px ){body{ background-color: #ba1d54;}}/*屏幕寬度 大于1200px 時(shí)*/@media screen and (min-width: 1200px ){body{ background-color: #ba931d;}}方案二：百分比布局
盡量不使用固定的寬度，用百分比代替，從而做到隨窗口縮小布局變化。但是適用性并不高，做出來的頁面每時(shí)每刻都在變各種布局文字等看起來不好看。一般會配合著媒體查詢在某些局部的布局使用。
方案三：rem
rem是一個(gè)相對單位， 1rem = html的font-size大小。所以可以通過js在改變頁面寬度時(shí)修改html的font-size，從而做到改變頁面中所有rem單位對應(yīng)的樣式。同方案二，適用性并不高，某些布局中寬高字體等大小不太好控制。
3. HTML5新增標(biāo)簽
下面列舉幾個(gè)較為常用的標(biāo)簽
結(jié)構(gòu)性語義化標(biāo)簽
| header | 定義了文檔的頭部區(qū)域 |
| nav | 定義文檔的導(dǎo)航部分 |
| article | 定義頁面獨(dú)立的內(nèi)容區(qū)域 |
| section | 定義了文檔的某個(gè)區(qū)域。比如章節(jié)、頭部、底部或者文檔的其他區(qū)域 |
| aside | 定義頁面的側(cè)邊欄內(nèi)容 |
| footer | 標(biāo)簽定義文檔或者文檔的一部分區(qū)域的尾部 |
?
? ? ps:header?標(biāo)頭
? ? ps:nav為navigate(航行，航海，導(dǎo)航)的簡稱，在這里譯為導(dǎo)航
?
?
?
?
?
視頻音頻標(biāo)簽
video視頻標(biāo)簽的標(biāo)簽屬性
src
設(shè)置路徑。
width/height
設(shè)置標(biāo)簽的大小，類似于img，但是不會使視頻文件拉伸。
controls
無須值，有該屬性則顯示視頻控制面板。
muted? ? ? ? ? ?ps:muted?[?mju?t?d]?靜靜的,靜音
無須值，有該屬性則靜音。
autoplay
無須值，有該屬性則 自動播放。chrome為了用戶體驗(yàn)不允許自動播放，但是允許靜音下自動播放。
loop? ? ? ? ? ? ? ps:loop?[lu?p]?n.環(huán)形;環(huán)狀物;圓圈;(繩、電線等的)環(huán)，圈;循環(huán)電影膠片;循環(huán)音像磁帶v.使成環(huán);使繞成圈;成環(huán)形運(yùn)動
無須值，有該屬性則放完之后循環(huán)播放（默認(rèn)是放完了停止）。
poster
設(shè)置封面海報(bào)，需要指定一個(gè)圖片地址。
preload? ? ? ? ?ps:preload 預(yù)加載
設(shè)置頁面加載后是否加載視頻（當(dāng)設(shè)置了autoplay時(shí)，此屬性會被忽略）：
auto - 加載整個(gè)視頻
metadata - 加載元數(shù)據(jù)（視頻時(shí)長、尺寸大小等）? ? ? ps:metadata 元數(shù)據(jù)
none - 不加載視頻
audio音頻標(biāo)簽 的標(biāo)簽屬性
與video標(biāo)簽基本一樣，當(dāng)然，audio不支持 width、height，不支持海報(bào)poster，chrome也不支持靜音播放
4. 補(bǔ)充
iframe框架
允許在頁面中通過iframe標(biāo)簽引入另一個(gè)頁面：
可以配合a標(biāo)簽的target 跳轉(zhuǎn)name
<iframe src="頁面地址" width="200" name="" height="200"></iframe>filter屬性
| none | 默認(rèn)值，沒有效果。 |
| blur(px) | 給圖像設(shè)置高斯模糊。"radius"一值設(shè)定高斯函數(shù)的標(biāo)準(zhǔn)差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； ?如果沒有設(shè)定值，則默認(rèn)是0；這個(gè)參數(shù)可設(shè)置css長度值，但不接受百分比值。 |
| brightness(%) | 給圖片應(yīng)用一種線性乘法，使其看起來更亮或更暗。如果值是0%，圖像會全黑。值是100%，則圖像無變化。其他的值對應(yīng)線性乘數(shù)效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設(shè)定值，默認(rèn)是1。 |
| contrast(%) | 調(diào)整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。值可以超過100%，意味著會運(yùn)用更低的對比。若沒有設(shè)置值，默認(rèn)是1。 |
| drop-shadow(h-shadow v-shadow blur spread color) | 給圖像設(shè)置一個(gè)陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。 函數(shù)接受<shadow>(在CSS3背景中定義)類型的值，除了"inset"關(guān)鍵字是不允許的。該函數(shù)與已有的box-shadow box-shadow屬性很相似；不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速。<shadow>參數(shù)如下：<offset-x> <offset-y>(必須)這是設(shè)置陰影偏移量的兩個(gè) <length>值. <offset-x>設(shè)定水平方向距離. 負(fù)值會使陰影出現(xiàn)在元素左邊. <offset-y>設(shè)定垂直距離.負(fù)值會使陰影出現(xiàn)在元素上方。查看<length>可能的單位.如果兩個(gè)值都是0, 則陰影出現(xiàn)在元素正后面 (如果設(shè)置了 <blur-radius> and/or <spread-radius>，會有模糊效果).<blur-radius>(可選)這是第三個(gè)code><length>值. 值越大，越模糊，則陰影會變得更大更淡.不允許負(fù)值 若未設(shè)定，默認(rèn)是0 (則陰影的邊界很銳利).**<spread-radius>** (可選)這是第四個(gè) <length>值. 正值會使陰影擴(kuò)張和變大，負(fù)值會是陰影縮小.若未設(shè)定，默認(rèn)是0 (陰影會與元素一樣大小). 注意: Webkit, 以及一些其他瀏覽器 不支持第四個(gè)長度，如果加了也不會渲染。 **<color>** (可選)查看 <color>該值可能的關(guān)鍵字和標(biāo)記。若未設(shè)定，顏色值基于瀏覽器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 會應(yīng)用color**color**屬性的值。另外, 如果顏色值省略，WebKit中陰影是透明的。 |
| grayscale(*%*) | 將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。值為100%則完全轉(zhuǎn)為灰度圖像，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認(rèn)是0； |
| hue-rotate(deg) | 給圖像應(yīng)用色相旋轉(zhuǎn)。"angle"一值設(shè)定圖像會被調(diào)整的色環(huán)角度值。值為0deg，則圖像無變化。若值未設(shè)置，默認(rèn)值是0deg。該值雖然沒有最大值，超過360deg的值相當(dāng)于又繞一圈。 |
| invert(%) | 反轉(zhuǎn)輸入圖像。值定義轉(zhuǎn)換的比例。100%的價(jià)值是完全反轉(zhuǎn)。值為0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。 若值未設(shè)置，值默認(rèn)是0。 |
| opacity(%) | 轉(zhuǎn)化圖像的透明程度。值定義轉(zhuǎn)換的比例。值為0%則是完全透明，值為100%則圖像無變化。值在0%和100%之間，則是效果的線性乘子，也相當(dāng)于圖像樣本乘以數(shù)量。 若值未設(shè)置，值默認(rèn)是1。該函數(shù)與已有的opacity屬性很相似，不同之處在于通過filter，一些瀏覽器為了提升性能會提供硬件加速。 |
| saturate(%) | 轉(zhuǎn)換圖像飽和度。值定義轉(zhuǎn)換的比例。值為0%則是完全不飽和，值為100%則圖像無變化。其他值，則是效果的線性乘子。超過100%的值是允許的，則有更高的飽和度。 若值未設(shè)置，值默認(rèn)是1。 |
| sepia(%) | 將圖像轉(zhuǎn)換為深褐色。值定義轉(zhuǎn)換的比例。值為100%則完全是深褐色的，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認(rèn)是0； |
?
?
?
? ? ? ps:blur?[bl??(r)]?n.(移動的)模糊形狀;模糊的記憶 v.(使)變得模糊不清;(使)視線模糊;(使)看不清;(使)難以區(qū)分
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
column多列布局
<style>.newspaper{/*列數(shù)*/column-count:4;/*每列寬度*//*瀏覽器會根據(jù)內(nèi)容多少來推算更為合理的 列數(shù) 和 寬度*/column-width:100px;/*count width可以使用推薦復(fù)合寫法 column:100px 10; 讓瀏覽器推算合理的布局*//*列間距*/column-gap:40px;/*列之間邊框樣式*/column-rule:4px outset #ff00ff;} </style> <div class="newspaper">當(dāng)我年輕的時(shí)候，我夢想改變這個(gè)世界；當(dāng)我成熟以后，我發(fā)現(xiàn)我不能夠改變這個(gè)世界，我將目光縮短了些，決定只改變我的國家；當(dāng)我進(jìn)入暮年以后，我發(fā)現(xiàn)我不能夠改變我們的國家，我的最后愿望僅僅是改變一下我的家庭，但是，這也不可能。當(dāng)我現(xiàn)在躺在床上，行將就木時(shí)，我突然意識到：如果一開始我僅僅去改變我自己，然后，我可能改變我的家庭；在家人的幫助和鼓勵下，我可能為國家做一些事情；然后，誰知道呢?我甚至可能改變這個(gè)世界。 </div>?
總結(jié)
以上是生活随笔為你收集整理的前端学习day28：响应式布局、阿里图标等的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java“智慧食堂”系统springbo
- 下一篇： ios系统自带推送（ios自学笔记）