超大背景圖片的自適應(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如果沒(méi)有進(jìn)行再次設(shè)置侧戴,就默認(rèn)繼承父布局的值估盘。
布局內(nèi)容所有居中
只需要在其css中加入
text-align:center;
就能使整個(gè)布局進(jìn)行居中车柠,不僅僅是文字居中剔氏,圖片等也進(jìn)行居中,適合一些都是布局全部居中的地方堪遂。
使用無(wú)襯線字體
無(wú)襯線字體相對(duì)比較美觀介蛉,適宜閱讀
font-family:sans-serif;
使用這種方法在各種設(shè)備中都為為之選擇合適的字體。
大標(biāo)題使用全大寫(英文)
此時(shí)應(yīng)該采用css中的大寫方式
text-transform:uppercase溶褪;
可以節(jié)省一部分時(shí)間 對(duì)于英文不太熟悉的 閱讀起來(lái)也相對(duì)方便币旧。
制作透明按鈕
一般我們都是采用對(duì)a標(biāo)簽加上邊框和圓角,在css中非常好實(shí)現(xiàn)猿妈,這種透明的按鈕在
扁平化中使用比較常見吹菱,一般用于有背景圖的中的按鈕 邊框顏色多采用白色。
border:1px solid #fff;
border-radius:20px;
其中邊框也可以使用其他的方式實(shí)現(xiàn) 比如說(shuō)陰影啊彭则,會(huì)在我后期的筆記中寫入
border-radius:20px是給邊框添加圓角的像素值鳍刷。
添加50%的圓角的時(shí)候 就是一個(gè)圓形。
頁(yè)面移動(dòng)化的margin處理
可以添加一些左右相同margin值使得網(wǎng)頁(yè)在移動(dòng)頁(yè)面中也能具有很好的顯示效果俯抖。
總結(jié)
每次寫都寫6個(gè)技巧 還不是輕松美滋滋输瓜。