1. 阿里圖標

使用場景及原理

原理：將小圖標定義成字體，通過引入字體來展示這些小圖標。因為此時的小圖標相當于是一個文字，所以支持文字對應的所有樣式。

使用步驟

1.打開阿里圖標官網(https://www.iconfont.cn/ )

2.登陸

3.選擇需要的圖標加入購物車

4.全部選擇完后，點擊右上角購物車，下載代碼

5.打開下載的文件中的 demo頁面，其中會詳細的介紹三種引入方式、各方式的優缺點以及對應代碼。選擇合適的一種方式引入到自己代碼中即可。

2. 響應式布局

什么是響應式布局

CSS3響應式布局是指同一頁面在不同的瀏覽器窗口尺寸下展示不同的布局方式。

傳統的開發方式是PC端一套代碼，移動端再開發另一套代碼。而響應式只需要一套代碼就可以了，既可以適用于PC端也可以適用于移動端。

響應式布局的缺點是需要的css比較多。

實現響應式的方案

方案一：媒體查詢

最好用最常用的方案。媒體查詢可以規定元素在頁面對應的尺寸展示對應的css樣式。

/*媒體類型：screen 用于電腦屏幕，平板電腦，智能手機等。all 用于所有設備（一般選用這兩個值之一即可，其他值大部分被廢棄或者用不到）and：每一個值之間的鏈接符號*//*初始樣式*/body{background-color: #aaa;}/*屏幕寬度 小于700px 時*/@media screen and (max-width: 700px ){body{ background-color: #1dba2d;}}/*屏幕寬度 大于700px 且 小于900px 時*/@media screen and (min-width: 700px) and (max-width: 900px ){body{ background-color: #3f1dba;}}/*屏幕寬度 大于900px 且 小于1200px 時*/@media screen and (min-width: 900px) and (max-width: 1200px ){body{ background-color: #ba1d54;}}/*屏幕寬度 大于1200px 時*/@media screen and (min-width: 1200px ){body{ background-color: #ba931d;}}

方案二：百分比布局

盡量不使用固定的寬度，用百分比代替，從而做到隨窗口縮小布局變化。但是適用性并不高，做出來的頁面每時每刻都在變各種布局文字等看起來不好看。一般會配合著媒體查詢在某些局部的布局使用。

方案三：rem

rem是一個相對單位， 1rem = html的font-size大小。所以可以通過js在改變頁面寬度時修改html的font-size，從而做到改變頁面中所有rem單位對應的樣式。同方案二，適用性并不高，某些布局中寬高字體等大小不太好控制。

3. HTML5新增標簽

下面列舉幾個較為常用的標簽

結構性語義化標簽

標簽描述

header	定義了文檔的頭部區域
nav	定義文檔的導航部分
article	定義頁面獨立的內容區域
section	定義了文檔的某個區域。比如章節、頭部、底部或者文檔的其他區域
aside	定義頁面的側邊欄內容
footer	標簽定義文檔或者文檔的一部分區域的尾部

?

? ? ps:header?標頭

? ? ps:nav為navigate(航行，航海，導航)的簡稱，在這里譯為導航

?

?

?

?

?

視頻音頻標簽

video視頻標簽的標簽屬性

src

設置路徑。

width/height

設置標簽的大小，類似于img，但是不會使視頻文件拉伸。

controls

無須值，有該屬性則顯示視頻控制面板。

muted? ? ? ? ? ?ps:muted?[?mju?t?d]?靜靜的,靜音

無須值，有該屬性則靜音。

autoplay

無須值，有該屬性則 自動播放。chrome為了用戶體驗不允許自動播放，但是允許靜音下自動播放。

loop? ? ? ? ? ? ? ps:loop?[lu?p]?n.環形;環狀物;圓圈;(繩、電線等的)環，圈;循環電影膠片;循環音像磁帶v.使成環;使繞成圈;成環形運動

無須值，有該屬性則放完之后循環播放（默認是放完了停止）。

poster

設置封面海報，需要指定一個圖片地址。

preload? ? ? ? ?ps:preload 預加載

設置頁面加載后是否加載視頻（當設置了autoplay時，此屬性會被忽略）：

auto - 加載整個視頻

metadata - 加載元數據（視頻時長、尺寸大小等）? ? ? ps:metadata 元數據

none - 不加載視頻

audio音頻標簽 的標簽屬性

與video標簽基本一樣，當然，audio不支持 width、height，不支持海報poster，chrome也不支持靜音播放

4. 補充

iframe框架

允許在頁面中通過iframe標簽引入另一個頁面：

可以配合a標簽的target 跳轉name

<iframe src="頁面地址" width="200" name="" height="200"></iframe>

filter屬性

值描述

none	默認值，沒有效果。
blur(px)	給圖像設置高斯模糊。"radius"一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； ?如果沒有設定值，則默認是0；這個參數可設置css長度值，但不接受百分比值。
brightness(%)	給圖片應用一種線性乘法，使其看起來更亮或更暗。如果值是0%，圖像會全黑。值是100%，則圖像無變化。其他的值對應線性乘數效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設定值，默認是1。
contrast(%)	調整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。值可以超過100%，意味著會運用更低的對比。若沒有設置值，默認是1。
drop-shadow(h-shadow v-shadow blur spread color)	給圖像設置一個陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。 函數接受<shadow>(在CSS3背景中定義)類型的值，除了"inset"關鍵字是不允許的。該函數與已有的box-shadow box-shadow屬性很相似；不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速。<shadow>參數如下：<offset-x> <offset-y>(必須)這是設置陰影偏移量的兩個 <length>值. <offset-x>設定水平方向距離. 負值會使陰影出現在元素左邊. <offset-y>設定垂直距離.負值會使陰影出現在元素上方。查看<length>可能的單位.如果兩個值都是0, 則陰影出現在元素正后面 (如果設置了 <blur-radius> and/or <spread-radius>，會有模糊效果).<blur-radius>(可選)這是第三個code><length>值. 值越大，越模糊，則陰影會變得更大更淡.不允許負值 若未設定，默認是0 (則陰影的邊界很銳利).**<spread-radius>** (可選)這是第四個 <length>值. 正值會使陰影擴張和變大，負值會是陰影縮小.若未設定，默認是0 (陰影會與元素一樣大小). 注意: Webkit, 以及一些其他瀏覽器 不支持第四個長度，如果加了也不會渲染。 **<color>** (可選)查看 <color>該值可能的關鍵字和標記。若未設定，顏色值基于瀏覽器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 會應用color**color**屬性的值。另外, 如果顏色值省略，WebKit中陰影是透明的。
grayscale(*%*)	將圖像轉換為灰度圖像。值定義轉換的比例。值為100%則完全轉為灰度圖像，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0；
hue-rotate(deg)	給圖像應用色相旋轉。"angle"一值設定圖像會被調整的色環角度值。值為0deg，則圖像無變化。若值未設置，默認值是0deg。該值雖然沒有最大值，超過360deg的值相當于又繞一圈。
invert(%)	反轉輸入圖像。值定義轉換的比例。100%的價值是完全反轉。值為0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。 若值未設置，值默認是0。
opacity(%)	轉化圖像的透明程度。值定義轉換的比例。值為0%則是完全透明，值為100%則圖像無變化。值在0%和100%之間，則是效果的線性乘子，也相當于圖像樣本乘以數量。 若值未設置，值默認是1。該函數與已有的opacity屬性很相似，不同之處在于通過filter，一些瀏覽器為了提升性能會提供硬件加速。
saturate(%)	轉換圖像飽和度。值定義轉換的比例。值為0%則是完全不飽和，值為100%則圖像無變化。其他值，則是效果的線性乘子。超過100%的值是允許的，則有更高的飽和度。 若值未設置，值默認是1。
sepia(%)	將圖像轉換為深褐色。值定義轉換的比例。值為100%則完全是深褐色的，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0；

?

?

?

? ? ? ps:blur?[bl??(r)]?n.(移動的)模糊形狀;模糊的記憶 v.(使)變得模糊不清;(使)視線模糊;(使)看不清;(使)難以區分

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

column多列布局

<style>.newspaper{/*列數*/column-count:4;/*每列寬度*//*瀏覽器會根據內容多少來推算更為合理的 列數 和 寬度*/column-width:100px;/*count width可以使用推薦復合寫法 column:100px 10; 讓瀏覽器推算合理的布局*//*列間距*/column-gap:40px;/*列之間邊框樣式*/column-rule:4px outset #ff00ff;} </style> <div class="newspaper">當我年輕的時候，我夢想改變這個世界；當我成熟以后，我發現我不能夠改變這個世界，我將目光縮短了些，決定只改變我的國家；當我進入暮年以后，我發現我不能夠改變我們的國家，我的最后愿望僅僅是改變一下我的家庭，但是，這也不可能。當我現在躺在床上，行將就木時，我突然意識到：如果一開始我僅僅去改變我自己，然后，我可能改變我的家庭；在家人的幫助和鼓勵下，我可能為國家做一些事情；然后，誰知道呢?我甚至可能改變這個世界。 </div>

?

總結

以上是生活随笔為你收集整理的前端学习day28：响应式布局、阿里图标等的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。