超大背景圖片的自適應
1.首先需要在父布局中添加高度
html body{
height:100%
}
2.我們在其中設置 css
body{
background:url(xxx.png) center center;
background-size:cover;
}
3.解釋
第一個center是圖片水平居中,第二center是圖片垂直居中
cover使整張圖片的大小正好覆蓋整個body的位置。
其中css中有繼承機制,當html設置為100%時,body如果沒有進行再次設置,就默認繼承父布局的值。
布局內容所有居中
只需要在其css中加入
text-align:center;
就能使整個布局進行居中,不僅僅是文字居中,圖片等也進行居中,適合一些都是布局全部居中的地方。
使用無襯線字體
無襯線字體相對比較美觀,適宜閱讀
font-family:sans-serif;
使用這種方法在各種設備中都為為之選擇合適的字體。
大標題使用全大寫(英文)
此時應該采用css中的大寫方式
text-transform:uppercase;
可以節省一部分時間 對于英文不太熟悉的 閱讀起來也相對方便。
制作透明按鈕
一般我們都是采用對a標簽加上邊框和圓角,在css中非常好實現,這種透明的按鈕在
扁平化中使用比較常見,一般用于有背景圖的中的按鈕 邊框顏色多采用白色。
border:1px solid #fff;
border-radius:20px;
其中邊框也可以使用其他的方式實現 比如說陰影啊,會在我后期的筆記中寫入
border-radius:20px是給邊框添加圓角的像素值。
添加50%的圓角的時候 就是一個圓形。
頁面移動化的margin處理
可以添加一些左右相同margin值使得網頁在移動頁面中也能具有很好的顯示效果。
總結
每次寫都寫6個技巧 還不是輕松美滋滋。