當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS设置无需表格的菜单

發布時間：2025/3/20 CSS 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS设置无需表格的菜单小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS設置無需表格的菜單

? ? ? ? ? 項目列表的符號可以設置list-style-type屬性值為none，然后，制作各種各樣的菜單和導航條，來顯示項目的列表。

? ? ? ? ??首先，建立一個HTML結構，將菜單的各個項用項目列表<ul>表示，同時頁面的背景顏色。

<span style="font-size:24px;"><html><head><title>無需表單的菜單</title><style></style></head> <body><divid="navigation"><ul><li><ahref="#">Home</a></li><li><ahref="#">My Blog</a></li><li><ahref="#">Friends</a></li><li><ahref="#">Next Station</a></li><li><ahref="#">Contact Me</a></li></ul></div></body> </html></span> ? ? ? ? ??設置整個<div>塊的寬度為固定像素，設置文字的字體，設置項目列表<ul>的屬性，并將項目符號設置為不顯示。

<span style="font-size:24px;">#navigation{width:200px;font-family:Arial;}#navigationul{list-style-type:none;margin:0px;padding:0px;}</span> ? ? ? ? ??此時，項目類別就顯示為普通的超鏈接列表的樣式。

? ? ? ? ??然后，為<li>標記添加下劃線，分割各個超鏈接，并且，對超鏈接<a>標記進行整體設置。

<span style="font-size:24px;">#navigation li{border-bottom:1pxsolid #ed9f9f;}#navigationli a{display:block;padding:5px5px 5px 0.5em;text-decoration:none;border-left:12pxsolid #711515;border-right:1pxsolid #711515;}</span> ? ? ? ? ??這里需要說明，display：block，該語句將超鏈接設置成了塊元素，當鼠標進入該塊的任何部分時，都會被激活，而不是僅僅在文字上方時才被激活。

? ? ? ? ??最后，設置超鏈接的3個偽屬性，實現動態菜單的效果，代碼如下：

<span style="font-size:24px;">#navigation li a:link,#anvigation li a:visited{background-color:#c11136;color:#ffffff;}#navigationli a:hover{background-color:#990020;color:#ffff00;}</span> ? ? ? ? ??完成制作，并且在IE和Firefox中顯示的效果一致，通過鼠標指針經過時，改變背景色和改變文字顏色來實現動態菜單的效果。

<span style="font-size:24px;"><html><head><title>無需表單的菜單</title><style></style></head> <body><divid="navigation"><ul><li><ahref="#">Home</a></li><li><ahref="#">My Blog</a></li><li><ahref="#">Friends</a></li><li><ahref="#">Next Station</a></li><li><ahref="#">Contact Me</a></li></ul></div></body> </html></span>

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的CSS设置无需表格的菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。