超大背景圖片的自適應(yīng)

1.首先需要在父布局中添加高度

html body{
    height：100%
}

2.我們?cè)谄渲性O(shè)置 css

body{
     background:url(xxx.png) center center;
     background-size:cover;
} 

3.解釋
第一個(gè)center是圖片水平居中，第二center是圖片垂直居中
cover使整張圖片的大小正好覆蓋整個(gè)body的位置。
其中css中有繼承機(jī)制，當(dāng)html設(shè)置為100%時(shí)，body如果沒有進(jìn)行再次設(shè)置，就默認(rèn)繼承父布局的值。

布局內(nèi)容所有居中

只需要在其css中加入

text-align:center;

就能使整個(gè)布局進(jìn)行居中，不僅僅是文字居中，圖片等也進(jìn)行居中，適合一些都是布局全部居中的地方。

使用無襯線字體

無襯線字體相對(duì)比較美觀，適宜閱讀

font-family:sans-serif;

使用這種方法在各種設(shè)備中都為為之選擇合適的字體。

大標(biāo)題使用全大寫（英文）

此時(shí)應(yīng)該采用css中的大寫方式

text-transform：uppercase；

可以節(jié)省一部分時(shí)間 對(duì)于英文不太熟悉的 閱讀起來也相對(duì)方便。

制作透明按鈕

一般我們都是采用對(duì)a標(biāo)簽加上邊框和圓角，在css中非常好實(shí)現(xiàn)，這種透明的按鈕在
扁平化中使用比較常見，一般用于有背景圖的中的按鈕 邊框顏色多采用白色。

border：1px solid #fff;
border-radius:20px;

其中邊框也可以使用其他的方式實(shí)現(xiàn) 比如說陰影啊，會(huì)在我后期的筆記中寫入
border-radius:20px是給邊框添加圓角的像素值。

添加50%的圓角的時(shí)候 就是一個(gè)圓形。

頁面移動(dòng)化的margin處理

可以添加一些左右相同margin值使得網(wǎng)頁在移動(dòng)頁面中也能具有很好的顯示效果。

總結(jié)

每次寫都寫6個(gè)技巧 還不是輕松美滋滋。