CSS设置无需表格的菜单
生活随笔
收集整理的這篇文章主要介紹了
CSS设置无需表格的菜单
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
CSS設(shè)置無需表格的菜單
? ? ? ? ? 項(xiàng)目列表的符號(hào)可以設(shè)置list-style-type屬性值為none，然后，制作各種各樣的菜單和導(dǎo)航條，來顯示項(xiàng)目的列表。
? ? ? ? ??首先，建立一個(gè)HTML結(jié)構(gòu)，將菜單的各個(gè)項(xiàng)用項(xiàng)目列表<ul>表示，同時(shí)頁面的背景顏色。
<span style="font-size:24px;"><html><head><title>無需表單的菜單</title><style><!--body{background-color:#ffdee0;}--></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> ? ? ? ? ??設(shè)置整個(gè)<div>塊的寬度為固定像素，設(shè)置文字的字體，設(shè)置項(xiàng)目列表<ul>的屬性，并將項(xiàng)目符號(hào)設(shè)置為不顯示。 <span style="font-size:24px;">#navigation{width:200px;font-family:Arial;}#navigationul{list-style-type:none;margin:0px;padding:0px;}</span> ? ? ? ? ??此時(shí)，項(xiàng)目類別就顯示為普通的超鏈接列表的樣式。? ? ? ? ??然后，為<li>標(biāo)記添加下劃線，分割各個(gè)超鏈接，并且，對(duì)超鏈接<a>標(biāo)記進(jìn)行整體設(shè)置。
<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，該語句將超鏈接設(shè)置成了塊元素，當(dāng)鼠標(biāo)進(jìn)入該塊的任何部分時(shí)，都會(huì)被激活，而不是僅僅在文字上方時(shí)才被激活。? ? ? ? ??最后，設(shè)置超鏈接的3個(gè)偽屬性，實(shí)現(xiàn)動(dòng)態(tài)菜單的效果，代碼如下：
<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中顯示的效果一致，通過鼠標(biāo)指針經(jīng)過時(shí)，改變背景色和改變文字顏色來實(shí)現(xiàn)動(dòng)態(tài)菜單的效果。 <span style="font-size:24px;"><html><head><title>無需表單的菜單</title><style><!--body{background-color:#ffdee0;}#navigation{width:200px;font-family:Arial;}#navigationul{list-style-type:none;margin:0px;padding:0px;}#navigationli{border-bottom:1pxsolid #ed9f9f;}#navigationli a{display:block;padding:5px5px 5px 0.5em;text-decoration:none;border-left:12pxsolid #711515;border-right:1pxsolid #711515;}#navigationli a:link,#anvigation li a:visited{background-color:#c11136;color:#ffffff;}#navigationli a:hover{background-color:#990020;color:#ffff00;}--></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>《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀
總結(jié)
以上是生活随笔為你收集整理的CSS设置无需表格的菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS设置页面背景色
- 下一篇： CSS设置七彩的下拉菜单