利用html和CSS3實現導覽列

最後更新：2018-06-20 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本篇文章給大家分享基於html和CSS3製作酷炫的導覽列，效果非常美觀，需要的朋友可以從參考下

主要亮點:

1 ul 水平顯示

2 li 去掉圓點

3 li中字型水平、豎直置中

4 li控制邊框樣式

5 使用html + css3 漸層畫圖製作背景圖片

6 更改顏色透明度

7 p製作邊框陰影

先看:

<!doctype html>     html lang="en">     <head>      <meta charset="UTF-8"> <!----編碼----->      <meta name="Generator" content="EditPlus">      <meta name="Author" content="黃濤">      <meta name="Keywords" content="關鍵字，搜尋引擎">      <meta name="Description" content="描述語言">      <title>案例</title>        <style type="text/css">            *{ margin:0;padding:0; }            body{background:url("images/bg_title.jpg") repeat-x,url("images/bg.jpg");}            #Logo{                width:895px;height:45px;                /*margin:上下 左右*/                margin:50px auto;                border-radius:10px;                /*html + css3 漸層畫圖 */                    background-image:-webkit-linear-gradient(rgba(41,41,41,0.75) 0% ,rgba(54,54,54,0.72) 50%,rgba(24,23,23,0.94) 51%);                box-shadow:1px 1px 33px #fff;/*設計陰影的*/            }            #Logo ul li            {                width:127px; height:45px;                list-style:none;/*去掉圓點*/                float:left;/*水平顯示*/                color:white;/* #fff */                font-size:18px;                font-family:"微軟雅黑";                text-align:center;                line-height:45px;/* 行高跟 高度一致時，豎直置中*/                border-right:1px solid #000;/*右邊框*/            }            #Logo ul li a            {                color:white;/* #fff */                font-size:18px;                font-family:"微軟雅黑";                text-decoration:none;            }            #Logo ul li:hover            {                background:rgba(10,5,5,0.45);            }            #Logo ul li.first:hover            {                border-radius:10px 0px 0px 10px;/*左上 左下 圓弧顯示 */            }            #Logo ul li.last:hover            {                border-radius:0px 10px 10px 0px;/*右上 右下 圓弧顯示 */            }            #Logo ul li ul li             {                border:none;                border-top:1px solid #989898;                background:rgba(10,5,5,0.45);/*顏色透明度 */                border-radius:10px;            }            #Logo ul li ul            {                display:none;/*不顯示*/            }            #Logo ul li ul li:hover            {                background:rgba(10,5,5,0.8);/*顏色透明度 */                border-radius:10px;            }            #Logo ul li:hover ul            {                display:block;                -webkit-animation:roll 1s ease;/*roll 旋轉名稱，1s旋轉效果 */            }            @-webkit-keyframes roll /*roll旋轉名稱與上面一致*/            {                0% {-webkit-transform:rotate(0deg);}                100% {-webkit-transform:rotate(360deg);}            }        </style>     </head>     <body>        <p id="Logo">            <ul>                <li class="first">                     <a href="#">網址<a>                    <ul>                        <li>                            <a href="http://www.baidu.com">百度</a>                        </li>                        <li>                            <a href="http://www.sina.com">新浪</a>                        </li>                    </ul>                </li>                <li>                     <a href="#">新聞<a>                </li>                <li>                     <a href="#">視頻<a>                </li>                <li>                     <a href="#">音樂<a>                </li>                <li>                     <a href="#">地圖<a>                </li>                <li>                     <a href="#">問問<a>                </li>                <li class="last" style="border:none;">                     <a href="#">關於<a>                </li>            </ul>        </p>     </body>     /html>

代碼超簡單，希望對大家學習製作html和css3製作超酷導覽列有所協助。

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More