带来一篇相对定位(absolute)和浮动定位(float)
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。网页制造poluoluo文章简介：在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源文件中元素声明的地位显得分外主要。固然，办理这个成绩的最复杂的办法就是在源文件中互换左栏和右栏的声明序次，也无方法不必互换各栏的序次也能够完成一样的结构，可是，这就要用到一种对照流畅的利用负边距值的办法。一样平常情形下，人们十有八九会选择互换源文件中左中两栏的声明序次。
这工具比表格好的唯一就是你可以定义一个ID，想怎么玩它就怎么玩他，表格用来处理显示数据，DIV+css+TABLE就行了，都什么年代了，以前没有DIV，而且386的年代不也一样，现在都奔腾4了 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。 直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。
页:
[1]