在網(wǎng)頁設(shè)計(jì)中設(shè)置帶花紋邊框(一)

  • 2020-01-09 15:46:40
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://supportcoffeeroasters.com

網(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)系。我們?cè)诒本?、上海和廣州擁有近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)容羅列起來,沒有任何修飾。

7bc6020ad0fde631d6f4b0d0ee02450f.jpg

提示:在本例中,網(wǎng)頁設(shè)計(jì)時(shí)的的結(jié)構(gòu)是:在container容器中包含了header、menu、content和footer 4部分,設(shè)計(jì)帶花紋邊框的原理就是container的寬度設(shè)置比header、menu、content和footer的寬度多,并讓這4部分居中顯示,那么container中的背景圖片就會(huì)在左右各露出一部分,我們所看到的似乎就是頁面左右各有兩條帶花紋的邊框,如果是設(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;                        

/*兩端對(duì)齊*/    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;                      /*左對(duì)齊*/    

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;                  /*定義為塊級(jí)元素*/    

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://supportcoffeeroasters.com" target="_self" title="云南網(wǎng)站建設(shè)">在網(wǎng)站建設(shè)時(shí),圖片背景(container)的寬度是810px,也就是說在header的左右兩側(cè)會(huì)各顯示10px的背景圖片,這就是帶花紋邊框;在logo中設(shè)置了logo圖片的樣式;title中定義了文字“高質(zhì).高效”的樣式;在span樣式中定義了文字“是我們一直的追求”的樣式,由于<span>標(biāo)記是行內(nèi)元素,但是在這里需要按塊級(jí)元素來設(shè)置其樣式,所以display:block表示將<span>標(biāo)記中的內(nèi)容定義為塊級(jí)元素。

當(dāng)前文章標(biāo)題:在網(wǎng)頁設(shè)計(jì)中設(shè)置帶花紋邊框(一)

當(dāng)前URL:http://supportcoffeeroasters.com/news/wzzz/3154.html

上一篇:定義背景圖片的位置

下一篇:在網(wǎng)頁設(shè)計(jì)中設(shè)置帶花紋邊框(二)

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))