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

      1. 在網頁設計中設置帶花紋邊框(二)

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

        網頁設計時為menu部分添加CSS樣式。

        #menu {/*menu容器樣式*/ 

        clear: both;                             /*清除左浮動和右浮動*/    

        width: 790px;                            /*menu寬度*/    

        margin: 0 auto;                          /*menu容器居中*/    

        height:36px;                             /*menu容器的高度*/}#menu ul { /*ul樣式*/    

        float: left;    width:790px;                             /*ul寬度*/    

        height:36px;    list-style: none;                        /*不顯示項目符號*/    

        border-top:#FFFFFF 2px solid;            /*設置菜單的上邊框*/    

        border-bottom:#FFFFFF 2px solid;         /*設置菜單的下邊框*/    

        background:#f7f392;                      /*ul的背景顏色*/}

        #menu ul li a { /*設置鏈接樣式*/    

        float: left;                             /*左浮動*/    

        height: 28px;    

        width: 100px;    

        padding: 10px 0 0 10px;    

        font-size: 16px;    

        font-weight: bold;    

        text-decoration: none;    

        color: #f54f06;                          /*字體顏色*/

        以上代碼中,首先設置了menu的寬度為790px,同樣比container容器的寬度左右兩側各少10px,目的同樣是為了設計網頁時顯示出container的背景圖片,clear:float語句是為了清除浮動,由于前面的代碼中使用了浮動,所以為了消除左右浮動的影響,使用此語句;在ul樣式中定義了菜單的樣式,其中用border語句定義了ul的上下邊框;在a中定義了菜單的鏈接樣式,其中float:left語句在這里的作用是使列表項目橫向顯示。

        這時的網頁制作已初見效果,接下來定義content樣式和<h2>標題樣式。

        #content { /*正文樣式*/    

        clear: both;              /*清除浮動*/    

        width: 790px;    

        margin: 0 auto;    

        padding-bottom:20px;    

        padding-top:20px;         /*頂端內邊距*/    

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

        h2{/*標題樣式*/    

        padding:40px auto;        /*標題內邊距*/}

        在content中定義了正文容器的樣式,用clear:both語句清除了左右浮動,然后設置正文容器的寬度為790px。在h2中定義了標題樣式。

        設置網頁footer部分的樣式。

        #footer { /*footer部分樣式*/    

        margin: 0 auto;                    /*居中*/    

        width: 790px;                      /*footer部分的寬度*/    

        height:50px;    color: #033a5d;                    /*字體顏色 */    

        font-size:14px;    background:#999999;                /*footer部分的背景顏色*/

        border-bottom:2px #FFFFFF solid;   /*footer部分的下邊框*/    

        border-top:2px #FFFFFF solid;      /*footer部分的上邊框*/    

        padding-top:20px;                  /*內邊距*/}

        6d1885219312ee4d163dd29fccf3298c.jpg

        當前文章標題:在網頁設計中設置帶花紋邊框(二)

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

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

        下一篇:設置圓潤的欄目模塊

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