欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純CSS制作菜單欄當(dāng)鼠標(biāo)經(jīng)過時會變色的

  發(fā)布時間：2014-04-14 15:24:05   作者：佚名   我要評論
這篇文章主要介紹了使用CSS實現(xiàn)菜單欄的制作當(dāng)鼠標(biāo)經(jīng)過時有變色效果，個人感覺還是個不錯的例子，希望對初學(xué)者有所幫助
CSS樣式為：

復(fù)制代碼
代碼如下:

<style type="text/css">
#navigation
{
width:200px;
font-family:Arial;
}
#navigation ul
{
list-style-type:none; /* 不顯示項目符號*/
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)過時*/
{
background-color:#990020; /* 改變背景色*/
color:#ffff00; /* 改變文字顏色*/
}
</style>

HTML前臺代碼：

復(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)文章

最新評論