網頁CSS模板是網頁設計過程中非常有用的資源,它們有助于節省時間和努力,同時提供了現成的設計元素和布局。本文將介紹一個非常簡單但功能齊全的網頁CSS模板。
/* CSS reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Basic layout */ body { font-family: sans-serif; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } /* Header styles */ header { display: flex; justify-content: space-between; align-items: center; width: 90%; margin-bottom: 2rem; } nav { display: flex; justify-content: center; align-items: center; } nav ul { list-style: none; display: flex; } nav li { margin-right: 1rem; } nav a { color: #000; text-decoration: none; font-weight: bold; } /* Footer styles */ footer { background-color: #000; padding: 2rem; } footer p { color: #fff; text-align: center; } /* Main content styles */ main { width: 90%; } h1 { font-size: 3rem; margin-bottom: 2rem; } p { line-height: 1.5; margin-bottom: 1rem; } img { max-width: 100%; }
這個CSS模板非常簡單,但包括了一些基本的布局和樣式。它包括CSS reset以確保所有元素都具有一致的樣式;基本布局,用于居中頁面內容;頁面頭部樣式,包括導航欄;內容樣式,包括標題、段落和圖像;以及頁腳樣式。你可以自由地修改這些樣式,以滿足自己的設計需要。