在網(wǎng)頁設(shè)計(jì)中設(shè)置帶花紋邊框（一）
在網(wǎng)頁設(shè)計(jì)時(shí)，為頁面添加邊框，只要使用border屬性就可以做到，但是，如果想要給頁面添加一個(gè)帶花紋的邊框，使用border屬性是無法完成的，本例利用圖片背景，來實(shí)現(xiàn)為頁面添加帶花紋的邊框。
【操作步驟】
第1步，構(gòu)建網(wǎng)頁結(jié)構(gòu)。在本例中首先用<div>標(biāo)記設(shè)置container容器，在此頁面中，所有內(nèi)容分為4個(gè)部分，分別用<div>定義為header、menu、content和footer。
<div id="container">
<div id="header">
<div class="logo"><img src="images/logo.gif"></div>
<div id="title">高質(zhì).高效 <span>是我們一直的追求</span> </div>
</div>
<div id="menu_container">
<div id="menu">
<ul>
<li><a href="#" class="current"><span></span>首頁</a></li>
<li><a href="#" target="_parent"><span></span>新產(chǎn)品</a></li>
<li><a href="#" target="_blank"><span></span>服務(wù)指南</a></li>
<li><a href="#"><span></span>合作伙伴</a></li>
<li><a href="#"><span></span>聯(lián)系我們</a></li>
</ul>
</div>
</div>
<div id="content_container">
<div id="content">
<h2>奔騰信息資詢（北京）有限公司 簡介</h2>
<p>信息咨詢（北京）有限公司是中國領(lǐng)先的營銷解決方案和信用解決方案提供商。我們收集、分析和管理關(guān)于市場、消費(fèi)者和商業(yè)機(jī)構(gòu)的信息，通過信息、服務(wù)和技術(shù)的整合，提供市場研究、商業(yè)信息、咨詢和數(shù)據(jù)庫營銷服務(wù)，協(xié)助您做出更好的營銷決策和信貸決策并發(fā)展盈利的客戶關(guān)系。我們在北京、上海和廣州擁有近600名員工，為各行業(yè)的機(jī)構(gòu)客戶提供專業(yè)服務(wù)，包括汽車、金融、保險(xiǎn)、零售、電信、IT、制造業(yè)、消費(fèi)品和貿(mào)易。 ……
</p>
</div>
</div>
<div id="footer_container">
<div id="footer"> Copyright@ 2015 | Designed by us <a href="#/" target="_parent">聯(lián)系我們</a></div>
</div>
</div>
此時(shí)的顯示效果如圖所示，可以看到，網(wǎng)頁的基本結(jié)構(gòu)已經(jīng)搭建好了，但是由于沒有進(jìn)行CSS樣式設(shè)置，界面中只是把圖片和文字內(nèi)容羅列起來，沒有任何修飾。
提示：在本例中，網(wǎng)頁設(shè)計(jì)時(shí)的的結(jié)構(gòu)是：在container容器中包含了header、menu、content和footer 4部分，設(shè)計(jì)帶花紋邊框的原理就是container的寬度設(shè)置比header、menu、content和footer的寬度多，并讓這4部分居中顯示，那么container中的背景圖片就會在左右各露出一部分，我們所看到的似乎就是頁面左右各有兩條帶花紋的邊框，如果是設(shè)置上、下、左、右邊框，道理是一樣的。
第2步，定義網(wǎng)頁基本屬性、container容器的樣式以及所有段落的共有樣式。
* {
padding : 0;
margin :0;}
body { /*網(wǎng)頁基本樣式*/
font-family : 宋體, Arial, Helvetica, sans-serif;
color : #024977;
font-size : 14px;
background: #dfbfc0; text-align: center;}p { /*段落文本樣式*/
margin: 0px;
padding: 0 20px;
/*段落之間的間距*/ line-height: 1.6em; text-align: justify;
/*兩端對齊*/ text-indent: 2em;
/*首行縮進(jìn)*/}#container { width: 810px;
/*容器寬度*/ margin: 0 auto;
/*居中*/ background: url(images/bg1.jpg) repeat-y; /*網(wǎng)頁背景圖片*/
}以上代碼中，*{margin:0px;padding:0px}將網(wǎng)頁中所有標(biāo)簽的padding和margin都設(shè)定為0px，在body中定義了頁面的背景顏色，在con-tainer中設(shè)置了容器寬度為810px，并為其添加了圖片背景。
第3步，定義網(wǎng)頁header部分樣式。
#header {
width: 790px; /*header部分div塊的寬度*/
height: 200px; /*高寬*/
margin: 0 auto; /*header居中*/
background:#3f4857; /*背景顏色*/
border-top:#FFFFFF 2px solid; /*header上邊框*/}
#header .logo{ /*logo圖片樣式*/
float:left; /*左對齊*/
margin-top:40px; /*頂端補(bǔ)白*/
margin-left:20px; /*左側(cè)補(bǔ)白*/ }
#header #title {
float: right;
color: #ff;
font-size: 34px;
font-weight: bold; /*文字粗細(xì)*/
letter-spacing: 5px; /*字間距*/
font-family:黑體;
margin-top:50px;
margin-right:60px;}
#header #title span { display: block; /*定義為塊級元素*/
margin: 10px 0 0 5px;
font-size: 14px;
color: #fff;
font-weight: bold;
leter-spacing: 5px;}
以上代碼中，首先定義了header樣式，其寬度為790px，這樣設(shè)置正是實(shí)現(xiàn)頁面兩側(cè)帶花紋邊框的關(guān)鍵，因?yàn)?a href="http://www.gtalker.cn" target="_self" title="云南網(wǎng)站建設(shè)">在網(wǎng)站建設(shè)時(shí)，圖片背景（container）的寬度是810px，也就是說在header的左右兩側(cè)會各顯示10px的背景圖片，這就是帶花紋邊框；在logo中設(shè)置了logo圖片的樣式；title中定義了文字“高質(zhì)．高效”的樣式；在span樣式中定義了文字“是我們一直的追求”的樣式，由于<span>標(biāo)記是行內(nèi)元素，但是在這里需要按塊級元素來設(shè)置其樣式，所以display:block表示將<span>標(biāo)記中的內(nèi)容定義為塊級元素。
當(dāng)前文章標(biāo)題：在網(wǎng)頁設(shè)計(jì)中設(shè)置帶花紋邊框（一）
當(dāng)前URL：http://www.gtalker.cn/news/wzzz/3154.html
上一篇：定義背景圖片的位置
