整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
為一名前端工程師，經(jīng)常在寫完 HTML 以后，才覺得真正的噩夢要開始了，啊，寫 CSS 的時候，面對滿屏亂飛的組件，真想手動給他們挪到該在位置上……
都說 CSS 很難掌握，最愁給頁面編寫樣式，其實(shí)都是因?yàn)檫€沒有形成一個對象 CSS 宏觀的了解，只要有了正確的學(xué)習(xí)方法、設(shè)計(jì)思維，再通過不斷的積累，就能輕松地掌握它。接下來我會把掌握 CSS 的 5 技巧整理一下，讓你在以后編寫 CSS 的時候不用再發(fā)愁。
CSS 最基本的功能就是調(diào)整 HTML 的樣式，可以設(shè)置元素的寬高、字體的顏色、大小和間距、背景顏色或圖片等。這些跟傳統(tǒng)的富文本編輯器不一樣比如 word 是一樣的效果。有些屬性可以一次性設(shè)置多個項(xiàng)目，比如background可以同時設(shè)置：
業(yè)余時間經(jīng)常到像 mdn 之類的文檔網(wǎng)站上去查它們的用法，能長不少見識。
CSS 的一大難題就在于對頁面進(jìn)行整體布局，這個時候就需要把思維放到一個整體上來，對布局進(jìn)行規(guī)劃，然后合理利用 css 的 flex 和 grid 來實(shí)現(xiàn)。
多數(shù)情況下的頁面并不是規(guī)規(guī)矩矩的布局，經(jīng)常會有層疊、覆蓋、偏移等奇特的布局方式，所以 CSS 有脫離文檔流這個概念，使用 absolute 絕對定位、fixed 固定定位、又或者是使用 float 屬性都會導(dǎo)致元素脫離正常的文檔流，正常的文檔流是說元素都是從上到下，從左到右依次排列的（塊級元素因?yàn)檎紦?jù)一整行，所以都是從上到下）。而元素脫離文檔流之后，這個元素就相當(dāng)于被拿走，后邊的元素會占用這個元素的空間，以此類推。而這個單獨(dú)被拿走的元素則可以通過像 left，top 之類的屬性，根據(jù)一定的規(guī)則來自由移動，如果有重疊，則可以通過 z-index 來控制誰在上誰在下。需要注意的是，使用 tansform 屬性調(diào)整元素的位置不會導(dǎo)致它們脫離文檔流，它們所占的空間會停留在原位。
響應(yīng)式布局用 CSS 實(shí)現(xiàn)比較簡單，通過 @media 查詢屏幕寬度，根據(jù)頁面的顯示效果，把相應(yīng)的樣式覆蓋，來讓頁面顯示正常。
要訓(xùn)練自己對布局的規(guī)劃，可以看一下其他的網(wǎng)站，從簡單規(guī)整的開始，逐步分析它們的布局，例如導(dǎo)航、頭部區(qū)域、內(nèi)容分區(qū)和底部信息，自己用簡單的 HTML 元素方塊把它規(guī)劃出來，忽略組件細(xì)節(jié)，慢慢的再去看一些不規(guī)則布局的網(wǎng)站，再用自己的方法把它實(shí)現(xiàn)出來，慢慢的就會形成一種思路，看到設(shè)計(jì)稿就能知道該怎么大體規(guī)劃網(wǎng)站的布局了。
學(xué)習(xí) CSS 建議看的就是 MDN[1] 和 W3Schools[2]，隨時查閱屬性的含義，如果想看具體的特效或者圖形怎么實(shí)現(xiàn)，可以谷歌搜索或者每天瀏覽一下 codepen 找找靈感。最重要的是一定要動手去寫，等積累的多了之后，就會形成套路。
需要私我 “資料” 獲?。。?/p>
簽云效果，可用于展示數(shù)據(jù)展示的頁面，可以在標(biāo)簽下增加動畫效果，讓用戶體驗(yàn)更加直觀！
用CSS3的屬性來實(shí)現(xiàn)該效果
有興趣的小伙伴可以學(xué)習(xí)，如有錯誤之處，歡迎指出糾正！
實(shí)現(xiàn)的效果圖
動態(tài)效果下面可以看到在一定的區(qū)域內(nèi)容中，設(shè)定的標(biāo)簽詞條會左右上下來回運(yùn)動著
下面說說實(shí)現(xiàn)代碼
html結(jié)構(gòu)：
css樣式：
論是設(shè)計(jì)還前端開發(fā)，設(shè)計(jì)和制作個特效按鈕，對于他們來說，是習(xí)以為常的事情，下面是一組使用CSS3制作的炫酷鼠標(biāo)滑過按鈕動畫特效。這30種鼠標(biāo)滑過按鈕的動畫特效分別使用CSS3 transition和transform屬性來制作按鈕邊框，文本動畫以及流光動畫效果，各種效果都非常有創(chuàng)意。
演示地址：http://www.htmleaf.com/Demo/201510282718.html
使用方法
HTML結(jié)構(gòu)
按鈕的HTML結(jié)構(gòu)使用嵌套<div>結(jié)構(gòu)來制作。這里以第6種效果為例。
<div class="wrapper-inner-tab-backgrounds-first">
<div class="sim-button button6">
<span>Login</span>
</div>
</div>
css樣式
.button6{
color: rgba(255,255,255,1);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
border: 1px solid rgba(255,255,255,0.5);
position: relative;
}
.button6 a{
color: rgba(51,51,51,1);
text-decoration: none;
display: block;
}
按鈕中的文本采用絕對定位。
.button6 span{
z-index: 2;
display: block;
position: absolute;
width: 100%;
height: 100%;
}
鼠標(biāo)滑過時動畫的元素是一個::before偽元素，它被設(shè)置為絕對定位。這個效果開始時偽元素的大小為這個按鈕的一半大小，透明度為0。在鼠標(biāo)滑過的時候，它會被放大到按鈕大小，透明度過渡為1。
view sourceprint?
.button6::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
background-color: rgba(255,255,255,0.5);
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: scale(0.5, 1);
transform: scale(0.5, 1);
}
.button6:hover::before{
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
切圖網(wǎng)（qietu.com）是首家專門從事web前端開發(fā)的公司，專注we前端開發(fā)，響應(yīng)式布局，webapp手機(jī)端網(wǎng)頁制作，微信html5頁面制作，bootstrap布局等，關(guān)注用戶體驗(yàn)。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
