今天我要向大家介紹一種僅使用CSS制作的網頁模板,這種模板可以讓你在不使用JavaScript的情況下,輕松的實現各種網頁樣式。
/* 定義網頁樣式 */ /* 設置背景顏色 */ body { background-color: #f2f2f2; } /* 設置網頁標題樣式 */ h1 { font-size: 28px; color: #333; text-align: center; margin-top: 50px; } /* 設置菜單樣式 */ .nav { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; background-color: #fff; box-shadow: 0px 5px 10px rgba(0,0,0,0.1); } .nav li { margin: 0 20px; } .nav a { text-decoration: none; font-size: 16px; color: #333; padding: 10px; border-bottom: 2px solid transparent; transition: border-bottom 0.3s ease-in-out; } .nav a:hover { border-bottom: 2px solid #333; } /* 設置內容樣式 */ .content { max-width: 1000px; margin: 0 auto; padding: 50px; background-color: #fff; box-shadow: 0px 5px 10px rgba(0,0,0,0.1); } /* 設置頁腳樣式 */ .footer { text-align: center; margin-top: 50px; font-size: 14px; color: #999; }
以上就是這個模板的代碼,通過設置不同的CSS屬性,我們可以輕松的實現各種網頁樣式,比如背景顏色、標題樣式、菜單樣式、內容樣式和頁腳樣式等。
使用這種模板的好處是,不僅代碼量小,而且可以提高網頁的加載速度,因為減少了JavaScript腳本的使用。
最后,希望大家可以嘗試使用這種純CSS的網頁模板,讓你的網頁看起來更加美觀和簡潔。