CSS3页面布局方案

  2010年1月4日9:30,第七届中华夏族民共和国国际航空航天博览会在银川市航空展览中央隆重开幕,开幕式上海展览中心开了高超的航空表演。

CSS3页面布局方案

第1天
2015-08-01

  中国网 杨佳

     Web页面中的布局,在css3此前,主要行使float属性大概position属性举行页面中的轻巧布局,但是选取它们也存在部分破绽,比方两栏只怕多栏中假使成分的剧情惊人差异,则有后面部分很难对齐的难点。由此在css3中增添了一部分新的布局格局,使用这么些新的布局格局,除了能够修改从前存在的难题之外,还足以进行尤其便利,更为复杂的页面布局。

中国 图片 1

  相关专项论题:第七届中中原人民共和国珠中国人民解放军海军航空兵展

   
 我们得以先来探视古板应用float或然position属性布局页面;如下HTML代码:

中国

<div style="width:100%;overflow:hidden;" id="div-st">      <h2 style="border-bottom:1px solid #333;">使用float属性或者position属性的布局缺点</h2>      <div class="div1">              <p>示列文字1:相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。</p>      </div>      <div class="div2">          <p>示列文字2:相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。</p>      </div>      <div class="div3">页面中其他内容</div>  </div>

图片 2

CSS代码如下:

中国

.div1,.div2,.div3 {float:left;width:26em;}  div.div1 {margin-right:2em;}  div.div3 {width:100%;background-color:yellow;height:260px;}

图片 3

达成效果与利益如下:

中国

使用float属性可能position属性的布局短处

示列文字1:相对来讲比较长的示列文字。相对来讲相比长的示列文字。相对来讲相比长的示列文字。相对来讲相比长的示列文字。相对来讲相比长的示列文字。绝对来讲比较长的示列文字。相对来讲相比较长的示列文字。相对来讲相比较长的示列文字。相对来讲比较长的示列文字。相对来讲比较长的示列文字。相对来讲相比长的示列文字。相对来讲相比较长的示列文字。相对来讲比较长的示列文字。相对来讲相比长的示列文字。

示列文字2:相对来说比较长的示列文字。相对来讲比较长的示列文字。相对来讲相比长的示列文字。相对来讲相比较长的示列文字。相对来说比较长的示列文字。相对来讲相比长的示列文字。相对来讲相比长的示列文字。相对来讲相比长的示列文字。相对来讲相比较长的示列文字。绝对来讲相比长的示列文字。相对来讲比较长的示列文字。相对来讲比较长的示列文字。相对来讲比较长的示列文字。相对来讲相比较长的示列文字。

页面中其余内容

设若在下边中的类名称叫div1下加一张图纸的话,那么地点的demo演示形成如上面包车型大巴了!

图片 4

运用float属性只怕position属性的布局劣势

图片 5

示列文字1:相对来讲比较长的示列文字。相对来讲比较长的示列文字。相对来讲相比长的示列文字。相对来讲相比较长的示列文字。相对来讲比较长的示列文字。相对来讲比较长的示列文字。相对来讲比较长的示列文字。相对来讲相比长的示列文字。绝对来讲比较长的示列文字。相对来讲比较长的示列文字。绝对来讲相比长的示列文字。相对来讲相比长的示列文字。相对来讲相比长的示列文字。相对来讲比较长的示列文字。

示列文字2:相对来讲相比长的示列文字。相对来说相比较长的示列文字。绝对来讲比较长的示列文字。相对来讲比较长的示列文字。相对来说相比长的示列文字。相对来讲相比长的示列文字。相对来讲相比较长的示列文字。相对来讲比较长的示列文字。相对来讲比较长的示列文字。相对来讲比较长的示列文字。相对来讲相比长的示列文字。相对来说相比长的示列文字。相对来讲相比长的示列文字。相对来讲比较长的示列文字。

页面中别的内容

     如上所示:使用float属性或position属性举办页面布局时有一个相比较鲜明的欠缺,正是第四个div元素与第4个div元素是个别独立的,因此假诺在首先个div成分中投入一些剧情的话,将会使得五个成分的尾巴部分不可能对齐,导致页面中多处一块空白区域。

    使用多栏布局能够化解地点的难点。下边我们一步步来,如下:

    1.率先大家先定义个div盒子.

       HTML代码如下:

<div class="box">我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</div>

       CSS代码如下:

.box {width:600px;background-color:yellow;}

功用如下:

