欄目圓角化是網(wǎng)頁設(shè)計(jì)中的一種美化網(wǎng)頁的方法,本例運(yùn)用之前介紹過網(wǎng)頁設(shè)計(jì)中的圖片圓角化方法,通過設(shè)置一個(gè)名為《精品文摘》的網(wǎng)頁,從而進(jìn)一步講述CSS設(shè)置圖片的方法。
【操作步驟】
第1步,啟動(dòng)Dreamweaver,新建文檔,保存為index.html。
第2步,構(gòu)建網(wǎng)頁結(jié)構(gòu)。本例首先用<div>標(biāo)簽設(shè)置container容器,然后分別用<div>標(biāo)簽將頁面分為header和main兩部分。以下為部分代碼,完整代碼請(qǐng)參考本節(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>[生活感悟] 晴,----簡(jiǎn)單生活,感受美好,期待明天</li>
<li>[生活感悟] 多年后,我們或許會(huì)嫁給這樣的他 </li>
<li>[生活感悟] 從今以后,試著做個(gè)這樣的人</li>
<li>[生活感悟] 人最大的不幸,就是不知道自己是幸福的</li>
<li>[生活感悟] 人生至境是不爭(zhēng) 恬靜出塵心自寧 </li>
<li>[生活感悟] 沒有如意的生活,只有看開的人生</li>
</ul>
<p class="more"><a href="#">更多內(nèi)容</a>
</p>
</div>
</div>
……
</div>
</div>
在整體的container框架下,頁面分為header和main兩部分。在header下,定義了<img>標(biāo)簽,用于設(shè)置banner圖片。在main下,又分為4部分,分別定義了4個(gè)欄目。在lanmu標(biāo)簽中定義了每個(gè)欄目的具體內(nèi)容。
每一個(gè)欄目是一個(gè)<div>塊,在此塊下又分為兩部分,分別是headline和con-tent,也就是圓角圖片和欄目的文字信息。
第3步,定義網(wǎng)頁基本屬性。
* {/*定義頁面中所有標(biāo)簽的統(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;}
在以上代碼中,*{}表示將頁面中所有的標(biāo)簽都設(shè)置為此樣式。body標(biāo)簽定義了背景色。在con-tainer中定義了container容器的寬度為844px,另外在container中定義了margin:0px auto,目的是使container容器水平居中。bgimg{border:2px#fff solid}設(shè)置了header部分圖片的邊框,在這里可以很容易地理解為什么在網(wǎng)站建設(shè)時(shí)把container容器的寬度設(shè)置為844px了,因?yàn)閔eader部分的圖片寬是840px,而其邊框?qū)挒?px,所以border-left+bor-der-right=4px,所以相加為844px。
第4步,以上的效果離我們想要的網(wǎng)頁似乎距離很遠(yuǎn),請(qǐng)讀者不要著急,網(wǎng)頁結(jié)構(gòu)搭建好以后,可以逐步設(shè)置每個(gè)部分的樣式,以實(shí)現(xiàn)最終的效果,接下來設(shè)置欄目的樣式。
.lanmu {
width: 412px;
float: left;
-moz-border-radius: 10px; /*僅Firefox支持,實(shí)現(xiàn)圓角效果*/
-webkit-border-radius: 10px; /*僅Safari,Chrome支持,實(shí)現(xiàn)圓角效果*/
-khtml-border-radius: 10px; /*僅Safari,Chrome支持,實(shí)現(xiàn)圓角效果*/
border-radius: 12px; /*Firefox,Opera,Safari,Chrome支持,實(shí)現(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容器的樣式,設(shè)置了容器的寬度為412px,也就是container寬度的一半。同時(shí)定義圓角顯示,考慮到外包含框被定義圓角,其內(nèi)部?jī)?nèi)容可能會(huì)覆蓋圓角效果,使用overflow:hidden;可以把超出的區(qū)域隱藏起來,以便顯示圓角。設(shè)置margin:4px;,調(diào)整每個(gè)欄目之間的距離,定義4個(gè)邊框樣式類,分別為不同欄目定義不同顏色的邊框。
第5步,設(shè)置content1和content2容器的樣式。此容器中包含了<h3>標(biāo)簽和<ul>標(biāo)簽,分別是標(biāo)題和欄目?jī)?nèi)容。
.content1 {
height: 250px;
background: #fff;
margin-right: 2px;}
.content2 {
height: 250px;
background: #fff;}
在以上代碼中,分別設(shè)置了content1和con-tent2標(biāo)簽的樣式,這里為什么還要分為content1和content2呢?由于本例中的欄目分為左右兩邊,為了讓左右兩邊的欄目有一個(gè)2px寬的間隙,在這里設(shè)置了左邊欄目也就是content1的右側(cè)補(bǔ)白為2px。而右邊欄目也就是content2并沒有如此設(shè)置。
第6步,定義欄目中的標(biāo)題樣式。
h3 { padding: 20px 30px;
font-size: 16px;
color: #000066;
text-align: left;}
在以上代碼中,padding:20px 30px定義了上、下內(nèi)邊距為20px,左、右內(nèi)邊距為30px。定義了對(duì)齊方式為左對(duì)齊
第7步,設(shè)置欄目中的文本樣式,其中包括一個(gè)<ul>標(biāo)簽的樣式、一個(gè)<li>標(biāo)簽的樣式和一個(gè)<p>標(biāo)簽的樣式,代碼如下:
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>標(biāo)簽中定義了list-style:disc樣式,也就是列表前的項(xiàng)目符號(hào)為實(shí)心圓。在more類樣式中,定義了欄目右下角的“更多內(nèi)容”文字的樣式。
當(dāng)前文章標(biāo)題:在網(wǎng)頁設(shè)計(jì)中的圓角欄目
當(dāng)前URL:http://m.iy5y368.cn/news/wzzz/3110.html
上一篇:如何在網(wǎng)頁設(shè)計(jì)中設(shè)計(jì)圓角圖片
下一篇:表格基本操作