• <abbr id="qqgmy"></abbr>
      <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
    • <rt id="qqgmy"><code id="qqgmy"></code></rt>
      • 設(shè)置圓潤(rùn)的欄目模塊

        在網(wǎng)頁(yè)中常??梢钥吹秸麄€(gè)頁(yè)面或者是某些模塊是圓角的,這使網(wǎng)頁(yè)和模塊顯得更圓潤(rùn),本例運(yùn)用<div>塊的圓角化,實(shí)現(xiàn)網(wǎng)站建設(shè)時(shí)使模塊看起來(lái)更圓潤(rùn)的方法。

        【操作步驟】

        第1步,構(gòu)建網(wǎng)頁(yè)基本結(jié)構(gòu)。在本例中首先用<div>標(biāo)記設(shè)置container容器,在此容器中,分別用<div>定義了header、menu、content和footer4部分。

        <div class="container">

        <div class="header"></div>    

        <div class="menu">        

        <ul>            

        <li>首頁(yè)</li>            

        <li>熱門(mén)推薦</li>            

        <li>精華帖</li>            

        <li>交流區(qū)</li>            

        <li>經(jīng)典收藏</li>            

        <li>歷史記錄</li>            

        <li>通訊錄</li>            

        <li>關(guān)于我們</li>        

        </ul>    

        </div>    

        <div class="content"></div>    

        <div class="footer">@2015版權(quán)所有|關(guān)于我們|聯(lián)系我們|</div></div>

        第2步,定義網(wǎng)頁(yè)基本屬性、container容器的樣式。

        body{/*網(wǎng)頁(yè)基本屬性*/    

        text-align:center;              /*居中對(duì)齊*/    

        background-color:#CCCCCC;       /*背景顏色*/    

        font-family:黑體;}

        .container{   /*container容器樣式*/    

        width:800px;    

        margin:0 auto;                  /*居中*/

        }以上代碼中,首先設(shè)置了body的背景顏色,在container中設(shè)置了容器寬度為800px。

        第3步,定義網(wǎng)頁(yè)header部分的樣式。

        .header{/*header樣式*/    

        width:100%;                             /*相對(duì)寬度*/    

        height:200px;    background-image:url(images/bg.gif);    /*定義背景圖片*/    

        border-top-left-radius:10px;            /*左上角圓角化*/

        border-top-right-radius:10px;           /*右上角圓角化*/    

        border:green 2px solid;                 /*給header加邊框*/}

        以上代碼中,首先定義了header樣式,其寬度為相對(duì)寬度,父標(biāo)記的100%,border-top-left-ra-dius: 10px和border-top-right-radius:10px兩句定義了header模塊的左上角和右上角顯示為圓角。雖然這種方法比其他實(shí)現(xiàn)圓角的方法簡(jiǎn)單,但是由于在設(shè)計(jì)網(wǎng)頁(yè)時(shí)此方法的兼容性差,F(xiàn)irefox支持,所以請(qǐng)讀者還是謹(jǐn)慎使用為好。此時(shí)網(wǎng)頁(yè)的顯示效果如圖所示。從圖中可以看到,header部分的左上和右上角變?yōu)閳A角,使header顯得圓潤(rùn)了許多。

        c988dfd12d8302a9182b500dd8acf5a8.jpg

        第4步,第3步實(shí)現(xiàn)了header部分的設(shè)置,接下來(lái)為menu部分添加CSS樣式。

        .menu{/*menu樣式*/   

        width:800px;                       /*寬度*/   

        height:35px;   

        padding-top:5px;   

        text-align:center;   

        border-left:green 2px solid;       /*左側(cè)邊框*/      

        border-right:green 2px solid;   /*右側(cè)邊框*/   

        background-color:#f0d835;          /*背景顏色*/}ul{   

        margin:0px;   

        padding:0px;      

        list-style-type:none;           /*不顯示項(xiàng)目標(biāo)記*/}

        li{   float:left;                        /*左浮動(dòng)*/   

        padding:0px 20px;                  /*內(nèi)邊距*/}

        在以上代碼中,首先設(shè)置了menu的寬度為800px;在ul中定義了菜單的樣式,其中用list-style(-?)type:none語(yǔ)句定義列表不顯示項(xiàng)目符號(hào);在li中定義了標(biāo)簽<li>的樣式,其中float語(yǔ)句的作用是使項(xiàng)目列表中的各項(xiàng)左浮動(dòng),在這里使用此語(yǔ)句,可以達(dá)到使原本縱向排列的列表各項(xiàng)橫向排列。

        第5步,從圖9.104中可以看出,網(wǎng)頁(yè)的菜單部分已經(jīng)設(shè)置完畢,接下來(lái)定義content樣式。

        .content{ /*正文樣式*/    

        width:800px;    

        height:200px;    

        background-color:#FFFFFF;        /*正文部分背景顏色*/    

        border-left:green 2px solid;     /*左側(cè)邊框*/    

        border-right:green 2px solid;    /*右側(cè)邊框*/    

        border-top:green 2px solid;      /*頂部邊框*/}

        在content中定義了正文容器的樣式。

        第6步,設(shè)置網(wǎng)頁(yè)footer部分的樣式。

        .footer{/*footer部分樣式*/width:800px;    

        height:80px;    

        background:url(images/footer_bg.jpg);     /*footer部分的背景圖片*/    

        border-bottom-left-radius:10px;           /*設(shè)置左下邊框的圓角化*/    

        border-bottom-right-radius:10px;          /*設(shè)置右下邊框的圓角化*/    

        border:green 2px solid;                   /*邊框*/    padding-top:20px;}

        提示:以上網(wǎng)頁(yè)在網(wǎng)頁(yè)設(shè)計(jì)時(shí)由于使用了border-radius屬性,所以對(duì)瀏覽器的兼容性有一定要求,在IE瀏覽器中無(wú)法顯示圓角,所以請(qǐng)讀者在Firefox瀏覽器中瀏覽。

        網(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>