<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

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

          • 2020-01-13 10:16:26
          • 閱讀次數:
          • 作者:盈嵐科技小編
          • 來源:http://www.1c4w.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.1c4w.com/news/wzzz/3155.html

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

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

          網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
          鸭子tv国产在线永久播放,天天夜日日日日碰日日摸日日澡,日本特黄特黄刺激大片,老熟妇乱子伦456在线观看 网站地图