在网页设计时，为页面添加边框，只要使用border属性就可以做到，但是，如果想要给页面添加一个带花纹的边框，使用border属性是无法完成的，本例利用图片背景，来实现为页面添加带花纹的边框。

【操作步骤】

第1步，构建网页结构。在本例中首先用<div>标记设置container容器，在此页面中，所有内容分为4个部分，分别用<div>定义为header、menu、content和footer。

<div id="container">    

<div id="header">        

<div class="logo"><img src="images/logo.gif"></div> 

<div id="title">高质.高效 <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>新产品</a></li>                

<li><a href="#" target="_blank"><span></span>服务指南</a></li>                

<li><a href="#"><span></span>合作伙伴</a></li>                

<li><a href="#"><span></span>联系我们</a></li>            

</ul>        

</div>    

</div>    

<div id="content_container">

 <div id="content">            

<h2>奔腾信息资询（北京）有限公司  简介</h2>            

<p>信息咨询（北京）有限公司是中国领先的营销解决方案和信用解决方案提供商。我们收集、分析和管理关于市场、消费者和商业机构的信息，通过信息、服务和技术的整合，提供市场研究、商业信息、咨询和数据库营销服务，协助您做出更好的营销决策和信贷决策并发展盈利的客户关系。我们在北京、上海和广州拥有近600名员工，为各行业的机构客户提供专业服务，包括汽车、金融、保险、零售、电信、IT、制造业、消费品和贸易。            ……            

</p>        

</div>    

</div>    

<div id="footer_container"> 

<div id="footer"> Copyright@ 2015    | Designed by us <a href="#/" target="_parent">联系我们</a></div>    

</div>

</div>

此时的显示效果如图所示，可以看到，网页的基本结构已经搭建好了，但是由于没有进行CSS样式设置，界面中只是把图片和文字内容罗列起来，没有任何修饰。

提示：在本例中，网页设计时的的结构是：在container容器中包含了header、menu、content和footer 4部分，设计带花纹边框的原理就是container的宽度设置比header、menu、content和footer的宽度多，并让这4部分居中显示，那么container中的背景图片就会在左右各露出一部分，我们所看到的似乎就是页面左右各有两条带花纹的边框，如果是设置上、下、左、右边框，道理是一样的。

第2步，定义网页基本属性、container容器的样式以及所有段落的共有样式。

* {    

padding : 0;    

margin :0;}

body { /*网页基本样式*/    

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;                           

/*首行缩进*/}#container {    width: 810px;                               

/*容器宽度*/    margin: 0 auto;                             

/*居中*/    background: url(images/bg1.jpg) repeat-y;   /*网页背景图片*/

}以上代码中，*{margin:0px;padding:0px}将网页中所有标签的padding和margin都设定为0px，在body中定义了页面的背景颜色，在con-tainer中设置了容器宽度为810px，并为其添加了图片背景。

第3步，定义网页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;                 /*顶端补白*/    

margin-left:20px;                /*左侧补白*/    }

#header #title {    

float: right;    

color: #ff;

font-size: 34px;    

font-weight: bold;               /*文字粗细*/    

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，这样设置正是实现页面两侧带花纹边框的关键，因为在网站建设时，图片背景（container）的宽度是810px，也就是说在header的左右两侧会各显示10px的背景图片，这就是带花纹边框；在logo中设置了logo图片的样式；title中定义了文字“高质．高效”的样式；在span样式中定义了文字“是我们一直的追求”的样式，由于<span>标记是行内元素，但是在这里需要按块级元素来设置其样式，所以display:block表示将<span>标记中的内容定义为块级元素。