[看書][CSS精粹（第2版）]第三章 CSS和圖像 & HTML網(wǎng)頁布局

發(fā)布時間：2020-07-04 20:16:03 來源：網(wǎng)絡(luò) 閱讀：446 作者：ying0827 欄目：開發(fā)技術(shù)

本章主要講述作為背景圖像方面的技巧。

1.邊框（添加邊框樣式、去除邊框）；

2.為頁面設(shè)置背景圖像，位置設(shè)定，固定背景圖像；

3.為任意元素設(shè)置背景圖像；

4.文字放在圖像的上面（作為背景圖像）；

5.為文檔添加多個背景圖像（本例利用html和body元素產(chǎn)生多重背景圖像的效果）；

6.在頁面中使用透明效果（使用PNG格式圖像）。

利用網(wǎng)絡(luò)搜索補充學習了padding的4個方向順序（上右下左順時針），流式布局（看網(wǎng)上的解釋結(jié)合書里的描述，大概是指頁內(nèi)布局元素采用百分數(shù)指定位置和大小）。

[個人理解]

自適應(yīng)布局：容器元素會根據(jù)屏幕分辨率調(diào)整位置，容器內(nèi)的文字不會調(diào)整位置（一定范圍內(nèi)），容器元素的大小在一定程度內(nèi)不會變；

流式布局：容器元素會根據(jù)屏幕分辨率調(diào)整容器的大小，各容器的位置按照比例分配，相對位置不會變；

響應(yīng)式布局：容器元素會根據(jù)屏幕分辨率調(diào)整位置，各容器的大小根據(jù)不同屏幕分辨率按照不同比例分配；

靜態(tài)布局：容器元素的大小和位置固定。

較專業(yè)的說明：http://blog.csdn.net/iefreer/article/details/40155459

不同效果對比可參考：http://wow.techbrood.com/fiddle/1753

向AI問一下細節(jié)

猜你喜歡