在網(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>熱門推薦</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)了許多。
第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瀏覽器中瀏覽。
當(dāng)前文章標(biāo)題:設(shè)置圓潤(rùn)的欄目模塊
當(dāng)前URL:http://m.iy5y368.cn/news/wzzz/3156.html