company logo
advertisement for deep fried Twinkies


有关于页面的布局

 

1.垂直盒子

html:要让它们垂直排列

  1. <div id = 'wrap'>
  2.         <div id='header'></div>
  3.         <div id='main'></div>
  4.         <div id='footer'></div>
  5. </div>


css:
   box-flex  ：兄弟元素之间比例，仅作一个系数。如果不指定高度，它们在这个盒子里会按指定的123比例来显示，如果有一列指定了高度，别两个会按比例占有剩下的空间，如果两个指定了高度，那么别一个会占剩下的所有空间

  1. #wrap{                                               // 父元素，包裹着三个子元素
  2.         display:-webkit-box;                 // 开启盒子模型
  3.         -webkit-box-orient:vertical;     // 设置为垂直盒子模型，默认为水平 horizontal
  4.       text-align:center;                      //内部居中显示
  5. }
  6. #header{                                           // 子元素1 
  7.         -webkit-box-flex:1;                   // 在父元素容器中，占一份
  8. }
  9. #main{                                              // 子元素2
  10.         -webkit-box-flex:2;                   // 在父元素容器中，占两份
  11. }
  12. #footer{                                            // 子元素3
  13.         -webkit-box-flex:3;                  // 在父元素容器中，占三份
  14. }

 

2.水平盒子

 

  1. #header_home {
  2.         display: -webkit-box;    // 开启盒子模型，默认即为水平  不用指定，因为是默认
  3.         position:relative;
  4. }

position的几个属性

引用

static : 　无特殊定位，对象遵循HTML定位规则 
absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框 
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 

3.垂直居中

这里用到了-webkit-box-align和-webkit-box-pack属性，配合display：-webkit-box 属性，此三句一起出现意思是“居中div框中的子元素”。

  1. <div style="display:-webkit-box;-webkit-box-align: center;-webkit-box-pack: center;height:100%;width:60px;">
  2.         <img height="40" width="40" src="../image/avatar_fangchan.png">
  3. </div>

4 固定位置的图片

右上角的小图标，让他直接在li标签中靠右、上对齐。

  1. li {
  2.         background-image:url('../image/relation_2du.png');   // 加载图片
  3.         background-size:32px;                    // 背景图片的尺寸
  4.         background-position:top right;     // 背景图片相对父元素li的位置为右、上
  5.         background-repeat:no-repeat;      // 不重复显示
  6. }
  1. #header .gossip{         /*顶部导航加入扫描，首页-右上角*/
  2.         width:60px;
  3.         background-image:url(../image/btn_gossip_bg.png);
  4.         -webkit-background-size:30px;
  5. }
  6. 下面的加进去就可不重复并居中
  7. background-repeat:no-repeat;   // header>div>a 作为背景图时不重复，search和gosip是加载的图片，这里设置它只显示一幅*/
  8.         background-position:center;      // header>div>a 作为背景图时的起始显示位置，这个属性当你设置一个值时，另一个值自动设置成center，这里的意思是水平、垂直居中*/

 

5 内容的显示

overflow:hidden;

overflow  可能的值

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

 

6.DIV固定于底部 

 

#gg { position:fixed; bottom:0; background:#000; width:100%; height:23px; line-height:23px; z-index:9999; opacity:.60;
filter:alpha(opacity=60); _bottom:auto; _width:100%; _position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-
(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)));
}

<div id ="gg"></div>