您的位置：首页 > 数据库 > Oracle

oracle清除归档日志

2013-12-23 19:30 267 查看

1.在页面布局中创建分栏的基本手段有两种：浮动布局和绝对定位布局
浮动布局实现简单，但是要确保分栏的总宽度不能超过布局宽度，否则右侧的分栏会被挤下去。不过，通过组合使用overflow属性和“内部div”（四章中有提到），可以解决这个问题。推荐使用浮动布局方法！！
绝对定位布局不会产生断裂的情况，但是由于分栏采取绝对定位，它们之间也就没有任何关系了。这样就难以创建流动式布局，而且页脚也不会自动向下推。虽然通过js可以解决。
2.简单的两栏式布局
html框架：
<body>
<div id=”main_wrapper”>
<div id=”header”>
<div id=”header_inner”>
</div>
</div>

<div id=”nav”>
<div id=”nav_inner”>
</div>
</div>

<div id=”content”>
<div id=”content_inner”>
</div>
</div>

<div id=”footer”>
<div id=”footer_inner”>
</div>
</div>
</body>

一个大div包含四个小div，每个小div还包含一个内部div。使用内部div可以极大的简化为布局添加样式和修改布局的工作量，通过内部div可以解决在为分栏应用外边距、边框、内边距时，经常会遇到的盒模型的问题。对带有关键性宽度的元素，作者倾向于为它们嵌套一个内部div。
CSS规则：
body {
      text-align:center //for ie6
}
#main_wrapper {
      840px; //总的宽度
      margin-left: auto; //在浏览器中居中布局，下同
      margin-right: auto;
      text-align:left; // fore ie6
}
#header{

}
#nav {
      22%;
      float:left; //浮动
}
#content {
      78%;
      float:left; //浮动，只要这两者的宽度之和为100%，配合overflow属性，就能做到固定的浮动布局
      top:0px;
}
#footer {
      clear:both;//清除，否则会挤占nav下面的空白
}
#header_inner, #nav_inner, #content_inner, #footer_inner {
      overflow:hidden; //隐藏过大元素
}
#header_inner {
      padding:1em 2em;
}
#nav_inner {
      padding:1em .8em;
      border-right:3px solid #833
}
#content_inner {
      padding:0 1em 1em 1.5em;
}
#footer_inner {
      padding:.5em 1em;
      text-align:center;
}
overflow属性是为了防止由于过大的内容导致布局分裂而设置的，有时候，也可能需要移除在div上设置的overflow属性。
3.简单的两栏流动式布局
上面的布局方式对不同大小的屏幕无法做出适应性的调整，因此，创建能够适应任意屏幕大小的流动式布局对用户而言会更加友好。
对2的修改：
#main_wrapper {
      840px; //总的宽度
      margin-left: auto; //在浏览器中居中布局，下同
      margin-right: auto;
      text-align:left; // fore ie6
      max-; //添加最大和最小宽度，但是IE6不支持这两个属性，需要添加额外的js
      min-;
}
#nav {
      22%;
      ;nav的宽度固定为140px
      float:left; //浮动
}
#content {
      78%; //width的默认值为auto，这也是内容分栏保持流动的条件。
     float:left; //浮动，只要这两者的宽度之和为100%，配合overflow属性，就能做到固定的浮动布局取消浮动，否则由于width的长度同main_wrapper一致而
      top:0px;                                                                                                                 导致宽度不够，内容分栏会被挤到下面
      margin-left:140px；// 为内容分栏添加140px的左外边距，如果没有这一条，则content会挤占nav下面的空间，不过貌似问题也不大（书上说会出现重合的情况，但我觉得应该和文字环绕图像的情况差不多）
}

4.三栏固定宽度布局
跟两栏差不多
5三栏流动式布局
threecolwrap：浮动（貌似不是必须吧），宽度100%。包含twocolwrap栏和promo栏
twocolwrap：浮动，宽度100%，margin-right：-170px，包含nav栏和content栏
nav：浮动，宽度-150px
content：宽度auto（默认），不浮动（原因同两栏流动），margin-left：150px，margin-right：170px
promo：浮动，宽度170px
最关键的是两栏的margin-right为负数，同时设置content的右外边距170px，这样可以让出右边的170px，欺骗浏览器右边还有170px的空间让promo浮上来。
还有一个关键的属性display，举例：float元素后跟一块级元素，如果块级元素的没有浮动，则它们的左上角位置会重合（当然，其中的内容并不重合）。如果块级元素的display设置成inline，则它们的位置就不会重合（有待进一步确认）。
6.设计长度相同的分栏
上面的几种布局，各个分栏的长度是不一样的（因为其中的内容多少不一样，内容多的会自动向下推，内容少的则固定长度），有两种方法可以做到分栏长度相同
人造分栏：为布局的背景添加一副与分栏具有相同颜色的图像，设置repeat-y属性和方向属性（right或者left），比较简单，但要保证图片宽度和分栏宽度一致。
编程方式扩展div：当页面加载后，通过js找到其中最长分栏的高度，然后将其他分栏的高度也设置为相同
7.绝对定位布局
书上说绝对定位布局时页脚必须放在content中，否则页脚无法自动向下推。我自己也试了下，貌似不行，不过有点想不通，为什么用一个relative的div包含中间三个栏后，后面的页脚不能显示？

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航