CSS中的Header指的是網頁的頭部區(qū)域,通常包含網站的logo,導航欄,搜索框等。在CSS中,我們可以通過選擇器來對Header進行樣式的設置。
header{ background-color: #333; /*背景顏色*/ color: #fff; /*字體顏色*/ padding: 20px; /*內邊距*/ text-align: center; /*文字居中對齊*/ border-bottom: 1px solid #ccc; /*下邊框*/ }
可以看到,我們設置了Header的背景顏色為#333,字體顏色為#fff,內邊距為20px,文字居中對齊,下邊框為1px寬的灰色實線。這些樣式可以根據實際需求進行調整。
另外,Header中的內容也需要進行樣式的設置,比如Logo和導航欄的樣式。我們可以使用CSS選擇器和樣式進行設置。
header .logo{ width: 100px; /*Logo的寬度*/ height: 100px; /*Logo的高度*/ float: left; /*左浮動*/ margin-right: 20px; /*右邊距*/ } header nav{ float: right; /*右浮動*/ } header nav ul{ list-style: none; /*去掉默認列表樣式*/ margin: 0; padding:0; } header nav ul li{ display: inline-block; /*行內塊元素*/ margin-right: 20px; /*右邊距*/ } header nav ul li a{ color: #fff; text-decoration: none; /*去掉下劃線*/ font-size: 16px; /*字體大小*/ }
上述代碼中,我們使用了class選擇器和元素選擇器來對Header中的Logo和導航欄進行樣式設置。對于Logo的設置,我們將其設置為左浮動,寬度和高度為100px,右邊距為20px。對于導航欄的設置,我們將其設置為右浮動,同時對ul和li元素進行了樣式設置,使其排列在一行并且去掉了默認的列表樣式,對于a標簽,我們設置了字體顏色、文字裝飾和字體大小等屬性。
上一篇css中flex右對齊
下一篇css中font簡寫