国产午夜亚洲精品国产成人_欧美屁股大的xxxxx_丰满巨肥大屁股bbw网站_日韩精品亚洲aⅴ在线影院_旧番剧精灵の森へようこそ

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

  • 2020-01-13 10:16:26
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://www.gtalker.cn

網(wǎng)頁設計時為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,目的同樣是為了設計網(wǎng)頁時顯示出container的背景圖片,clear:float語句是為了清除浮動,由于前面的代碼中使用了浮動,所以為了消除左右浮動的影響,使用此語句;在ul樣式中定義了菜單的樣式,其中用border語句定義了ul的上下邊框;在a中定義了菜單的鏈接樣式,其中float:left語句在這里的作用是使列表項目橫向顯示。

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

#content { /*正文樣式*/    

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

width: 790px;    

margin: 0 auto;    

padding-bottom:20px;    

padding-top:20px;         /*頂端內(nèi)邊距*/    

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

h2{/*標題樣式*/    

padding:40px auto;        /*標題內(nèi)邊距*/}

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

設置網(wǎng)頁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;                  /*內(nèi)邊距*/}

6d1885219312ee4d163dd29fccf3298c.jpg

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

當前URL:http://www.gtalker.cn/news/wzzz/3155.html

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

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

網(wǎng)站建設、網(wǎng)絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)