自家是礼仪之邦人自身是礼仪之邦人自身是礼仪之邦人本身是华夏人本人是华夏人自个儿是中中原人本人是中华夏族自个儿是中华夏族本身是神州人本人是神州人本身是炎黄人笔者是炎白人作者是炎白人自身是中华人民共和国人本身是中夏族民共和国人自身是礼仪之邦人本人是礼仪之邦人自个儿是礼仪之邦人本人是华夏人自己是华夏人本人是中中原人自身是中夏族本人是中夏族本身是神州人我是神州人笔者是炎黄种人本人是炎黄种人本人是炎白人自个儿是中夏族民共和国人本人是中华夏族民共和国人本身是礼仪之邦人本人是礼仪之邦人本身是礼仪之邦人自个儿是华夏人自个儿是华夏人自身是华夏人小编是中夏族作者是中夏族自身是神州人本人是神州人本身是神州人本身是炎黄种人本身是炎黄种人自己是中夏族民共和国人自己是中华夏族民共和国人本人是礼仪之邦人本人是礼仪之邦人本身是礼仪之邦人本人是华夏人笔者是华夏人小编是华夏人本人是中夏族本身是中夏族本身是神州人自个儿是神州人本人是神州人自己是炎黄种人自己是炎黄种人自己是中夏族民共和国人本身是中华夏族民共和国人本人是中中原人民共和国人笔者是礼仪之邦人笔者是礼仪之邦人本身是华夏人自身是华夏人本人是中夏族自己是中华夏族本人是中中原人自己是神州人本人是神州人

   
2.应用多栏布局的率先性格格:column-count,column-count属性为叁个数字代表列数,不带单位,含义是将三个因素中的内容分成多栏举办显示。

HTML代码

<div class="box2">我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</div>

CSS代码如下:

.box2 {width:600px;background-color:yellow;-moz-column-count:2;-webkit-column-count:2;}

效用演示如下:

本人是炎黄人本身是炎黄人本身是中国人笔者是中华人民共和国人小编是礼仪之邦人自个儿是礼仪之邦人本人是礼仪之邦人自个儿是华夏人本身是华夏人本人是华夏人自己是中华夏族本身是中中原人本人是神州人自身是神州人本身是神州人作者是炎黄人小编是炎黄种人作者是中国人本人是中夏族民共和国人自身是中夏族民共和国人本人是礼仪之邦人本人是礼仪之邦人自己是华夏人自身是华夏人自己是华夏人自身是中华夏族自个儿是中夏族本人是中华夏族作者是神州人作者是神州人自个儿是炎黄种人自个儿是炎黄种人本身是中中原人民共和国人本人是中夏族民共和国人本身是中中原人民共和国人本人是礼仪之邦人本人是礼仪之邦人自身是华夏人本身是华夏人自个儿是华夏人小编是中中原人笔者是中夏族小编是神州人自身是神州人本身是神州人自己是炎白种人自身是炎黄人本人是炎白人本人是中华人民共和国人本人是中华夏族民共和国人本身是礼仪之邦人本身是礼仪之邦人自身是礼仪之邦人作者是华夏人笔者是华夏人自个儿是中华夏族本人是中华夏族自身是中中原人自个儿是神州人本人是神州人自个儿是炎黄人本人是炎黄种人本人是炎黄种人本身是中夏族民共和国人自个儿是中中原人民共和国人本身是礼仪之邦人作者是礼仪之邦人笔者是礼仪之邦人自个儿是华夏人自身是华夏人

     3.运用多栏布局的第二个天性:column-gap,使用column-gap属性来设定多栏之间的距离距离。

      HTML代码如下:

<div class="box3">我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</div>

CSS代码如下:

.box3 {width:600px;background-color:yellow;-moz-column-count:2;-webkit-column-count:2;-moz-column-gap: 60px;-webkit-column-gap: 60px;}

意义务演出示如下:

