偶看新闻向日葵鲜花活:再学“绝对定位”（二）
来源：百度文库 编辑：偶看新闻 时间：2024/05/03 15:22:19
写于2010-11-07 15:36:28 阅读:221 分类:源代码练习 作者:习之
摘要：这里是一个音画练习作品的实例，和对应的源代码。目的是为了直观地理解绝对定位和“原点”的概念。
再学“绝对定位”（二）
下面是用源代码做的一个音画练习。一共有五个素材：背景图；枫树林的照片；透明flash小菊花；唐诗《山行》；音乐播放器。除了背景图外，其余四个都采用了“绝对定位”。全篇源代码全部用div层来实现：在外面是一个相对定位层，用来规划绝对定位层的原点，原点就位于背景层的左上角 （发散阳光处）。这个音画，无论拷贝到那里，这个“原点”是一起拷贝过去的，因此所有绝对定位的内容都不会飘走。
',1)">
',2)">
唐·杜牧
《山行》
远上寒山石径斜，
白云生处有人家。
停车坐爱枫林晚，
霜叶红于二月花。
下面是上面音画的全部源代码：(11月11日前后加了居中标签)
上面的源代码用不同的颜色表示了不同的内容。最外层红色的代码（id="d1"）就是一个用来规划原点的相对定位层。第二行黑色的代码，是一个用img标签显示的一张背景图，它是一个不用绝对定位表示的内容；蓝色的代码 （id="d2"）是枫树林照片的定位层，照片用了4px宽的白色边框；夹在蓝色代码里的黄色代码 （id="d2_1"）是一个嵌套的div层，用于只有两个按钮的音乐播放器，位于枫林照片的右下角。接下来的白色代码 （id="d3"）是左下角的透明Flash小花；下面的紫色代码 （id="d4"）是右面的唐诗《山行》，它采用了直排的文本格式。
从代码的架构来分析，上面的代码共有五个定位层，分三个层级：最外面的相对定位层d1是第一级，显示背景图；第二级是d2枫林照、d3小花Flash、d4唐诗；第三级是隶属于枫林照的d2_1音乐播放器。特别要说明的是这里有意安排了这个div的嵌套层-音乐播放器层，它也是一个绝对定位层，但它嵌套在枫林照的绝对定位层内，这样的安排使枫林照和音乐播放器绑定。由于嵌套的关系，音乐播放器层的原点就移到了枫林照的左上角。 如果改变枫林层的坐标数据，可以不必改变音乐播放器层的坐标值，播放器始终位于枫林照的右下角。
这里一共有五个div定位层，因此有五对标签，上面代码梯级显示可以看出它们一一对应的关系。最后一个红色标签是对应第一行的红色的div起始标签。
对于各层的坐标（left、top）数据，因为知道了坐标的原点位置，都是可以简单计算得到的。例如小花Flash层的top数据：top=背景图高-Flash高=360-120 = 240。
在计算枫林照的位置时，要注意照片有4px的边框，照片大小是360*240，实际的面积是368*248，代码里取了top=60，因此照片的下面空52（照片略偏下）。
理论上，坐标位置还可以设置right和bottom，但这时必须设置层的width和height。很多时候，我们并不是实际计算left和top的，而是边调整，边观察，合适为止。因为计算结果与实际显示的位置还会有偏差，特别是top数据。在老小孩老版本里大约要差4px，因此实际调整最重要。
在最外层的相对定位层里增加了宽、高、及超出该面积范围的部分设置成“隐藏”（overflow:hidden）。这是因为音画的大小是已知的600*360，那么将露出外面的内容（有时候有意要截去一点Flash）隐藏起来不显示，这能解决边缘不整齐的现象。
音画发表到博客上，还有个“对齐”的问题。因为相对定位里有left的设置，可以改变left的值，调整音画在博客里的左右位置。通常我们只要它“居中”显示，那么可以将这段代码套在一个表格(table)标签里，在table里设置 align="center" 对中属性。这是简单可靠的方法。也可以在这组代码的前后加center标签（前是起始标签，后是结束标签，必须要有，不能省），但是前提是定位层一定要设置层的宽度。
要实现上面音画的效果可以用不同的方法。不一定只用div标签，可以用table与div相结合，相对和绝对相结合，等等。这里只是为了练习定位层的使用方法而特意这样写的。
我们了解了绝对定位的概念，那么上面的音画里，背景图也可以换成一篇文章、一张信纸、一个flash等等，在背景音画上可以加多个flash，也可以加gif图、文字、移动字幕等等。div定位层还可以嵌套，只要熟练掌握定位层的用法，我们可以制作出许许多多丰富多彩的音画。
--END--
摘要：这里是一个音画练习作品的实例，和对应的源代码。目的是为了直观地理解绝对定位和“原点”的概念。
再学“绝对定位”（二）下面是用源代码做的一个音画练习。一共有五个素材：背景图；枫树林的照片；透明flash小菊花；唐诗《山行》；音乐播放器。除了背景图外，其余四个都采用了“绝对定位”。全篇源代码全部用div层来实现：在外面是一个相对定位层，用来规划绝对定位层的原点，原点就位于背景层的左上角 （发散阳光处）。这个音画，无论拷贝到那里，这个“原点”是一起拷贝过去的，因此所有绝对定位的内容都不会飘走。
',1)">',2)">
唐·杜牧
《山行》
远上寒山石径斜，
白云生处有人家。
停车坐爱枫林晚，
霜叶红于二月花。
下面是上面音画的全部源代码：(11月11日前后加了居中标签)
 width="320" height="240" style="border: 4px solid #ffeeee" >flashvars="mp3=http://www.ttxfood.com/images/pf.mp3&autostart=1&autoreplay=1" width="42" height="20" wmode="transparent"> wmode="transparent"> 唐·杜牧 《山行》 远上寒山石径斜， 白云生处有人家。 停车坐爱枫林晚， 霜叶红于二月花。 |
