在网页设计中设置带花纹边框(一)

  • 2020-01-09 15:46:40
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.zwxs1.com

网页设计时,为页面添加边框,只要使用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样式设置,界面中只是把图片和文字内容罗列起来,没有任何修饰。

7bc6020ad0fde631d6f4b0d0ee02450f.jpg

提示:在本例中,网页设计时的的结构是:在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>标记中的内容定义为块级元素。

当前文章标题:在网页设计中设置带花纹边框(一)

当前URL:http://www.zwxs1.com/news/wzzz/3154.html

上一篇:定义背景图片的位置

下一篇:在网页设计中设置带花纹边框(二)

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
免费全部高h视频在线观看,国产精品v欧美精品v日本精品,亚洲性线免费观看视频成熟,老汉色av影院 网站地图