用CSS實作類似導航翻轉功能例子

用CSS實作類似導航翻轉功能例子

今天寫了一個css實作類化導航翻轉功能例子，想拿出來和大家分享一下；

首先看看它的效果：

<a href="http://blog.51cto.com/attachment/201104/192829244.png" target="_blank"></a>

滑鼠移上去的時候：

背景和字型的顔色都變了，效果如下：

<a href="http://blog.51cto.com/attachment/201104/193018239.png" target="_blank"></a>

首先寫一個HTML文檔，内容如下：

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;

&lt;title&gt;導航翻轉功&lt;/title&gt;

&lt;link href="test2.css" rel="stylesheet" type="text/css" /&gt;

&lt;/head&gt;

&lt;body&gt;

      &lt;ul&gt;

        &lt;li id="blogger"&gt;&lt;a href="www.baidu.com" &gt;&lt;strong&gt;my&lt;/strong&gt; blogger&lt;/a&gt;&lt;/li&gt;

        &lt;li id="google"&gt;&lt;a href="www.google.com"&gt;&lt;strong&gt;my&lt;/strong&gt; google&lt;/a&gt;&lt;/li&gt;

        &lt;li id="sogou"&gt;&lt;a href="www.sogou.com"&gt;&lt;strong&gt;my&lt;/strong&gt; sogou&lt;/a&gt;&lt;/li&gt;

 &lt;li id="cto"&gt;&lt;a href="www.51cto.com"&gt;&lt;strong&gt;my&lt;/strong&gt; 51cto&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

/*id屬性的名稱的命名規則，是不能數字開頭。*/

&lt;/body&gt;

&lt;/html&gt;

下面來開始寫CSS代碼：

1.       去掉無序清單前面的加點預設圓點和内外邊距。

ul{

list-style:none;

margin:0;

padding:0;

}

2.       在li中使用float:left使得li水準排列。

ul li{

float:left;

3.       設定li中a标記的連結字型樣式，并設定display:block;同時去年下劃線。

ul li a{

color:#77;

display:block;

padding:90px 10px 5px;

text-align:center;

text-decoration:none;

4.       給a标記添加背景圖檔。

ul li#blogger a{

background:url(face01.png) transparent no-repeat top center;

ul li#google a{

background:url(face02.png) transparent no-repeat top center;;

ul li#sogou a{

background:url(face03.png) transparent no-repeat top center;

ul li#cto a{

background:url(face04.png) transparent no-repeat top center;

5.       設定滑鼠經過時，連結字型的顔色。

ul li#blogger a:hover,

ul li#google a:hover,

ul li#sogou a:hover,

ul li#cto a:hover{

background-color:#FCC;

color:#000;

Ok,完成,測試一下效果。

本文轉自gauyanm 51CTO部落格，原文連結：http://blog.51cto.com/gauyanm/552119，如需轉載請自行聯系原作者