騰訊網是中國最大的門戶網站之一,它的導航欄是網站風格的核心之一。下面是騰訊網使用 CSS 實現的導航欄樣式代碼。
/* 定義導航欄的樣式 */ #nav { width: 100%; height: 40px; background-color: #0072c6; font-size: 14px; font-family: 微軟雅黑; color: #fff; } /* 定義導航欄中每個菜單項的樣式 */ #nav li { list-style-type: none; display: inline-block; margin-right: 20px; margin-top: 10px; text-align: center; line-height: 30px; } /* 設置鼠標移動到導航欄上時的樣式 */ #nav li:hover { background-color: #05b7e2; cursor: pointer; } /* 定義導航欄中菜單項的鏈接樣式 */ #nav li a { text-decoration: none; color: #fff; } /* 設置當前頁面所在菜單項的樣式 */ .current { background-color: #05b7e2; }
上面的代碼主要使用了 CSS 的常用屬性和方法,比如選擇器、寬高、背景色、字體、顏色、鼠標樣式等等。它使用 ID 選擇器來選擇導航欄,使用標簽選擇器來選擇菜單項和超鏈接。
其中,導航欄的寬度設為 100%,高度設為 40px,背景色設為藍色,字體大小設為 14px,字體為微軟雅黑,字體顏色為白色。而每個菜單項的樣式都設為無列表樣式、行內塊狀,并設置右邊距和上邊距,并在鼠標移到菜單項上時指定背景色和鼠標樣式。鏈接樣式設置了無下劃線并定義字體顏色為白色,而當前頁所在菜單項則通過添加一個類名“current”來控制樣式。
騰訊網這樣的大型門戶網站,其 CSS 樣式設置精細,設計巧妙,能夠準確地展現出網站所要表達的主題和氛圍,給用戶帶來良好的視覺體驗和使用感受。
上一篇vue獲取整個頁面高度
下一篇ajax異步修改新聞狀態