<output id="jbxdv"></output>

      1. 如何設計多級菜單列表

        • 2019-09-10 10:43:32
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        多級下拉菜單在一些企業網站應用非常廣泛,它存在使用方便、占用空間小等特點。本節將介紹橫網頁設計中向導航菜單的二級菜單的制作方法,從而進一步說明列表在制作導航菜單上的應用。

        【操作步驟】

        第1步,啟動Dreamweaver,新建一個網頁,保存為index.html。

        第2步,構建網頁的基本結構。本例中由兩層嵌套的<ul>標簽定義了二級菜單。

        <div class="menu">    

        <ul>        

        <li><a href="#">文 件</a>            

        <ul>

        <li><a href="#">打 開</a></li>                

        <li><a href="#">保 存</a></li>                

        <li><a href="#">新 建</a></li>            

        </ul>        </li>        

        <li><a href="#">查 看</a>            

        <ul>                

        <li><a href="#">工具欄</a></li>                

        <li><a href="#">標 尺</a></li>                

        <li><a href="#">縮 放</a></li>            

        </ul>        

        </li>        

        <li><a href="#">修 改</a>            

        <ul>                

        <li><a href="#">屬 性</a></li>                

        <li><a href="#">樣 式</a></li>            

        </ul>        

        </li>        

        <li><a href="#"> 窗 口</a>            

        <ul>                

        <li><a href="#">歷史記錄</a></li>                

        <li><a href="#">顏 色</a></li>                

        <li><a href="#">時間軸</a></li>            

        </ul>        

        </li>    

        </ul>    

        <div class="clear"> </div>

        </div>

        第3步,在<head>標簽內添加<styletype="text/css">標簽,定義一個內部樣式表,然后輸入下面樣式,定義網頁的menu容器樣式,并定義一級菜單中列表樣式。

        .menu {/*menu樣式類*/    

        font-family:"黑體";      /*定義整個menu容器中的字體為黑體*/    

        width:440px;             /*menu容器寬度*/    

        margin:0;                /*定義四周補白為0*/}

        .menu ul {/*定義一級菜單中列表樣式*/    

        padding:0;               /*一級菜單中列表的內邊距為0*/    

        list-style-type: none;   /*不顯示項目符號*/}

        .menu ul li {    float:left;              /*使菜單項橫向顯示*/    

        position:relative;       /*定義一級菜單中列表的定位方式為相對定位*/}

        在以上代碼中,定義了一級菜單的樣式,其中<li>標簽中,通過float:left語句使原來豎向顯示的列表項橫向顯示,并用position:relative語句設置其position屬性為相對定位。

        第4步,設置一級菜單中的<a>標簽的樣式和<a>標簽在已訪問過時和鼠標懸停時的樣式。

        .menu ul li a, 

        .menu ul li a:visited {         /*定義一級菜單中a對象樣式及a對象在已訪問過時的樣式*/    

        display:block;                             /*定義為塊級元素*/    text-align:center;                         /*居中對齊*/

        text-decoration:none;                      /*不顯示下劃線*/   

         width:104px;                               /*定義菜單的寬度*/    

        height:30px;                               /*高寬*/    

        color:#fff;                                /*字體顏色*/    border:1px solid #666;                     /*定義邊框*/    

        background: #252525;                       /*背景顏色*/    

        line-height:30px;                          /*行間距*/   

         font-size:14px;                            /*字體大小*/}

        .menu ul li:hover a {/*鼠標懸停時<a>標簽樣式*/    

        color:#fff;                                /*鼠標懸停時改變字體顏色為#fff*/}

        在以上代碼中,首先定義了a為塊級元素,border: 1px solid #fff語句雖然定義了網站建設中菜單項的邊框樣式,但是由于border-width:1px 1px 0 0的作用,所以在這里只顯示上邊框和右邊框,下邊框和左邊框由于寬度為0,所以不顯示任何效果。在這里值得注意的是,既定義了height:30px,又定義了line-height: 30px,兩者的區別在于height定義的是整個a塊的高度,而line-height定義的是文字的行高,在這里,line-height還有一個作用就是一行30個像素,文字會相對于這30個像素垂直居中顯示。

        第5步,設置二級菜單樣式。

        .menu ul li ul {/*二級菜單中ul樣式*/    display: none;                            /*將二級菜單設置為不顯示*/}

        .menu ul li:hover ul {/*鼠標劃過一級菜單的ul時,二級菜單才顯示*/    

        display:block;                           /*定義為塊級元素 */    position:absolute;                       /*絕對定位*/    

        top:31px;                                /*相對其父標簽的位置*/    

        left:0px;                                /*相對其父標簽的位置*/   

         width:105px;                             /*寬度*/}

        在以上代碼中,首先定義了二級菜單的<ul>標簽樣式,display:none語句的作用是將其所有內容隱藏,并且使其不再占用文檔中的空間;然后定義了一級菜單中<li>標簽的偽類,當鼠標經過一級菜單時,二級菜單開始顯示,這就實現了我們想要的效果,目前IE6只支持a的偽類,其他標簽的偽類不支持。在menu ul li:hover ul中設置了posi-tion:absolute屬性,也就是絕對定位,它將脫離原來文檔流,以其父標簽的原點為原點定位,其定位為top:31px;left:0px,為什么是31px呢,因為其父級標簽的height屬性為30px,所以,在設計網頁時,如果想要在一級菜單下顯示,就應該是31px的位置;width:105px,是由于一級菜單的width是104px,加上右邊框的1px,正好是105px。

        第6步,設置二級菜單的鏈接樣式和鼠標懸停時的效果。

        .menu ul li:hover ul li a {/*二級菜單鏈接樣式*/    display:block;   

         background:#ff4321;  /*二級菜單背景色*/    color:#000;                                           /*二級菜單字體顏色*/}

        .menu ul li:hover ul li a:hover {/*二級菜單的鼠標懸停樣式*/    

        background:#dfc184;                                   /*二級菜單的鼠標懸停時背景色*/    

        color:#000;                                           /*二級菜單的鼠標懸停時的字體顏色*/}

        在以上代碼中,設置了二級菜單的背景色、字體顏色和鼠標懸停時的背景色、字體顏色。

        當前文章標題:如何設計多級菜單列表

        當前URL:http://www.freenetsites.com/news/wzzz/3093.html

        上一篇:網頁設計中的導航列表

        下一篇:如何在網頁設計中設計列表版式

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>