• <abbr id="qqgmy"></abbr>
      <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
    • <rt id="qqgmy"><code id="qqgmy"></code></rt>
      • 如何設(shè)計(jì)多級(jí)菜單列表

        多級(jí)下拉菜單在一些企業(yè)網(wǎng)站應(yīng)用非常廣泛,它存在使用方便、占用空間小等特點(diǎn)。本節(jié)將介紹橫網(wǎng)頁(yè)設(shè)計(jì)中向?qū)Ш讲藛蔚亩?jí)菜單的制作方法,從而進(jìn)一步說(shuō)明列表在制作導(dǎo)航菜單上的應(yīng)用。

        【操作步驟】

        第1步,啟動(dòng)Dreamweaver,新建一個(gè)網(wǎng)頁(yè),保存為index.html。

        第2步,構(gòu)建網(wǎng)頁(yè)的基本結(jié)構(gòu)。本例中由兩層嵌套的<ul>標(biāo)簽定義了二級(jí)菜單。

        <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="#">標(biāo) 尺</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="#">時(shí)間軸</a></li>            

        </ul>        

        </li>    

        </ul>    

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

        </div>

        第3步,在<head>標(biāo)簽內(nèi)添加<styletype="text/css">標(biāo)簽,定義一個(gè)內(nèi)部樣式表,然后輸入下面樣式,定義網(wǎng)頁(yè)的menu容器樣式,并定義一級(jí)菜單中列表樣式。

        .menu {/*menu樣式類*/    

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

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

        margin:0;                /*定義四周補(bǔ)白為0*/}

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

        padding:0;               /*一級(jí)菜單中列表的內(nèi)邊距為0*/    

        list-style-type: none;   /*不顯示項(xiàng)目符號(hào)*/}

        .menu ul li {    float:left;              /*使菜單項(xiàng)橫向顯示*/    

        position:relative;       /*定義一級(jí)菜單中列表的定位方式為相對(duì)定位*/}

        在以上代碼中,定義了一級(jí)菜單的樣式,其中<li>標(biāo)簽中,通過float:left語(yǔ)句使原來(lái)豎向顯示的列表項(xiàng)橫向顯示,并用position:relative語(yǔ)句設(shè)置其position屬性為相對(duì)定位。

        第4步,設(shè)置一級(jí)菜單中的<a>標(biāo)簽的樣式和<a>標(biāo)簽在已訪問過時(shí)和鼠標(biāo)懸停時(shí)的樣式。

        .menu ul li a, 

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

        display:block;                             /*定義為塊級(jí)元素*/    text-align:center;                         /*居中對(duì)齊*/

        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 {/*鼠標(biāo)懸停時(shí)<a>標(biāo)簽樣式*/    

        color:#fff;                                /*鼠標(biāo)懸停時(shí)改變字體顏色為#fff*/}

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

        第5步,設(shè)置二級(jí)菜單樣式。

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

        .menu ul li:hover ul {/*鼠標(biāo)劃過一級(jí)菜單的ul時(shí),二級(jí)菜單才顯示*/    

        display:block;                           /*定義為塊級(jí)元素 */    position:absolute;                       /*絕對(duì)定位*/    

        top:31px;                                /*相對(duì)其父標(biāo)簽的位置*/    

        left:0px;                                /*相對(duì)其父標(biāo)簽的位置*/   

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

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

        第6步,設(shè)置二級(jí)菜單的鏈接樣式和鼠標(biāo)懸停時(shí)的效果。

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

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

        .menu ul li:hover ul li a:hover {/*二級(jí)菜單的鼠標(biāo)懸停樣式*/    

        background:#dfc184;                                   /*二級(jí)菜單的鼠標(biāo)懸停時(shí)背景色*/    

        color:#000;                                           /*二級(jí)菜單的鼠標(biāo)懸停時(shí)的字體顏色*/}

        在以上代碼中,設(shè)置了二級(jí)菜單的背景色、字體顏色和鼠標(biāo)懸停時(shí)的背景色、字體顏色。

        網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號(hào))
        在线一区视频二区三区,av无码久久久不卡网站,亚洲国产人成精品,国产成人白丝视频
        • <abbr id="qqgmy"></abbr>
          <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
        • <rt id="qqgmy"><code id="qqgmy"></code></rt>