上面的源代码用不同的颜色表示了不同的内容。最外层红色的代码（id="d1"）就是一个用来规划原点的相对定位层。第二行黑色的代码，是一个用img标签显示的一张背景图，它是一个不用绝对定位表示的内容；蓝色的代码 （id="d2"）是枫树林照片的定位层，照片用了4px宽的白色边框；夹在蓝色代码里的黄色代码 （id="d2_1"）是一个嵌套的div层，用于只有两个按钮的音乐播放器，位于枫林照片的右下角。接下来的白色代码 （id="d3"）是左下角的透明Flash小花；下面的紫色代码 （id="d4"）是右面的唐诗《山行》，它采用了直排的文本格式。
从代码的架构来分析，上面的代码共有五个定位层，分三个层级：最外面的相对定位层d1是第一级，显示背景图；第二级是d2枫林照、d3小花Flash、d4唐诗；第三级是隶属于枫林照的d2_1音乐播放器。特别要说明的是这里有意安排了这个div的嵌套层-音乐播放器层，它也是一个绝对定位层，但它嵌套在枫林照的绝对定位层内，这样的安排使枫林照和音乐播放器绑定。由于嵌套的关系，音乐播放器层的原点就移到了枫林照的左上角。 如果改变枫林层的坐标数据，可以不必改变音乐播放器层的坐标值，播放器始终位于枫林照的右下角。
这里一共有五个div定位层，因此有五对标签，上面代码梯级显示可以看出它们一一对应的关系。最后一个红色标签是对应第一行的红色的div起始标签。
对于各层的坐标（left、top）数据，因为知道了坐标的原点位置，都是可以简单计算得到的。例如小花Flash层的top数据：top=背景图高-Flash高=360-120 = 240。
在计算枫林照的位置时，要注意照片有4px的边框，照片大小是360*240，实际的面积是368*248，代码里取了top=60，因此照片的下面空52（照片略偏下）。
理论上，坐标位置还可以设置right和bottom，但这时必须设置层的width和height。很多时候，我们并不是实际计算left和top的，而是边调整，边观察，合适为止。因为计算结果与实际显示的位置还会有偏差，特别是top数据。在老小孩老版本里大约要差4px，因此实际调整最重要。
在最外层的相对定位层里增加了宽、高、及超出该面积范围的部分设置成“隐藏”（overflow:hidden）。这是因为音画的大小是已知的600*360，那么将露出外面的内容（有时候有意要截去一点Flash）隐藏起来不显示，这能解决边缘不整齐的现象。
音画发表到博客上，还有个“对齐”的问题。因为相对定位里有left的设置，可以改变left的值，调整音画在博客里的左右位置。通常我们只要它“居中”显示，那么可以将这段代码套在一个表格(table)标签里，在table里设置 align="center" 对中属性。这是简单可靠的方法。也可以在这组代码的前后加center标签（前是起始标签，后是结束标签，必须要有，不能省），但是前提是定位层一定要设置层的宽度。
要实现上面音画的效果可以用不同的方法。不一定只用div标签，可以用table与div相结合，相对和绝对相结合，等等。这里只是为了练习定位层的使用方法而特意这样写的。
我们了解了绝对定位的概念，那么上面的音画里，背景图也可以换成一篇文章、一张信纸、一个flash等等，在背景音画上可以加多个flash，也可以加gif图、文字、移动字幕等等。div定位层还可以嵌套，只要熟练掌握定位层的用法，我们可以制作出许许多多丰富多彩的音画。
--END--
如何使用DIV标签的定位（如何绝对定位和相对定位）
css绝对定位。
dreamweaver里如何使页面元素绝对定位？
.net（网页）中用div做的菜单，窗体在windows中改变大小，下拉菜单也跟着错位。如何绝对定位？
谁能给我一个用DW8可视化写CSS的教程。另外 问一下绝对定位，与相对定位
绝对挑战—七年级数学问题
绝对挑战—七年级数学问题
绝对挑战—七年级数学问题
绝对挑战—七年级数学问题
绝对挑战—七年级数学
综合英语(一)（二）在校外怎么学？
学行政管理（二本）到哪里学好？？
哪里有卖高中二期数学新教材（上海）
绝对（成语）
对对子（绝对）
选呀（绝对简单~~~~~~~~）
征下联（绝对）
财富（中文版） 定位是什么？
.net(C#)中div做的下拉菜单，采用绝对定位，网页页面大小改变时，菜单也跟着错位。如何能相对定位？
高二历史怎么学？
高二地理怎么学？
高二政治怎么学？
外科护理学二答案
高二数学学什么