CSS樣式可以幫助我們美化網站的外觀,其中頭部是網站最重要的部分之一。通過CSS樣式,我們可以輕松地為頭部添加各種元素,例如:導航欄、標志、搜索欄等等。以下是一個頭部的示例代碼:
/* 頭部 */ header { background-color: #333; color: #fff; padding: 20px; } /* 標志 */ .logo { font-size: 2rem; font-weight: bold; } /* 導航欄 */ nav { display: flex; justify-content: flex-end; align-items: center; } nav li { margin: 0 10px; list-style: none; } nav a { color: #fff; text-decoration: none; } nav a:hover { text-decoration: underline; } /* 搜索欄 */ .search-box { display: flex; justify-content: flex-end; align-items: center; margin-top: 10px; } .search-box input[type="text"] { padding: 5px; border-radius: 5px; border: none; } .search-box button { background-color: #fff; border: none; border-radius: 5px; margin-left: 5px; cursor: pointer; }
在這段代碼中,我們首先定義了一個header標簽,它的樣式包括背景色、文字顏色和內邊距。接下來是logo、nav和search-box這三個元素的樣式。其中,nav使用了flex布局,將其內部的li元素橫向排列。a標簽使用了:hover偽類,當鼠標懸停在其上時會添加下劃線。search-box使用了input和button標簽,分別定義了搜索框和搜索按鈕的樣式。
以上是一份用CSS樣式寫網站頭部的代碼,你可以根據自己的需求來調整樣式和元素。