首页 > Web开发 > 详细

CSS对 网页进行布局

时间:2016-07-06 23:25:20      阅读:330      评论:0      收藏:0      [点我收藏+]

一、单列布局: 

     margin:0 auto;将div模块居中

 

二、两列布局:(float标签将div进行浮动)

  float:left;

    float:right;

 

三、三列布局:

 ①、利用float直接对三个div模块进行浮动;

  ②、左右两边div固定,中间自适应(利用position:absolute;上 右 下 左)绝对定位来进行固定

      左边:position:absolute;left:0;top: 0;

          右边:position:absolute;right:0;top: 0;

          中间:margin:上 右 下 左;< 自适应 >

 

 注意:如果三个都是自适应就用 float:left,但是此时的宽度应该设成百分比的形式

 

四、混合布局

   代码演示:

    htnl文件:

   技术分享

   css样式文件:

     技术分享技术分享

显示结果:

 技术分享

 

                           技术分享

CSS对 网页进行布局

原文:http://www.cnblogs.com/ericjava123/p/5647090.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!