在網站制作中,導航菜單是非常重要的一部分,它不僅能夠方便用戶的導航,還能夠為網站增添一份美感。下面是一些css技巧,可以用來制作漂亮的導航菜單。
nav { background-color: #F8F8F8; border-radius: 15px; box-shadow: 0px 0px 10px rgba(0,0,0,.15); } nav ul { margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; } nav li { padding: 10px; margin: 5px; font-size: 18px; font-weight: bold; text-transform: uppercase; border-radius: 5px; transition: all .2s ease-out; } nav li:hover { background-color: #EFEFEF; color: #333; cursor: pointer; }
以上代碼可以用于創建一個簡單的水平導航欄。首先,我們設置了nav元素的樣式,包括背景顏色、圓角、陰影等。然后,我們對ul元素進行了一些基本的樣式設置,包括去除默認的列表樣式、設為flex可伸縮布局并使它們之間水平對齊。接下來,我們設置了每個li元素的樣式,包括填充、外邊距、字體大小、字體粗細、文本轉換、圓角等。最后,我們添加了一個hover狀態,當鼠標滑過li元素時,它的背景和字體顏色會改變,并且添加了一個指針光標,加強互動效果。
除此之外,我們還可以添加一些其他的樣式,例如下劃線、上下拉伸效果、呼吸動畫等等。需要注意的是,導航菜單的樣式應該與整個網站的風格相匹配,不要過度花哨或太過簡單,從而產生不好的視覺效果。