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

      1. 設置圓潤的欄目模塊

        • 2020-01-14 16:04:44
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        在網頁中常??梢钥吹秸麄€頁面或者是某些模塊是圓角的,這使網頁和模塊顯得更圓潤,本例運用<div>塊的圓角化,實現網站建設時使模塊看起來更圓潤的方法。

        【操作步驟】

        第1步,構建網頁基本結構。在本例中首先用<div>標記設置container容器,在此容器中,分別用<div>定義了header、menu、content和footer4部分。

        <div class="container">

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

        <div class="menu">        

        <ul>            

        <li>首頁</li>            

        <li>熱門推薦</li>            

        <li>精華帖</li>            

        <li>交流區</li>            

        <li>經典收藏</li>            

        <li>歷史記錄</li>            

        <li>通訊錄</li>            

        <li>關于我們</li>        

        </ul>    

        </div>    

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

        <div class="footer">@2015版權所有|關于我們|聯系我們|</div></div>

        第2步,定義網頁基本屬性、container容器的樣式。

        body{/*網頁基本屬性*/    

        text-align:center;              /*居中對齊*/    

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

        font-family:黑體;}

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

        width:800px;    

        margin:0 auto;                  /*居中*/

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

        第3步,定義網頁header部分的樣式。

        .header{/*header樣式*/    

        width:100%;                             /*相對寬度*/    

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

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

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

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

        以上代碼中,首先定義了header樣式,其寬度為相對寬度,父標記的100%,border-top-left-ra-dius: 10px和border-top-right-radius:10px兩句定義了header模塊的左上角和右上角顯示為圓角。雖然這種方法比其他實現圓角的方法簡單,但是由于在設計網頁時此方法的兼容性差,Firefox支持,所以請讀者還是謹慎使用為好。此時網頁的顯示效果如圖所示。從圖中可以看到,header部分的左上和右上角變為圓角,使header顯得圓潤了許多。

        c988dfd12d8302a9182b500dd8acf5a8.jpg

        第4步,第3步實現了header部分的設置,接下來為menu部分添加CSS樣式。

        .menu{/*menu樣式*/   

        width:800px;                       /*寬度*/   

        height:35px;   

        padding-top:5px;   

        text-align:center;   

        border-left:green 2px solid;       /*左側邊框*/      

        border-right:green 2px solid;   /*右側邊框*/   

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

        margin:0px;   

        padding:0px;      

        list-style-type:none;           /*不顯示項目標記*/}

        li{   float:left;                        /*左浮動*/   

        padding:0px 20px;                  /*內邊距*/}

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

        第5步,從圖9.104中可以看出,網頁的菜單部分已經設置完畢,接下來定義content樣式。

        .content{ /*正文樣式*/    

        width:800px;    

        height:200px;    

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

        border-left:green 2px solid;     /*左側邊框*/    

        border-right:green 2px solid;    /*右側邊框*/    

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

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

        第6步,設置網頁footer部分的樣式。

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

        height:80px;    

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

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

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

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

        提示:以上網頁在網頁設計時由于使用了border-radius屬性,所以對瀏覽器的兼容性有一定要求,在IE瀏覽器中無法顯示圓角,所以請讀者在Firefox瀏覽器中瀏覽。

        當前文章標題:設置圓潤的欄目模塊

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

        上一篇:在網頁設計中設置帶花紋邊框(二)

        下一篇:網頁色彩基礎

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