【實驗題目】HTML&CSS實驗(6)
【實驗目的】學習文本格式化和盒模型的樣式定義。
----------------------個人作業，如果有后輩的作業習題一致，可以參考學習，一起交流，請勿直接copy
【實驗內容】
1、把hide.html中的p元素(id=test)分別加上display:none、visibility:hidden后，用瀏覽器運行並分別保存網頁（hide1.html，hide2.html）和截屏。
（hide1.html）截屏：
（hide2.html）截屏：
說明上面兩個屬性的區別：
l display:none 屬性值不顯示在頁面上，同時也不占用空間，仿佛在頁面和排版中消失了；
l visibility:hidden 屬性則僅僅為不顯示在頁面上，但是原有的位置和空間依舊保存，它在那里，但是看不見了。
2、設置p和div的樣式得到類似下圖的兩個網頁（參考網頁：background.html; 圖像:bk1.jpg,bk2.jpg）：
完成后保存網頁（background1.html和background2.html）並截屏：
樣式（background1.html）：
樣式（background2.html）：
3、自己設計一個網頁 (box.html)，在設置寬度的情況下，分別設置box-sizing為兩個取值(content-box，border-box)，觀察它們引起的變化。
截屏：
設置為content-box時，盒模型的寬度會略寬於border-box；
box.html文件內容(box-sizing只要取其中一個值)：
4、設計一個類似下面的頁面(wgw.html，logo.jpg，main.jpg，wgw.jpg)：
標題：宋體 正文：隸書
滾動后logo部分不變：
瀏覽器變窄變寬時中間的內容始終對中（中間部分采用定寬的方法）。詩詞圖像使用img元素顯示，並用opacity（取值0~1）的CSS屬性模糊化。
要求只修改樣式（給出的部分內容僅供參考），不要修改body的內容。
完成后保存源程序(wgw.html)並截屏:
樣式：
//fixed默認不設置（top：0；left：0）時，會以之后設置的img元素的position的top為標准
5、設計一個和以下圖片類似的網頁（上、下、略縮窄、縮窄），用bk.png做背景得到三列式，給出的lv.html僅做參考，可以自由修改。
完成后截屏（上、下、略縮窄、縮窄）：
樣式表：
【完成情況】
是否完成了這些步驟？(√完成 ×未做或未完成)
1 [√] 2 [√] 3 [√] 4 [√ ] 5[√ ]
【實驗體會】
寫出實驗過程中遇到的問題，解決方法和自己的思考；並簡述實驗體會（如果有的話）。
在完成最后一題時，調整#main部分的width時，按照比例計算，總是不按照預期的排版出現，並沒有實現float的排版，將width比例調整為極限“1%”時，出現了很窄的一列，如下圖：
通過在瀏覽器檢查元素，發現並沒有設置margin，但是卻出現了這樣的顯示，仔細查找，發現是在有內聯樣式表，設置了margin；刪除后，即可正常排版。
l 關於三列式排版，兩邊背景隨中間內容延長，暫時並沒有找到十分可行的辦法，按照老師所給的方法，嘗試了較為簡單的設置height：100%和margin:-10000px;padding:10000px;overflow:hidden，效果只能隨兩側內容的延長延伸背景圖；
暫時設置了兩邊較長的height，設置固定的兩側保證不會短於中間部分，基本可以實現理想中的功能。但是並沒有根本解決問題。
l 為了保持響應式設計，大多采用了百分比形式的布局，同樣的，因此在不同縮放比例下顯示會有些微的差別，本次實驗所使用的瀏覽器為edge和chrome（以縮放比例為100%為准）。
l （頭部的“注冊、退出、登錄”等）單純設置float：right，並不會實現預期中的排版，需要額外使用position，最好使用right這一屬性。