CSS实现网页分栏布局的方法：绝对定位和浮动

CSS实现网页分栏布局的方法：绝对定位和浮动的相关文章

• 
  CSS分栏布局的方法:绝对定位和浮动

  标签：Web开发

  在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项（absolute 、static、relative和fixed）中的绝对定位（absolute positioning），它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动（float）概念。 绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。 1、绝对定位 绝...[ 查看全文 ]

  蒙娜丽莎AiNi

  161
• 
  CSS分栏布局的方法：绝对定位和浮动

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。 进入论坛参与讨论 但是，我们常用的布局并没有这么简单，除了三栏之外，我们还需要一个页头和一个页脚，如下图： 这时候，再用绝对定位布局就行不通了，因为绝对定位的元素会从文档流中完全移除，这时，页脚会紧挨着页头，显示在页头的下方。 如果我们一定要采用绝对定位的话，那么必须预先知道这三栏中每一栏...[ 查看全文 ]

  想念你的XX

  211
• 
  CSS网页中的相对定位与绝对定位

  标签：Web开发

  在CSS中有这样的一个指令：(position)，在DreamWeaver中文版中翻译为“定位”，常用的属性有两个：relative(相对)与 absolute(绝对)。有很多朋友对这条指令的用法还是不清楚，这里做一些细致的讲解。 position:relative; 表示相对定位，被定位了这个属性的标签在所属的范围内可以进行上下左右的移，这里的移动与padding或是margin所产生的位置变化是不一样的。padding与margin是元素本身的一种边距与填...[ 查看全文 ]

  z291892042

  41
• 
  CSS网页布局：关于定位（position）

  标签：Web开发

  使用CSS来定位页面内层的位置，一直是比较难以掌握的事情，很多时候，往往被绝对定位的元素，总是以浏览器的左上角为坐标原点，此时，如果浏览器的大小改变，被定义的层就会偏离设计想要的位置，让人很挠头。 其实，要想控制好层的绝对定位，只要理解CSS中关于定位（position）的定义，一切就会变得轻松简单。 CSS中关于定位（position）是这样定义的： 定位（position）允许用户精确定义元素框出现的相...[ 查看全文 ]

  wj321501

  81
