CSS3實現絢麗的飄帶樣式菜單

　　CSS3的強大毋庸置疑，下面就介紹一個用CSS3中 transition 屬性實現的飄帶樣式菜單。

簡要說明：就是實現鼠標移動到每一欄時，當前欄凸起、變色，鼠標移開後恢復原狀。

1、效果圖

　　hover以前

　　　　　　　　

　　hover 時 

　　　　　　　

2、簡要佈局

　　這部分很簡潔，廢話很少說，直接上代碼，若是代碼看不懂，那說了也是白搭；

<div class='ribbon'>    //外部容器
        <a href='#'><span>Home</span></a>   //容器內部元素
        <a href='#'><span>About</span></a>
        <a href='#'><span>Services</span></a>
        <a href='#'><span>Contact</span></a>
    </div>

3、設計樣式

　　規劃總體（這個不是重點）

* {
            /* Basic CSS reset */
            margin:0;
            padding:0;
        }
        body {
            /* These styles have nothing to do with the ribbon */
            padding:35px 0 0;
            margin:auto;          //居中處理
            text-align:center;    //文本居中處理

}

　　設置外部容器（你看看就懂）

.ribbon {
            display:inline-block;
        }
        .ribbon:after, .ribbon:before {
            margin-top:0.5em;
            content: "";
            float:left;
            border:1.5em solid orange;
        }
        .ribbon:after {
            border-right-color:transparent;
        }
        .ribbon:before {
            border-left-color:transparent;
        }

　　設置容器內部細節（這是重點）

.ribbon a:link, .ribbon a:visited {
            color:#000;
            text-decoration:none;
            float:left;
            height:3.5em;
            overflow:hidden;
        }
        .ribbon span {
            background:orange;
            display:inline-block;
            line-height:3em;
            padding:0 1em;
            margin-top:0.5em;
            position:relative;
　　　　　　　　//處理CSS3 瀏覽器兼容問題
            -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
            -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
            -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
            -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
            transition: background-color 0.2s, margin-top 0.2s;
        }
        .ribbon a:hover span {
            background:#FFD204;
            margin-top:0;
        }
        .ribbon span:before {
            content: "";
            position:absolute;
            top:3em;
            left:0;
            border-right:0.5em solid #9B8651;
            border-bottom:0.5em solid orange;
        }
        .ribbon span:after {
            content: "";
            position:absolute;
            top:3em;
            right:0;
            border-left:0.5em solid #9B8651;
            border-bottom:0.5em solid orange;
        }

　　

　　:link 選擇器用於選取未被訪問的連接

　　:visited 選擇器用於選取已被訪問的連接

　　content 屬性與 :before 及 :after 僞元素配合使用，來插入生成內容

　　

　　上面這段代碼是關鍵，若有不懂部分，能夠在編輯器上調試，註釋有疑問的語句，保存，再刷新頁面看效果，這樣影響深入。