色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3做標題導航菜單

傅智翔2年前9瀏覽0評論

CSS3做標題導航菜單是前端開發中常見的技巧之一。通過使用CSS3的眾多新特性和選擇器,我們可以創建出非常漂亮、功能強大的標題導航菜單。

/* HTML代碼 */
<nav class="menu">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">分類</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
<li><a href="#">幫助中心</a></li>
</ul>
</nav>
/* CSS3代碼 */
.menu {
background-color: #333;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: center;
}
.menu li {
margin: 0;
padding: 0;
}
.menu li a {
display: block;
padding: 20px 30px;
color: #fff;
text-decoration: none;
transition: background-color 0.3s ease;
}
.menu li a:hover {
background-color: #444;
}

在上述代碼中,我們首先創建了一個nav元素,并使用class屬性設置了其樣式為menu。在nav元素中,我們創建了一個ul元素作為菜單項的容器,并使用flexbox實現居中對齊。而每個菜單項則是一個li元素,其中包含一個a元素作為鏈接。在樣式中,我們設置了菜單項的背景色和鏈接的顏色,并使用transition屬性實現鼠標懸停時顏色的漸變。最終,我們得到了一個簡潔、漂亮的標題導航菜單。