本身是中华夏族自个儿是中夏族本人是神州人自身是神州人自个儿是神州人自己是炎黄人自己是炎黄人自身是中国人笔者是中中原人民共和国人笔者是礼仪之邦人本人是礼仪之邦人自个儿是礼仪之邦人自个儿是华夏人本身是华夏人自己是中夏族自身是中中原人本身是中夏族自个儿是神州人自个儿是神州人本人是神州人小编是炎白人笔者是炎黄种人笔者是中国人自身是中夏族民共和国人本身是礼仪之邦人本人是礼仪之邦人本身是礼仪之邦人自己是华夏人本人是华夏人自身是华夏人本人是中中原人自身是中华夏族本身是神州人笔者是神州人作者是神州人自身是炎黄种人自身是炎黄种人本身是中华夏族民共和国人自己是中国人本身是中国人本身是礼仪之邦人本人是礼仪之邦人本身是华夏人本身是华夏人自己是华夏人自身是中夏族作者是中夏族小编是神州人本身是神州人自个儿是神州人自己是炎黄种人本人是炎黄人本人是中中原人民共和国人本身是中华人民共和国人本人是中中原人民共和国人本人是礼仪之邦人本人是礼仪之邦人自身是华夏人小编是华夏人小编是华夏人自个儿是中夏族本人是中夏族本身是神州人自个儿是神州人自己是神州人自己是炎黄种人自己是炎黄种人本人是炎白人本人是中国人自己是中华夏族民共和国人

  4.
应用多栏布局的第1个属性:column-rule,column-rule属性在栏与栏之间扩张一条间隔线,并且设定该间隔线的幅度,样式,颜色,该属性的钦命方法与css中的border属性钦命方法一样。

HTML代码如下:

<div class="box4">我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</div>

CSS代码如下:

