CSS3 Header是一種優化網站頁面頭部設計的方法,可以讓網站的頭部更加美觀且可定制。下面是一個基本的CSS3 Header的示例:
header{ background-color: #333; color: #fff; padding: 10px; } h1{ font-size: 36px; font-weight: bold; margin: 0; padding: 0; } nav{ display: flex; justify-content: space-between; align-items: center; } ul{ list-style: none; margin: 0; padding: 0; display: flex; } li{ margin: 0 10px; } a{ color: #fff; text-decoration: none; font-size: 18px; font-weight: bold; }
在這個示例中,我們使用了header標簽來定義網站的頭部。我們設置了背景顏色為深灰色,字體顏色為白色,并設置了一定的內邊距(10像素)。接著我們使用了h1標簽來定義網站的標題,使用了一些樣式來調整標題的大小、粗細和外邊距。
緊接著,我們使用了nav標簽來定義網站的導航欄。我們使用了Flexbox布局來定義導航欄的布局,并設置了一些樣式來讓導航欄元素居中對齊,并在元素之間設置了一些間距。
最后,在導航欄元素中,我們使用了ul、li和a標簽來定義導航欄的列表和鏈接。我們將列表的樣式設置為無序列表,并去除了默認的內外邊距和列表標志。我們設置了鏈接的樣式,包括顏色、字體大小和粗細。
上一篇css3 ie支持不
下一篇css3 hr居中