純CSS制作菜單欄當(dāng)鼠標(biāo)經(jīng)過時(shí)會(huì)變色的
發(fā)布時(shí)間：2014-04-14 15:24:05 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了使用CSS實(shí)現(xiàn)菜單欄的制作當(dāng)鼠標(biāo)經(jīng)過時(shí)有變色效果，個(gè)人感覺還是個(gè)不錯(cuò)的例子，希望對(duì)初學(xué)者有所幫助
CSS樣式為：
<style type="text/css">
#navigation
{
width:200px;
font-family:Arial;
}
#navigation ul
{
list-style-type:none; /* 不顯示項(xiàng)目符號(hào)*/
margin:0px;
padding:0px;
text-decoration:none;
}
#navigation li
{
border-bottom:1px solid #ED9F9F; /* 添加標(biāo)簽<li>的下劃線*/
}
#navigation li a
{
display:block; /* 區(qū)塊顯示*/
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左邊的粗紅邊*/
border-right:1px solid #711515; /* 右側(cè)陰影*/
}
#navigation li a:link,#navigation li a:visited /* 超鏈接正常狀態(tài)、被訪問過的狀態(tài)*/
{
background-color:#c11136; /* 設(shè)置背景色*/
color:#FFFFFF; /* 設(shè)置文字顏色*/
}
#navigation li a:hover /*鼠標(biāo)經(jīng)過時(shí)*/
{
background-color:#990020; /* 改變背景色*/
color:#ffff00; /* 改變文字顏色*/
}
</style>
HTML前臺(tái)代碼：
<body>
<form id="form1" runat="server">
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Weather</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</form>
</body>
初始效果：
鼠標(biāo)經(jīng)過效果：
復(fù)制代碼
代碼如下:<style type="text/css">
#navigation
{
width:200px;
font-family:Arial;
}
#navigation ul
{
list-style-type:none; /* 不顯示項(xiàng)目符號(hào)*/
margin:0px;
padding:0px;
text-decoration:none;
}
#navigation li
{
border-bottom:1px solid #ED9F9F; /* 添加標(biāo)簽<li>的下劃線*/
}
#navigation li a
{
display:block; /* 區(qū)塊顯示*/
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左邊的粗紅邊*/
border-right:1px solid #711515; /* 右側(cè)陰影*/
}
#navigation li a:link,#navigation li a:visited /* 超鏈接正常狀態(tài)、被訪問過的狀態(tài)*/
{
background-color:#c11136; /* 設(shè)置背景色*/
color:#FFFFFF; /* 設(shè)置文字顏色*/
}
#navigation li a:hover /*鼠標(biāo)經(jīng)過時(shí)*/
{
background-color:#990020; /* 改變背景色*/
color:#ffff00; /* 改變文字顏色*/
}
</style>
HTML前臺(tái)代碼：
復(fù)制代碼
代碼如下:<body>
<form id="form1" runat="server">
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Weather</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</form>
</body>
初始效果：
鼠標(biāo)經(jīng)過效果：
相關(guān)文章
如何通過 display:olck/none 完成一個(gè)菜單欄
這篇文章主要介紹了如何通過 display:olck/none 完成一個(gè)菜單欄,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-18
使用layui實(shí)現(xiàn)左側(cè)菜單欄及動(dòng)態(tài)操作tab項(xiàng)的方法
這篇文章主要介紹了使用layui實(shí)現(xiàn)左側(cè)菜單欄及動(dòng)態(tài)操作tab項(xiàng)的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參2020-11-10
Html+Css+Jquery實(shí)現(xiàn)左側(cè)滑動(dòng)拉伸導(dǎo)航菜單欄的示例代碼
這篇文章主要介紹了Html+Css+Jquery實(shí)現(xiàn)左側(cè)滑動(dòng)拉伸導(dǎo)航菜單欄的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們2020-03-17
使用HTML+CSS實(shí)現(xiàn)鼠標(biāo)劃過的二級(jí)菜單欄的示例
本篇文章主要介紹了使用HTML+CSS實(shí)現(xiàn)鼠標(biāo)劃過的二級(jí)菜單欄的示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-14
詳解css3 Transition屬性（平滑過渡菜單欄案例）
這篇文章主要介紹了詳解css3 Transition屬性（平滑過渡菜單欄案例）的相關(guān)資料,需要的朋友可以參考下2017-09-05- 本文主要介紹了菜單欄 “三” 變形為“X”css3過渡動(dòng)畫的實(shí)現(xiàn)方法。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-28
利用CSS實(shí)現(xiàn)幾款不錯(cuò)的菜單欄實(shí)例代碼
這篇文章主要介紹了利用CSS實(shí)現(xiàn)的幾款不錯(cuò)的菜單欄實(shí)例代碼，文中包含滑動(dòng)菜單、左側(cè)帶圖標(biāo)多級(jí)下拉菜單、立體動(dòng)感菜單、可同時(shí)折疊的手風(fēng)琴菜單、鼠標(biāo)滑動(dòng)展開二級(jí)菜單以2017-02-16CSS仿網(wǎng)易首頁(yè)的頭部菜單欄按鈕和三角形制作方法
這篇文章主要介紹了CSS仿網(wǎng)易首頁(yè)的頭部菜單欄按鈕和三角形制作方法的相關(guān)資料,需要的朋友可以參考下2016-08-15
利用html+css實(shí)現(xiàn)菜單欄緩慢下拉效果的示例代碼
這篇文章主要介紹了利用html+css實(shí)現(xiàn)菜單欄緩慢下拉效果的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2021-03-22
