CSS教程之CSS完成网页分栏结构的办法：相对定位和浮动

最新版本html5+CSS3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。
破洛洛文章简介：在CSS中，完成分栏结构有两种办法。第一种办法是利用四种CSS定位选项（absolute、static、relative和fixed）中的相对定位（absolutepositioning），它能够将文档中的某个元素从其底本地位上移除，偏重新定位在希冀的任何地址之上。第二种则是利用CSS中的浮动（float）
在CSS中，完成分栏结构有两种办法。第一种办法是利用四种CSS定位选项（absolute、static、relative和fixed）中的相对定位（absolutepositioning），它能够将文档中的某个元素从其底本地位上移除，偏重新定位在希冀的任何地址之上。第二种则是利用CSS中的浮动（float）观点。
相对定位或浮动都可以用来完成分栏效果。两者能够自力利用，也能够分离在一同，相反相成。
1、相对定位
相对定位的上风在于，我们能够涓滴不差地准确把持任何元素的地位—这内里没有甚么必要推测大概命运的成份。因为使用了相对定位的元素被不留陈迹地从惯例文档流中完整移除，以是它也不会为其他元素带来任何的影响。
那末让我们试一试用相对定位怎样完成上面的结构。

登录/注册后可看大图

这是一个三栏的结构，而且是居中显现的。个中，A栏是主体内容栏，B栏和C栏都是侧边栏。起首，我们不成能间接用相对定位将A、B、C三栏定位到居中的地位，由于每一个人显现器的分辩率是分歧的，在1024X768分辩率的显现器上定位的居中效果，在其余分辩率的显现器上看到的效果一定不会是居中显现的，那末，该怎样办理这个成绩呢？
幸亏，在相对定位模子中有个极其有效的特征，那就是：若某个相对定位元素的容器也被定位过，那末该元素指定的top和left值将不会基于文档的根元素html（也就是扫瞄器窗口的左上角）盘算，而是会基于其容器的左上角盘算这个偏移量。换句话说，也就是：被定位过的容器将饰演个中一切元素相对定位肇端点的脚色。
以是，使用这个特征，我们给A、B、C栏的内部加上一个容器D，以下图：

登录/注册后可看大图

然后，我们让容器D居中，并给它加上一个属性：position:relative，如许，再用相对定位定位A、B、C的top和left值，A、B、C的地位就会基于容器D的左上角的地位来盘算了，如许就能够完成我们希冀的三栏居中的效果了。
可是，我们经常使用的结构并没有这么复杂，除三栏以外，我们还必要一个页头和一个页脚，以下图：

登录/注册后可看大图

这时候候，再用相对定位结构就行欠亨了，由于相对定位的元素会从文档流中完整移除，这时候，页脚会紧挨着页头，显现在页头的下方。
假如我们必定要接纳相对定位的话，那末必需事后晓得这三栏中每栏的高度，然后再依据个中最高的一栏定位页脚。如果恣意一栏中的文本长度没法断定的话，除利用JavaScript，我们也只能保持相对定位的动机，转而投进到浮动结构的度量。
2、浮动
浮动的本意是要将拔出到文章中的图片向左大概向右浮动，使图片下方的笔墨主动围绕在它的四周，使图片的右边大概右侧不会呈现一年夜块的留白。
浮动的语法固然复杂，但却不那末简单把握，上面让我们举例申明怎样用浮动来举行结构。一样，我们要完成一个带页脚的三栏结构。以下图：

登录/注册后可看大图

怎样用浮动完成如许的效果呢？实在很复杂：
1、设定E的宽度，让E居中
2、设定A、B、C的宽度，将A、B、C分离向左浮动
3、给页脚设置clear属性
必要申明的是，浮动结构仍然遵守惯例文档流，以是与相对定位比拟，浮动定位时HTML源文件中元素声明的地位显得分外主要。固然，办理这个成绩的最复杂的办法就是在源文件中互换左栏和右栏的声明序次，也无方法不必互换各栏的序次也能够完成一样的结构，可是，这就要用到一种对照流畅的利用负边距值的办法。一样平常情形下，人们十有八九会选择互换源文件中左中两栏的声明序次。

可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

学Dreamweaver技术的过程其实是一个增加信心的过程。

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。