• 
  CSS中关于相对定位和绝对定位

  标签：Web开发

  style body {margin: 30px; font-size:9pt;} .a, .b, .c, .d, .e {    width: 100px;    height: 100px;    margin: 5 auto;    color: #fff;    background: #000; } .aa, .bb, .cc, .dd, .ee {    top: 10px;    left: 10px;    width: 10px;    height: 10px;    overflow: hidden;    ...[ 查看全文 ]

  龙耀鑫辰

  71
• 
  用CSS实现网页的绝对居中

  标签：Web开发

  6.FF1.5测试通过，绝对定位，直接定位上下左右，强制边局实现容器相对大小（标准）： 代码：略 7.ff1.5 IE5 IE6通过测试 HTML代码 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" html xmlns="//www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / titleVertical centering in valid a class...[ 查看全文 ]

  艾瑟nice

  31
• 
  CSS浮动布局基础

  标签：Web开发

  基于浮动的布局利用了float（浮动）属性来并排定位元素，并在网页上创建列。可以利用这个属性来创建一个环绕在周围的效果，例如环绕在照片周围，但是当你把它应用到一个div标签上时，浮动就变成了一个强大的网页布局工具。float属性把一个网页元素移动到网页（或者其他包含块）的一边。任何显示在浮动元素下方的HTML都在网页中上移，并环绕在浮动周围。 float属性接受3种不同值之一：left（左）、right...[ 查看全文 ]

  小辉8388

  51
• 
  CSS层的应用及其定位（绝对定位和相对定位）

  标签：Web开发

  层的随意定位的特性给网页设计者带来的很大的方便，但同时也带来了一定的麻烦。为什么这样说呢？ 大家都知道，为了让网页能够自动地适应用户设置的分辨率，在网页制作过程中人们采用了百分比的设置方式，从而页面的所有元素从新排版，保证原来的格式。但如果你在页面上使用了层，你会发现当浏览器大小改变时，层的位置却没有改变，结果它和其他的元素之间的配合出现了错位现象，页面变得杂乱无章了。而我...[ 查看全文 ]

  asaas971

  21
• 
  css布局实例:网页布局的方法

  标签：Web开发

  许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居中或顶部对齐显示。 但是你又不喜欢用table来实现他，那怎么办呢？实现的方法很多，有根据视觉错觉实现的，有用JS控制使高度相等的，还有采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。 其实...[ 查看全文 ]

  疯子VS教授

  261
• 
  CSS布局之浮动（二）

  标签：Web开发

  在上一个文章里写了关于左（右）侧定宽右（左）侧自动缩放的两列浮动，这个文章就要说一下三列浮动的问题了。在之前说过，两列浮动是其他多列浮动的基础，明白了两列浮动的原理后，三列或三列以上的多列浮动也变得简单。 左侧中间定宽，右侧自适应： 因边左侧跟中间都是定宽的，只有右侧是自适应宽度的，所以这个三列浮动是和两列浮动中的左侧定宽右侧自适应一样的道理，HTML结构代码如下： !...[ 查看全文 ]

  封一川

  21
• 
  网页布局 CSS简单实现垂直居中

  标签：Web开发

  英文原文： http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/ 中文译文： http://www.12sui.cn/blog/71.html 本人英语还没过四级，所以不能说是翻译把，只能说是按照自己的理解去叙述了一遍作者的意思，请各位多多指教。 译文内容 ： 当你发觉你曾经以为的事实其实并不是那样，你会感觉很开心。 旧的方法 经常做的第一件事通常是如何在 CSS 中控制元素水平或者垂直方向...[ 查看全文 ]

  皮吧外交

  91
• 
  css布局定位系列：相对定位

  标签：Html CSS布局 Div+CSS XHTML

  英文原文:http://brainjar.com/css/positioning/default.asp 翻译:零度，转载请注明本文英文原文出处以及本文地址!由于我英文水平有限，有不懂的地方还请阅读原文，欢迎交流! 相对定位 当一个元素被指明为{position:relative;}的时候，它开始是遵守正常流规则的(也就是说，如果你不给他任何规则，他就和正常的一样，译者注)，它周围元素相应的被定位。然后，元素盒根据它的属性值偏移。 ...[ 查看全文 ]

  二九浪人

  51
• 
  CSS布局之浮动（一）

  标签：Web开发

  CSS浮动一直是个比较让人郁闷的问题，很多的布局问题都出在浮动上，特别是当浮动的列数很多时，但其实只要理解了两列结构的浮动，面对多列数的浮动也不会再心慌，因为两列结构的左右浮动是最基本的浮动，也是更多浮动的基础，三列、四列等的浮动都是出于此的。 来看一下几种常见的CSS两列浮动，CSS代码见以下各分类，HTML结构代码如下： !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitiona...[ 查看全文 ]

  zjq9_0ra4b18l

  31
• 
  CSS教程:网页布局定位及z-index解释

  标签：Web开发

  声明 定位元素： position属性值设置除默认值static以外的元素，包括relative，absolute，fixed。 平台：win/IE win/FF z-index 用来确定定位元素在垂直于显示屏方向（以下称为Z轴）上的层叠顺序 值：auto | 整数 | inherit 默认：auto 适用于：定位元素 继承性：no 理解stacking context 每个box都归属于一个stacking context,它是元素在z轴方向上定位的参考。根元素形成 root stacking conte...[ 查看全文 ]

  戈壁AND马勒

  111
• 
  CSS教程:position 绝对定位的问题

  标签：Web开发

  今天做页的时候，遇到了一个问题：div无法对父对象绝对定位。 div id="fa"      div id="so" style="position:absolute; top:0; right:12px"      /div /div 但是发现无论怎么调整都是针对body定位，郁闷！ 看了下css手册，也没发现有什么不对。到网上查了下，发现了这么一句话：absolute 脱离文档流，通过 top,bottom,left...[ 查看全文 ]

  maomaochong833

  21
• 
  css教程：网页布局

  标签：Web开发

  用CSS 来布局很容易。如果你已经习惯用表格布局的话，起先会感觉比较困难。其实不难，只不过动机不同，并且在实践中更有意义。 你可以把这一页面的各个部分当作独立的版块来看待，无论你选择哪一块。你可以绝对或相对地用彼块取代此块。 定位 定位属性position用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）。 static值是元素的默认值，它会按照普通顺序...[ 查看全文 ]

  jonvey123

  81
• 
  CSS网页布局排查错误的方法

  标签：Web开发

  虽然浏览器可能存在着很多Bug，但是并不是与自己感觉不一样的时候就是出现了Bug。产生问题的原因可能有很多种，因此制作者需要一定的方法来排查问题。 选择一个先进的浏览器进行测试是明智的做法，例如对CSS 2.1支持比较好的Opera 9.2、Firefox 2.0或者Safari 3.0，而不要使用IE 6作为唯一的测试浏览器，因为IE 6的问题是最多的，这非常不利于制作者（特别是初学者）理解CSS 2.1的规范与判断浏览器的表现是...[ 查看全文 ]

  0心情激荡0

  11
• 
  网页CSS技巧：闭合浮动元素超级简单的方法

  标签：Web开发

  关于闭合浮动元素（clearing float）的方法现在已经很多了，你还不了解的话去old9的blog看看，有一篇闭合浮动元素。 这些方法我最喜欢就是 使用:after 伪类动态的嵌入一个用于清除浮动的元素，可惜代码量太大了，看着不够简洁。现在我看到有个方法超级简单。赶紧介绍一下。 原理是这样的，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见。见W3C的解释： In addition, if the ele...[ 查看全文 ]

  冷温柔狗

  21
• 
  CSS之绝对定位深入研究

  标签：Web开发

  一、下看个两个例子 1.xhtml代码 body div class="relative" span class="absolute"Test absolute/span /div /body 2.css代码 .relative { position:relative;height:120px; border:2px solid black; } .absolute { position:absolute; top:10px; left:10px; padding:5px; text-align:center; b...[ 查看全文 ]

  menghao170

  11
• 
  div css网页布局入门

  标签：Web开发

  你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换...[ 查看全文 ]

  ___末世微凉

  41