发信人: xmzw(小米粥)
整理人: morefeetin(2001-05-10 08:09:24), 站内信件
|
作者：honestqiao OSO奥索
你知道用DreamWave和FrontPage的层吗？不管你是否知道，读了这篇文章，你都会用新的收获。
用过DreamWave（我用的是DreamWave3和4）做过网页的人 ，都知道DreanWave中有个Layer，也就是层，这个层的作用是非常大的，它可以帮助你更好的为页面布局，把你的网页上的每一个元素都摆放的服服贴贴、稳稳当当。
实际上，很少有人知道FrontPage（我用的是FrontPage2000）中也有层，而且比DreamWave的代码更简洁，那它在哪儿呢？她就在元素属性的格式中的定位里。比如一个表格，你查看“表格属性”，左下角有一个<样式(S)...>按钮，点击它会弹出一个“修改样式”的对话框，它的左下角有一个<格式按钮D>，点击它，会有一个下拉菜单，最下面一个是<定位O>，我们要找的就是它，现在进入，就是“定位”对话框了，选择“绝对”，就有了一个和DreanWave中一样的层了，你可以把这个表格任意拖动了，想放在哪儿都可以，和DreanWave相比，它是直接给表格定位了，所以代码就更简洁了。其他的元素也可以定位的。
真正的高手还是喜欢自己亲自为你的元素加上定位的，这样代码更简洁，也能更好的发挥层的作用。
要给你的元素定位，要用到DHTML中的CSS样式表了，我们可以为一个容器型HTML标志加上STYLE属性，也就是风格属性，在风格属性中，就可以运用定位了。具体语法如下：
STYLE="position:patt;left:latt;top:tatt;width:watt;height:hatt;clip:catt;overflow:oatt;z-index:zatt;visibility:vatt"
说明：属性 值 定义
patt:absolute 定位的原点以网页的左上角为（0，0，0）
relative 定位的原点以前一个元素为（0，0，0）
static 不定位
latt:length x坐标以象素点定位，任意整数
percentage 百分数定位，任意百分数
auto 自动定位
tatt:length y坐标，其余同latt
percentage
auto
watt:length 宽度，其余同latt
percentage
auto
hatt:length 高度，其余同latt
percentage
auto
catt:shape:rect(top right bottom left)
剪切方式,显示（top,right）~（bottom,left）矩形
内的内容,均为整数值
auto 自动
oatt:visible 超出部分显示
hidden 不显示
scroll 加滚动条
auto 自动
zatt:auto 自动
integer z坐标，也就是第三维坐标，任意整数
vatt:inherit 可见
visible 不可见，但不消失
hidden 消失
你只需要按上面的格式在元素的属性中加入，就可以为元素定位了。
如果你会用JavaScipt，你也可以动态改变相对属性。例如：改变top和left可以让元素运动起来，改变height和width可以动态改变元素的大小，改变clip可以动态显示元素的一部分，改变overflow可以动态显示超出的部分，改变z-index可以形成一种三维的效果，动态改变元素之间的前后显示位置，该表visibility可以隐藏元素。
许多网页上的小天使或者眼睛或者星星，都是用动态改变top和left来让它运动的，而许多网页上用的弹出菜单是用动态改变visibility来实时显示隐藏的层，或者改变z-index让它先显示到背景后，要用时在显示到最前面。
如果有兴趣的朋友可以和我一同切磋一下。([email protected])
|
|