為一名前端工程師，經(jīng)常在寫完 HTML 以后，才覺(jué)得真正的噩夢(mèng)要開(kāi)始了，啊，寫 CSS 的時(shí)候，面對(duì)滿屏亂飛的組件，真想手動(dòng)給他們挪到該在位置上……

都說(shuō) CSS 很難掌握，最愁給頁(yè)面編寫樣式，其實(shí)都是因?yàn)檫€沒(méi)有形成一個(gè)對(duì)象 CSS 宏觀的了解，只要有了正確的學(xué)習(xí)方法、設(shè)計(jì)思維，再通過(guò)不斷的積累，就能輕松地掌握它。接下來(lái)我會(huì)把掌握 CSS 的 5 技巧整理一下，讓你在以后編寫 CSS 的時(shí)候不用再發(fā)愁。

樣式調(diào)整

CSS 最基本的功能就是調(diào)整 HTML 的樣式，可以設(shè)置元素的寬高、字體的顏色、大小和間距、背景顏色或圖片等。這些跟傳統(tǒng)的富文本編輯器不一樣比如 word 是一樣的效果。有些屬性可以一次性設(shè)置多個(gè)項(xiàng)目，比如background可以同時(shí)設(shè)置：

• background-color
• background-image
• background-origin
• background-position
• ...等等

action

業(yè)余時(shí)間經(jīng)常到像 mdn 之類的文檔網(wǎng)站上去查它們的用法，能長(zhǎng)不少見(jiàn)識(shí)。

布局調(diào)整

CSS 的一大難題就在于對(duì)頁(yè)面進(jìn)行整體布局，這個(gè)時(shí)候就需要把思維放到一個(gè)整體上來(lái)，對(duì)布局進(jìn)行規(guī)劃，然后合理利用 css 的 flex 和 grid 來(lái)實(shí)現(xiàn)。

多數(shù)情況下的頁(yè)面并不是規(guī)規(guī)矩矩的布局，經(jīng)常會(huì)有層疊、覆蓋、偏移等奇特的布局方式，所以 CSS 有脫離文檔流這個(gè)概念，使用 absolute 絕對(duì)定位、fixed 固定定位、又或者是使用 float 屬性都會(huì)導(dǎo)致元素脫離正常的文檔流，正常的文檔流是說(shuō)元素都是從上到下，從左到右依次排列的（塊級(jí)元素因?yàn)檎紦?jù)一整行，所以都是從上到下）。而元素脫離文檔流之后，這個(gè)元素就相當(dāng)于被拿走，后邊的元素會(huì)占用這個(gè)元素的空間，以此類推。而這個(gè)單獨(dú)被拿走的元素則可以通過(guò)像 left，top 之類的屬性，根據(jù)一定的規(guī)則來(lái)自由移動(dòng)，如果有重疊，則可以通過(guò) z-index 來(lái)控制誰(shuí)在上誰(shuí)在下。需要注意的是，使用 tansform 屬性調(diào)整元素的位置不會(huì)導(dǎo)致它們脫離文檔流，它們所占的空間會(huì)停留在原位。

響應(yīng)式布局

響應(yīng)式布局用 CSS 實(shí)現(xiàn)比較簡(jiǎn)單，通過(guò) @media 查詢屏幕寬度，根據(jù)頁(yè)面的顯示效果，把相應(yīng)的樣式覆蓋，來(lái)讓頁(yè)面顯示正常。

action

要訓(xùn)練自己對(duì)布局的規(guī)劃，可以看一下其他的網(wǎng)站，從簡(jiǎn)單規(guī)整的開(kāi)始，逐步分析它們的布局，例如導(dǎo)航、頭部區(qū)域、內(nèi)容分區(qū)和底部信息，自己用簡(jiǎn)單的 HTML 元素方塊把它規(guī)劃出來(lái)，忽略組件細(xì)節(jié)，慢慢的再去看一些不規(guī)則布局的網(wǎng)站，再用自己的方法把它實(shí)現(xiàn)出來(lái)，慢慢的就會(huì)形成一種思路，看到設(shè)計(jì)稿就能知道該怎么大體規(guī)劃網(wǎng)站的布局了。

學(xué)習(xí) CSS 建議看的就是 MDN[1] 和 W3Schools[2]，隨時(shí)查閱屬性的含義，如果想看具體的特效或者圖形怎么實(shí)現(xiàn)，可以谷歌搜索或者每天瀏覽一下 codepen 找找靈感。最重要的是一定要?jiǎng)邮秩懀确e累的多了之后，就會(huì)形成套路。

需要私我 “資料” 獲取！！

家好，今天給大家介紹一款， 一組12個(gè)文字動(dòng)畫(huà)特效html頁(yè)面源碼，（圖1）。送給大家哦，獲取方式在本文末尾。

每款都有獨(dú)立的動(dòng)畫(huà)（圖2）

每個(gè)動(dòng)畫(huà)都可以按重播按鈕重復(fù)播放（圖3）

源碼完整，需要的朋友可以下載學(xué)習(xí)（圖4）

本源碼編碼：10177，需要的朋友，點(diǎn)擊下面的鏈接后，搜索10177，即可獲取。

「鏈接」