福州seo|福建seo >> 福州SEO优化 >> Border和background的妙用

Border和background的妙用

作者:SEO技术 分类: 福州SEO优化 发布于:2015-8-15 23:55 ė623次浏览 60条评论
先写一个div大盒子,分左中右三部分,左右两边用a标签,中间的盒子再分成三部分,盒子里面的白板用样式,定位,书本用img标签,右边的文字分别用h标签、p标签、a标签来定义。

网页布局思路

<!—-course-box—->
<div class=”course-box”>
<div class=”box-left”>
<a href=”javascript:;”></a>
</div>

<div class=”box-center”>
<div class=”box-all”>

<div class=”course-list”>
<div class=”left”>
<img src=”images/txb.png” alt=”特训班” width=”112″ height=”144″ />
</div>
<div class=”right”>
<h3>特训班(独立动态网站开发)</h3>
<p>HTML零基础到高级课程实战(全程20节课),独立设计编写模板,开发完整具有前后台的动态网站,存实战训练。</p>
<a>马上报名</a>
</div>
</div>

</div>
</div>

<div class=”box-right”>
<a href=”javascript:;”></a>
</div>
</div>
<!—-course-box end—->

中间写的时候把用border:1px solid red;来画的框,没有考虑到border所占的像素,结果box-right浮动不起作用。如下图所示:
border错误案例
而把border换成background,float就能起到作用了,原因就是3个border占了6px,我们把面的大盒子加大6px,或者把里面的盒子减去6px都可以实现目标效果,但那样需要改数据,不易计算,这只是一个布局草图,用background就不存在这样的现象,因为它只是填充颜色,并不会撑大盒子。如下图所示
.course-box{width:1000px;height:210px;border:1px solid red;margin:0 auto;}
.course-box .box-left{width:42px;height:210px;background:red;float:left;}
.course-box .box-center{width:916px;height:210px;background:#9999CC;float:left;}
.course-box .box-right{width:42px;height:210px;background:#009999;float:left;}

本文出自 福州seo|福建seo,转载时请注明出处及相应链接。

分享本文至:

俗话说:SEO大神都喜欢发表自己的观点!那么你呢?

电子邮件地址不会被公开。必填项已用*标注


Ɣ回顶部