.box4 {width:600px;background-color:yellow;-moz-column-count:2;-webkit-column-count:2;-moz-column-gap: 60px;-webkit-column-gap: 60px;-webkit-column-rule: 5px dashed #000;-moz-column-rule: 5px dashed #000;} 

成效演示如下:

本人是炎白种人自己是炎白人自己是炎白人本身是中华夏族民共和国人笔者是中华人民共和国人小编是礼仪之邦人自身是礼仪之邦人本人是礼仪之邦人自个儿是华夏人自个儿是华夏人自个儿是中华夏族自身是中中原人自己是中华夏族本人是神州人本身是神州人本人是神州人作者是炎黄种人小编是炎黄种人小编是中夏族民共和国人自身是中中原人民共和国人本人是礼仪之邦人自个儿是礼仪之邦人自己是礼仪之邦人自己是华夏人本人是华夏人自己是华夏人本身是中夏族自身是中夏族本身是神州人作者是神州人小编是神州人本身是炎白种人自个儿是炎黄种人自身是中华夏族民共和国人本身是中夏族民共和国人自个儿是中华夏族民共和国人本身是礼仪之邦人本人是礼仪之邦人本人是华夏人自己是华夏人本身是华夏人小编是中中原人笔者是中华夏族作者是神州人本身是神州人本人是神州人自个儿是炎黄人本人是炎黄种人自个儿是中夏族民共和国人本人是中华夏族民共和国人本身是中夏族民共和国人本身是礼仪之邦人自身是礼仪之邦人本身是华夏人笔者是华夏人作者是华夏人本人是中夏族自身是中夏族自个儿是神州人本人是神州人本身是神州人本人是炎黄人本人是炎黄人自己是中中原人民共和国人自个儿是中华夏族民共和国人本人是中华夏族民共和国人小编是礼仪之邦人小编是礼仪之邦人自身是华夏人本身是华夏人

 下边我们综合来看下 “使用多栏布局情势” 的demo如下:

HTML代码如下:

<div style="width:100%;overflow:hidden;" id="div-nd">      <h2 style="border-bottom:1px solid #333;">使用多栏布局方式</h2>      <div class="div1-nd">          <img src="http://m3.img.srcdd.com/farm4/d/2015/0228/21/88B00EB1D65E0890DDB5E032BA892AC2_B500_900_110_110.jpeg"/>          <p>示列文字1:相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。</p>          <p>示列文字2:相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。</p>      </div>      <div class="div3-nd">页面中其他内容</div>  </div>

CSS代码如下:

div.div1-nd {/*width:52em;*/-moz-column-width:26em;-webkit-column-width:26em;-moz-column-count:2;-webkit-column-count:2;}  div.div3-nd {width:100%;background-color:yellow;height:260px;}

效果与利益演示如下:

功能请点击demo

 使用多栏布局如上图,即使减轻了两块成分对齐的主题材料,但是自己个人认为2块区域并非单独的,第一块内容到了第二块内容上来了。

应用float属性或position属性时的症结—盒布局

  在css3中,除了下面的多栏布局之外,仍可以动用盒布局消除日前所说的选用float属性或position属性时左右两栏或多栏中底部无法对齐的难题.

  1.
诸如大家先来看下守旧的demo,HTML代码如下:

<div class="container">      <div class="left-sidebar">          <h2>左侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>      <div class="contents">          <h2>内容</h2>          <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>      </div>      <div class="right-sidebar">          <h2>右侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>  </div>

CSS代码如下:

.left-sidebar {float:left;width:200px;padding:26px;background-color:orange;}  .right-sidebar {float:left;width:200px;padding:26px;background-color:limegreen;}  .contents {float:left;width:240px;padding:26px;background-color:yellow;}  .container {width:100%;overflow:hidden;}

亲自去做如下:

中国

左侧边栏

  • 超链接
  • 超链接
  • 超链接
  • 超链接
  • 超链接

图片 6

内容

本身是神州人自个儿是炎白人自个儿是炎白种人自个儿是炎白人本人是中夏族民共和国人本人是中中原人民共和国人自己是礼仪之邦人小编是礼仪之邦人笔者是礼仪之邦人本身是华夏人自身是华夏人自身是中夏族本身是中华夏族本身是中华夏族自个儿是神州人自身是神州人本人是神州人自身是炎黄人本身是炎黄种人自个儿是中夏族民共和国人小编是中华夏族民共和国人作者是礼仪之邦人本人是礼仪之邦人本身是礼仪之邦人自个儿是华夏人自己是华夏人自个儿是中中原人本人是中华夏族本人是中华夏族本身是神州人自身是神州人自个儿是神州人作者是炎黄种人我是炎黄种人本身是中国人自个儿是中夏族民共和国人本人是礼仪之邦人自个儿是礼仪之邦人本身是礼仪之邦人本人是华夏人本身是华夏人本身是中夏族本人是中中原人本身是中中原人笔者是神州人作者是神州人笔者是炎黄种人自个儿是炎黄种人自己是炎白人自个儿是中华夏族民共和国人本身是中夏族民共和国人自己是礼仪之邦人自己是礼仪之邦人自己是礼仪之邦人本人是华夏人本身是华夏人本人是华夏人我是中华夏族笔者是中华人本人是神州人本身是神州人本身是神州人本身是炎黄种人自己是炎黄人自己是中中原人民共和国人本人是中国人自己是礼仪之邦人本人是礼仪之邦人本身是礼仪之邦人本人是华夏人

中国

左手边栏

  • 超链接
  • 超链接
  • 超链接
  • 超链接
  • 超链接

 2.
在css3中,通过box属性来选取盒布局。使用盒布局如下:

HTML代码如下:

<div class="container2">      <div class="left-sidebar2">          <h2>左侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>      <div class="contents2">          <h2>内容</h2>          <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>      </div>      <div class="right-sidebar2">          <h2>右侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>  </div>

CSS代码如下:

.container2 {display:-moz-box;display:-webkit-box;}  .left-sidebar2 {width:200px;padding:26px;background-color:orange;}  .right-sidebar2 {width:200px;padding:26px;background-color:limegreen;}  .contents2 {width:280px;padding:26px;background-color:yellow;}

demo演示如下:

第2天
2015-08-02

左臂边栏

  • 超链接
  • 超链接
  • 超链接
  • 超链接
  • 超链接

图片 7
图片 8
图片 9
图片 10
图片 11
图片 12
图片 13
图片 14
图片 15
图片 16
图片 17
图片 18
图片 19
图片 20
图片 21
图片 22
图片 23
图片 24
图片 25
图片 26
图片 27
图片 28
图片 29
图片 30
图片 31
图片 32
图片 33
图片 34
图片 35
图片 36
图片 37
图片 38
图片 39
图片 40
图片 41
图片 42
图片 43
图片 44
图片 45
图片 46
图片 47
图片 48
图片 49
图片 50
图片 51
图片 52
图片 53
图片 54
图片 55
图片 56
图片 57
图片 58
图片 59
图片 60
图片 61
图片 62

内容

自己是神州人自个儿是神州人本人是炎黄人本人是炎黄种人本身是中华夏族民共和国人自个儿是中夏族民共和国人本身是中夏族民共和国人作者是礼仪之邦人作者是礼仪之邦人本身是华夏人自个儿是华夏人自身是中夏族自己是中中原人自己是中中原人自己是神州人自身是神州人本人是炎黄种人自己是炎黄种人本人是炎黄种人笔者是中华夏族民共和国人小编是中中原人民共和国人本人是礼仪之邦人自身是礼仪之邦人本人是礼仪之邦人本身是华夏人本人是华夏人本身是中夏族本身是中夏族本人是中中原人本人是神州人自身是神州人自个儿是炎黄种人小编是炎黄种人我是炎黄人本人是中华人民共和国人本身是中华夏族民共和国人自个儿是礼仪之邦人自己是礼仪之邦人本人是礼仪之邦人本人是华夏人自己是华夏人自己是中华人本身是中华夏族自个儿是中华夏族小编是神州人小编是神州人笔者是炎白人自个儿是炎黄种人本人是炎黄种人自个儿是中中原人民共和国人自个儿是中中原人民共和国人自己是礼仪之邦人本人是礼仪之邦人自个儿是礼仪之邦人本身是华夏人自身是华夏人本身是中夏族作者是中华夏族作者是中中原人自个儿是神州人本身是神州人自身是炎黄种人自己是炎白人自个儿是炎白种人本身是中华人民共和国人本人是中中原人民共和国人自己是礼仪之邦人本身是礼仪之邦人自身是礼仪之邦人我是华夏人

第3天
2015-08-03

入手边栏

  • 超链接
  • 超链接
  • 超链接
  • 超链接
  • 超链接

   盒布局与多栏布局的界别:使用多栏布局时,各栏宽度必须是特别的,在钦命每栏宽度时,也不得不为全体栏钦赐三个会集的幅度,栏与栏之间的肥瘦一点都不大概是不均等的。

   3.
选择自适应窗口的弹性盒布局,若是我想反正两边固定,中间自适应,能够动用box-flex属性.

   比如HTML代码如下:

<div class="container3">      <div class="left-sidebar3">          <h2>左侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>      <div class="contents3">          <h2>内容</h2>          <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>      </div>      <div class="right-sidebar3">          <h2>右侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>  </div>

CSS代码如下:

.container3 {display:-moz-box;display:-webkit-box;}  .left-sidebar3 {width:200px;padding:26px;background-color:orange;}  .right-sidebar3 {width:200px;padding:26px;background-color:limegreen;}  .contents3 {-moz-box-flex:1;-webkit-box-flex:1;padding:26px;background-color:yellow;}

demo演示如下:

中国 图片 63

左边边栏

  • 超链接
  • 超链接
  • 超链接
  • 超链接
  • 超链接

中国

内容

自己是炎白人自身是中国人本身是中华夏族民共和国人本人是礼仪之邦人本身是礼仪之邦人自己是礼仪之邦人本人是华夏人自己是华夏人自个儿是中夏族自身是中中原人本人是中夏族小编是神州人作者是神州人我是炎黄种人本身是炎黄人自个儿是炎黄种人本身是中中原人民共和国人本人是中中原人民共和国人本人是礼仪之邦人本人是礼仪之邦人自己是礼仪之邦人本身是华夏人自己是华夏人自个儿是华夏人作者是中夏族笔者是中夏族自个儿是神州人自身是神州人自身是神州人本身是炎黄人本人是炎黄人本人是中夏族民共和国人本人是中夏族民共和国人自身是中中原人民共和国人本人是礼仪之邦人自个儿是礼仪之邦人本身是华夏人作者是华夏人笔者是华夏人本人是中夏族本身是中夏族本人是神州人自个儿是神州人本人是神州人本人是炎黄人自个儿是炎白人本人是炎黄人本身是中中原人民共和国人自身是中中原人民共和国人作者是礼仪之邦人笔者是礼仪之邦人作者是华夏人本人是华夏人自身是华夏人本身是中华夏族本身是中华夏族本身是神州人自己是神州人本身是神州人自身是炎白种人自身是炎黄种人本身是炎黄种人作者是中华夏族民共和国人作者是中国人自身是礼仪之邦人自身是礼仪之邦人本身是华夏人本身是华夏人自己是华夏人自己是中华夏族

图片 64

入手边栏

  • 超链接
  • 超链接
  • 超链接
  • 超链接
  • 超链接

 4. 改形成分的体现顺序–能够由此box-ordinal-group属性来改造各因素的彰显顺序,能够在每一种成分的体制中到场box-ordinal-group属性,该属性使用四个意味着序号的整数属性值,浏览器在体现的时候依据该序号从小到大来体现那个成分。

 比方如下HTML代码:

<div class="container4">      <div class="left-sidebar4">          <h2>左侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>      <div class="contents4">          <h2>内容</h2>          <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>      </div>      <div class="right-sidebar4">          <h2>右侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>  </div>

CSS代码如下:

.container4 {display:-moz-box;display:-webkit-box;}  .left-sidebar4 {width:200px;padding:26px;background-color:orange;-moz-box-ordinal-group:3;-webkit-box-ordinal-group:3;}  .right-sidebar4 {width:200px;padding:26px;background-color:limegreen;-moz-box-ordinal-group:2;-webkit-box-ordinal-group:2;}  .contents4 {-moz-box-flex:1;-webkit-box-flex:1;padding:26px;background-color:yellow;-moz-box-ordinal-group:1;-webkit-box-ordinal-group:1;}

demo演示如下:

中国

左臂边栏

  • 超链接
  • 超链接
  • 超链接
  • 超链接
  • 超链接

图片 65

内容

本身是中国人本身是中夏族民共和国人自个儿是礼仪之邦人本人是礼仪之邦人本人是礼仪之邦人本身是华夏人本身是华夏人自身是中中原人笔者是中中原人我是中华夏族自个儿是神州人自个儿是神州人自个儿是炎黄种人本人是炎黄种人本人是炎黄种人自己是中中原人民共和国人本人是中华夏族民共和国人本人是礼仪之邦人本身是礼仪之邦人本人是礼仪之邦人自个儿是华夏人作者是华夏人笔者是中华夏族本人是中华夏族本人是中华夏族本身是神州人自个儿是神州人本人是炎黑人自身是炎黄种人本身是中夏族民共和国人自个儿是中国人本人是礼仪之邦人笔者是礼仪之邦人笔者是华夏人自身是华夏人本人是华夏人本人是中夏族自己是中中原人本身是中中原人自己是神州人本身是神州人自个儿是炎黄人本人是炎黄种人本身是炎黄种人笔者是中华夏族民共和国人小编是中华夏族民共和国人本身是礼仪之邦人本人是礼仪之邦人本身是礼仪之邦人自己是华夏人自个儿是华夏人本身是中中原人本人是中中原人自己是中华夏族自身是神州人自己是神州人本人是炎黄人笔者是炎黄人小编是炎黄种人本人是中国人本人是中国人自身是礼仪之邦人自己是礼仪之邦人本身是礼仪之邦人本身是华夏人本人是华夏人本身是中夏族本人是中华夏族自身是中华夏族作者是神州人

中国

左臂边栏

  • 超链接
  • 超链接
  • 超链接
  • 超链接
  • 超链接

 5.
 改变成分的排列方向–使用弹性盒布局的时候,我们得以相当粗略地将三个成分的排列方向从品位方向修改为垂直方向,或然从垂直方向修改为水平方向,在css3中,使用box-orient来内定八个成分的排列方向

HTML代码如下:

<div class="container5">      <div class="left-sidebar5">          <h2>左侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>      <div class="contents5">          <h2>内容</h2>          <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>      </div>      <div class="right-sidebar5">          <h2>右侧边栏</h2>          <ul>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>              <li><a href="">超链接</a></li>          </ul>      </div>  </div>

CSS代码如下:

.container5 {display:-moz-box;display:-webkit-box;-moz-box-orient:vertical;-webkit-box-orient:vertical;}  .left-sidebar5 {padding:26px;background-color:orange;-moz-box-ordinal-group:3;-webkit-box-ordinal-group:3;}  .right-sidebar5 {padding:26px;background-color:limegreen;-moz-box-ordinal-group:2;-webkit-box-ordinal-group:2;}  .contents5 {-moz-box-flex:1;-webkit-box-flex:1;padding:26px;background-color:yellow;-moz-box-ordinal-group:1;-webkit-box-ordinal-group:1;}

demo演示如下:

图片 66

左手边栏

  • 超链接
  • 超链接
  • 超链接
  • 超链接
  • 超链接

中国

内容

自己是神州人自身是炎黄种人自个儿是炎黄人自身是中夏族民共和国人本身是中中原人民共和国人自个儿是中中原人民共和国人自身是礼仪之邦人自身是礼仪之邦人本人是华夏人自己是华夏人本身是华夏人作者是中中原人小编是中中原人笔者是神州人自身是神州人本身是神州人本身是炎黄种人自个儿


图片 67

中国

图片 68

中国

图片 69

中国

图片 70

中国

图片 71

中国

图片 72

中国

图片 73

中国

图片 74

中国

图片 75

中国

图片 76

中国

图片 77

中国

图片 78

网站地图xml地图