CSS3是一個強大的Web技術,它提供了各種新的特性,其中包括可以創建漂亮的豎向導航菜單的能力。
要創建這樣的豎向導航菜單,我們需要使用CSS3中的一些新特性,如flexbox和導航鏈接的樣式化。
.nav { display: flex; flex-direction: column; justify-content: space-evenly; height: 100vh; width: 200px; background-color: #333; } .nav a { text-decoration: none; color: #fff; padding: 10px; text-align: center; font-size: 18px; font-weight: bold; } .nav a:hover { background-color: #444; }
在這個CSS代碼中,我們首先使用了Flexbox將所有的導航鏈接垂直排列。我們還使用了“justify-content: space-evenly”的屬性,以便在頂部和底部留出一些空間。
我們也給導航鏈接應用樣式,包括一些常規的樣式,如字體大小和顏色,以及一個簡單的鼠標懸停效果。
當你嘗試使用這個CSS代碼來創建你自己的豎向導航菜單時,請記住,你需要改變其中的鏈接內容和鏈接目標,以適應你自己的網站和需求。