DIV教程之CSS教程:定位属性Position
你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。网页制造POLUOLUO文章简介：CSS定位属性Position详解.
CSS中最经常使用的结构类属性，一个是Float(CSS浮动属性Float详解)，另外一个就是CSS定位属性Position。
1.position:static
一切元素的默许定位都是：position:static，这意味着元素没有被定位，并且在文档中呈现在它应当在的地位。
一样平常来讲，不必指定position:static，除非想要掩盖之前设置的定位。
#div-1{
position:static;
}
2.position:relative
假如设定position:relative，就能够利用top,bottom,left和right来相对元素在文档中应当呈现的地位来挪动这个元素。【意义是元素实践上仍然占有文档中的原有地位，只是视觉上相对它在文档中的原有地位挪动了】
#div-1{
position:relative;
top:20px;
left:-40px;
}
3.position:absolute
当指定position:absolute时，元素就离开了文档【即在文档中已不占有地位了】，能够正确的依照设置的top,bottom,left和right来定位了。
#div-1a{
position:absolute;
top:0;
right:0;
width:200px;
}
网页制造POLUOLUO文章简介：CSS定位属性Position详解.
4.position:relative+position:absolute
假如我们给div-1设置relative定位，那末div-1内的一切元素城市绝对div-1定位。假如给div-1a设置absolute定位，就能够把div-1a挪动到div-1的右上方。
#div-1{
position:relative;
}
#div-1a{
position:absolute;
top:0;
right:0;
width:200px;
}
5.两栏相对定位
如今就能够利用绝对定位和相对定位来做一个两栏结构了。
#div-1{
position:relative;
}
#div-1a{
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b{
position:absolute;
top:0;
left:0;
width:200px;
}
6.两栏相对定位定高
一种计划是给元素设定流动高度。但这类计划对年夜多半计划来讲不太合适，由于一样平常我们不晓得元素中会有几文本，大概将要利用的准确的字号。
#div-1{
position:relative;
height:250px;
}
#div-1a{
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b{
position:absolute;
top:0;
left:0;
width:200px;
}
网页制造POLUOLUO文章简介：CSS定位属性Position详解.
7.浮动
关于可变高度的列来讲，相对定位就不起感化了，以下是别的一个计划。
我们能够浮动一个元素，使它挪动到右边/右侧，而且是文本围绕着它。这次要用于图象，但这里我们把它用于一个庞大的结构义务(由于这是我们独一的工具)。
#div-1a{
float:left;
width:200px;
}
8.浮动列
假如我们把一个元素向左浮动，而且把第二个元素也向左浮动，theywillpushupagainsteachother。
#div-1a{
float:left;
width:150px;
}
#div-1b{
float:left;
width:150px;
}
9.扫除浮动列
在浮动元素以后，我们能够扫除浮动来使其他元素准确定位。
#div-1a{
float:left;
width:190px;
}
#div-1b{
float:left;
width:190px;
}
#div-1c{
clear:both;
}
英文原文：LearnCSSPositioninginTenSteps
中文译文：CSSPosition
网上冲浪无论你用InternetExplorer还是NetscapeNavigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。
页:
[1]