在網(wǎng)頁設計中的圓角欄目

欄目圓角化是網(wǎng)頁設計中的一種美化網(wǎng)頁的方法,本例運用之前介紹過網(wǎng)頁設計中的圖片圓角化方法,通過設置一個名為《精品文摘》的網(wǎng)頁,從而進一步講述CSS設置圖片的方法。

【操作步驟】

第1步,啟動Dreamweaver,新建文檔,保存為index.html。

第2步,構建網(wǎng)頁結(jié)構。本例首先用<div>標簽設置container容器,然后分別用<div>標簽將頁面分為header和main兩部分。以下為部分代碼,完整代碼請參考本節(jié)示例源代碼。

<div class="container">

<div class="header"> 

<img class="bgimg" src="images/bg.jpg"> </div>    

<div class="main">        

<div class="lanmu b1">            

<div class="headline"><img class="c" src="images/bg1.gif"></div>            

<div class="content1">                

<h3>散文隨筆</h3>                

<ul class="topic">                    

<li>[生活感悟]   晴,----簡單生活,感受美好,期待明天</li>                    

<li>[生活感悟]   多年后,我們或許會嫁給這樣的他  </li>                    

<li>[生活感悟]   從今以后,試著做個這樣的人</li>                    

<li>[生活感悟]   人最大的不幸,就是不知道自己是幸福的</li>                    

<li>[生活感悟]   人生至境是不爭 恬靜出塵心自寧  </li>                    

<li>[生活感悟]   沒有如意的生活,只有看開的人生</li>

</ul>                

<p class="more"><a href="#">更多內(nèi)容</a>

</p>            

</div>        

</div>        

……    

</div>

</div>

在整體的container框架下,頁面分為header和main兩部分。在header下,定義了<img>標簽,用于設置banner圖片。在main下,又分為4部分,分別定義了4個欄目。在lanmu標簽中定義了每個欄目的具體內(nèi)容。

每一個欄目是一個<div>塊,在此塊下又分為兩部分,分別是headline和con-tent,也就是圓角圖片和欄目的文字信息。

第3步,定義網(wǎng)頁基本屬性。

* {/*定義頁面中所有標簽的統(tǒng)一樣式*/    

margin: 0;   

padding: 0;    

font-size: 12px;

text-align: center;}body { background: #d3d3d3;             /*頁面背景色*/ }

.container {    

width: 844px;    

margin: 0 auto;                    /*居中顯示*/}

.bgimg {    width: 840px;    border: 2px #fff solid;            /*給header部分圖片定義2px寬的邊框*/}

.c {    width: 422px;    height:33px;}

在以上代碼中,*{}表示將頁面中所有的標簽都設置為此樣式。body標簽定義了背景色。在con-tainer中定義了container容器的寬度為844px,另外在container中定義了margin:0px auto,目的是使container容器水平居中。bgimg{border:2px#fff solid}設置了header部分圖片的邊框,在這里可以很容易地理解為什么在網(wǎng)站建設時把container容器的寬度設置為844px了,因為header部分的圖片寬是840px,而其邊框?qū)挒?px,所以border-left+bor-der-right=4px,所以相加為844px。

第4步,以上的效果離我們想要的網(wǎng)頁似乎距離很遠,請讀者不要著急,網(wǎng)頁結(jié)構搭建好以后,可以逐步設置每個部分的樣式,以實現(xiàn)最終的效果,接下來設置欄目的樣式。

.lanmu {    

width: 412px;    

float: left;    

-moz-border-radius: 10px;       /*僅Firefox支持,實現(xiàn)圓角效果*/    

-webkit-border-radius: 10px;    /*僅Safari,Chrome支持,實現(xiàn)圓角效果*/    

-khtml-border-radius: 10px;     /*僅Safari,Chrome支持,實現(xiàn)圓角效果*/    

border-radius: 12px;            /*Firefox,Opera,Safari,Chrome支持,實現(xiàn)圓角效果*/    

overflow:hidden;    

margin:4px;}

.b1 {border:solid 1px #C2188D;}

.b2 {border:solid 1px #DF290F;}

.b3 {border:solid 1px #F7C63C;}

.b4 {border:solid 1px #3E71A5;}

在上方代碼中,首先定義了lanmu容器的樣式,設置了容器的寬度為412px,也就是container寬度的一半。同時定義圓角顯示,考慮到外包含框被定義圓角,其內(nèi)部內(nèi)容可能會覆蓋圓角效果,使用overflow:hidden;可以把超出的區(qū)域隱藏起來,以便顯示圓角。設置margin:4px;,調(diào)整每個欄目之間的距離,定義4個邊框樣式類,分別為不同欄目定義不同顏色的邊框。

第5步,設置content1和content2容器的樣式。此容器中包含了<h3>標簽和<ul>標簽,分別是標題和欄目內(nèi)容。

.content1 {     

height: 250px;     

background: #fff;     

margin-right: 2px;} 

.content2 {     

height: 250px;     

background: #fff;}

在以上代碼中,分別設置了content1和con-tent2標簽的樣式,這里為什么還要分為content1和content2呢?由于本例中的欄目分為左右兩邊,為了讓左右兩邊的欄目有一個2px寬的間隙,在這里設置了左邊欄目也就是content1的右側(cè)補白為2px。而右邊欄目也就是content2并沒有如此設置。

第6步,定義欄目中的標題樣式。

h3 {     padding: 20px 30px;     

font-size: 16px; 

color: #000066;     

text-align: left;}

在以上代碼中,padding:20px 30px定義了上、下內(nèi)邊距為20px,左、右內(nèi)邊距為30px。定義了對齊方式為左對齊

第7步,設置欄目中的文本樣式,其中包括一個<ul>標簽的樣式、一個<li>標簽的樣式和一個<p>標簽的樣式,代碼如下:

ul { padding-left: 40px; }li {     

text-align: left;     

list-style: disc;     

line-height: 1.8em;}

.more {     

text-align: right;     

padding-right: 20px;}

在上方代碼中,首先定義了列表<ul>的樣式padding-left:40px,即左側(cè)內(nèi)邊距為40px。<li>標簽中定義了list-style:disc樣式,也就是列表前的項目符號為實心圓。在more類樣式中,定義了欄目右下角的“更多內(nèi)容”文字的樣式。

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