務8：全屏模式的切換。

這張就是第八，第八小姐就是講關于全屏模式的切換?；氐巾撁?，希望有個按鈕，一點全屏娛樂模式，這一點就切換回來?？赡芪覀€人不太喜歡這種模式，但有的人會用，還是把它設計進去。

然后就在這個地方加一個圖標，有空再找一下。找了一個圖標，就找這個。jump through screen one，這有了嗎？有了，還挺好。然后就稍小了一點，再給它大一點，size，就不要說是二十，可以。點它，現在沒效果，來做這個效果。

首先給它定一個變量叫is war screen，是不是全屏的？它肯定是響應數據了，i e f，它不是默認，當然響應數據這邊可以給它添類型，比如它是birch，填birch。如果它不是，還找一個相對的，跟它相反的按鈕，收回來的按鈕，就用這個。

off for screen one，就這個，給它來復制一下，把它放松，就是衣服regan in the first three，如果它真的，就顯示上面的，否則就顯示下面的。來看一下，這邊有一個方法，就這樣可以，可能還做其他的，記得就給它定一個top切換螺絲功能，它是一個，然后再調整這個方法就行了。

就要投screen，點，沒效果，為啥沒效果？是不是點錯了？這邊點這上面，再說下面一個，放到槍上，點，看有切換效果了。怎么樣給它切換？這個是節食里面固定的方法，如果它的值，直接給它切換，就是document，the element，點a request，press greet plug，就是全屏切換。

這里切換了，這點沒效果只按a xe，所以這邊也不對，所以希望它變成這個時候就把它縮回來，這邊就要做一個判斷了，就是來判斷它是不是已經縮放了，如果它已經是展開了，就把它縮回來，也是，這個就退出，否則就把它刪遠，就簡單的刪遠，刪除就可以了。

試一下，點，點，回來了，點，點，再配合原來的一點，就全屏顯示了，舒服了，點回來。這一章就講完了，就把頁面布局都弄好了，包括動態生成菜單頁，瀏覽歷史頁，面包穴導航，把整個布局就全做好了。

下一張開始做具體業務了，首先叫做用戶的登錄，注冊新用戶，還有一個重置密碼。這節課就講到這里，拜拜。

家好，我是大澈！

本文約 700+ 字，整篇閱讀約需 1 分鐘。

每日分享一段優質代碼片段。

今天分享一段 CSS 代碼片段，使用 CSS 設置網頁全屏背景圖片，很簡單。

老規矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區留下你的見解！

html {
background: url('images/bg.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover; /* 適用于舊版 WebKit 瀏覽器 */
-moz-background-size: cover; /* 適用于舊版 Firefox 瀏覽器 */
-o-background-size: cover; /* 適用于舊版 Opera 瀏覽器 */
}

分享原因

這段代碼展示了如何使用 CSS 設置網頁全屏背景圖片，使其在不同瀏覽器中都能完美適應屏幕尺寸。

這對于創建具有視覺吸引力且兼容性良好的網頁非常重要。

代碼解析

1. background: url('images/bg.jpg') no-repeat center center fixed;

background：簡寫屬性，用于設置所有背景屬性。

url('images/bg.jpg')：指定背景圖像的路徑。

no-repeat：背景圖像不重復顯示。

center center：背景圖像在水平方向和垂直方向都居中顯示。

fixed：背景圖像固定在視口中，即使頁面滾動，背景圖像也不會移動。

2. background-size: cover;

background-size: cover：使背景圖像按比例縮放，以完全覆蓋背景區域。這意味著圖像可能會被裁剪以適應容器。

3. 瀏覽器前綴的使用

-webkit-background-size：適用于舊版 WebKit 瀏覽器（如舊版 Safari 和 Chrome）。

-moz-background-size：適用于舊版 Firefox 瀏覽器。

-o-background-size：適用于舊版 Opera 瀏覽器。

這些瀏覽器前綴用于處理舊版瀏覽器的兼容性問題。雖然現代瀏覽器大多已經支持標準的 background-size 屬性，但在代碼中加入這些前綴可以確保在老舊瀏覽器中也能正常顯示背景圖片。

- end -