代码入门教程(23)

代码入门教程（23）第二章标签应用第三十一节定位标签应用（3）本节继续讲解定位标签的应用。下面讲解两个方面的内容：一、css的绝对定位与相对定位；二、绝对定位应用举例（移动顶图、移动底图、左右侧图、大图片中添加小图片。）。一、css的绝对定位与绝对定位：css的绝对定位样式代码：style="LEFT:0px;WIDTH:940px;POSITION:absolute;TOP:20px"绝对定位(absolute)，将赋予此定位的对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则，则依据body对象左上角作为参考点进行定位。css的相对定位样式代码：style="LEFT:0px;WIDTH:940px;POSITION:relative;TOP:20px"相对定位是指相对它应该在的位置所做的移动，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。绝对定位应用举例:（一）移动顶图代码：<divstyle="left:0px;top:24px;position:absolute;"class="divBorderStyle"><marqueestyle="left:0px;width:1350px;"height="280"behavior="alternate"scrollAmount="3"><tablestyle="width:1350px;"border="0"cellSpacing="0"cellPadding="0"height="280"><tbody><tr><td><imgstyle="border-width:0px;margin:0px;width:450px;height:280px;"border="0"alt=""src="http://image48.360doc.com/DownloadImg/2012/01/1214/20700769_17.jpg"width="450"height="275"><imgstyle="border-width:0px;margin:0px;width:450px;height:280px;filter:FlipH;"alt=""src="http://image48.360doc.com/DownloadImg/2012/01/1214/20700769_17.jpg"><imgstyle="border-width:0px;margin:0px;width:450px;height:280px;"border="0"alt=""src="http://image48.360doc.com/DownloadImg/2012/01/1214/20700769_17.jpg"width="450"height="275"><imgstyle="border-width:0px;margin:0px;width:450px;height:280px;filter:FlipH;"alt=""src="http://image48.360doc.com/DownloadImg/2012/01/1214/20700769_17.jpg"><imgstyle="border-width:0px;margin:0px;width:450px;height:280px;"border="0"alt=""src="http://image48.360doc.com/DownloadImg/2012/01/1214/20700769_17.jpg"width="450"height="275"><imgstyle="border-width:0px;margin:0px;width:450px;height:280px;filter:FlipH;"alt=""src="http://image48.360doc.com/DownloadImg/2012/01/1214/20700769_17.jpg"></td><td><embedstyle="width:0px;height:0px;"height="0"type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer"width="0"src="http://373194360.16789.net/domName/373194360/20073181102914288.swf"wmode="transparent"autostart="1"quality="high"></td></tr></tbody></table></marquee></div>代码解析：1、此代码先设置了一个块区标签、一个移动标签和一套标签。2、在块区标签中设置了绝对定位的样式：居左：0px，居上：24px。定位这个位置确定了制作的顶图上边缘的起点，它不会“遮盖”图馆首页上方的“首页、阅览室、馆友、装扮我的首页、消息、帮助、留言交流、登录、退出”一行按钮。3、在移动标签中设置了绝对定位的样式：居左：0px，宽度：1350px。这个定位确定了制作的顶图能够在图书馆首页上方“全屏幕”显示。高度：280px，适合选用了首页皮肤为钟爱一生、幸福左岸的馆友使用。使用其它首页皮肤的馆友可以根据自己选用的首页皮肤修改这个高度。4、在表格的第一个单元格中，输入了六个宽度为450px、高度为280px的图片（六个图片的总宽度必须大于移动屏幕的宽度）；在表格的第二个单元格中，插入了一个隐藏的播放器。5、应用此代码制作的作品为有背景音乐的、全屏显示的移动顶图。（二）移动底图代码：<divstyle="left:0px;position:absolute;down:0px;"class="divBorderStyle"><marqueestyle="left:0px;width:1350px;"height="280"behavior="alternate"scrollAmount="3"><tablestyle="width:1350px;"border="0"cellSpacing="0"cellPadding="0"height="280"><tbody><tr><td><imgstyle="border-width:0px;margin:0px;width:450px;height:280px;"border="0"alt=""src="http://image48.360doc.com/DownloadImg/2012/01/1214/20700769_17.jpg"width="450"height="275"><imgstyle="border-width:0px;margin:0px;width:450px;height:280px;filter:FlipH;"alt=""src="http://image48.360doc.com/DownloadImg/2012/01/1214/20700769_17.jpg"><imgstyle="border-width:0px;margin:0px;width:450px;height:280px;"border="0"alt=""src="http://image48.360doc.com/DownloadImg/2012/01/1214/20700769_17.jpg"width="450"height="275"><imgstyle="border-width:0px;margin:0px;width:450px;height:280px;filter:FlipH;"alt=""src="http://image48.360doc.com/DownloadImg/2012/01/1214/20700769_17.jpg"><imgstyle="border-width:0px;margin:0px;width:450px;height:280px;"border="0"alt=""src="http://image48.360doc.com/DownloadImg/2012/01/1214/20700769_17.jpg"width="450"height="275"><imgstyle="border-width:0px;margin:0px;width:450px;height:280px;filter:FlipH;"alt=""src="http://image48.360doc.com/DownloadImg/2012/01/1214/20700769_17.jpg"></td><td><embedstyle="width:0px;height:0px;"height="0"type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer"width="0"src="http://373194360.16789.net/domName/373194360/20073181102914288.swf"quality="high"autostart="1"wmode="transparent"></td></tr></tbody></table></marquee></div>代码解析：移动底图与移动顶图的代码基本相同，只要把块区标签中的代码top:24px修改为down:0px即可。当然了，移动标签、表格标签、图片标签中的高度值都可以适当加大。（三）左侧图代码：<divstyle="left:0px;top:304px;position:absolute;"class="divBorderStyle"><marqueestyle="left:0px;width:180px;"direction="up"height="800"scrollAmount="3"><tablestyle="width:180px;height:1200px;text-align:left;border-collapse:collapse;"border="0"cellSpacing="0"cellPadding="0"><tbody><tr><td><ahref="http://www.360doc.com/Edit/www.360doc.com/userhome/4127803"><imgstyle="border-width:0px;margin:0px;width:180px;height:300px;"border="0"alt="“春天没来”欢迎您"src="http://image34.360doc.com/DownloadImg/2011/08/2207/16226241_14.jpg"__1315194367359__="ev_7249579202"></a></td></tr><tr><td><ahref="http://www.360doc.com/Edit/www.360doc.com/userhome/4127803"><imgstyle="border-width:0px;margin:0px;width:180px;height:300px;"border="0"alt="“春天没来”欢迎您"src="http://image34.360doc.com/DownloadImg/2011/08/2207/16226241_13.jpg"__1315194367359__="ev_9296735104"></a></td></tr><tr><td><ahref="http://www.360doc.com/Edit/www.360doc.com/userhome/4127803"><imgstyle="border-width:0px;margin:0px;width:180px;height:300px;"border="0"alt="“春天没来”欢迎您"src="http://image34.360doc.com/DownloadImg/2011/08/2207/16226241_12.jpg"__1315194367359__="ev_9296735104"></a></td></tr><tr><td><ahref="http://www.360doc.com/Edit/www.360doc.com/userhome/4127803"><imgstyle="border-width:0px;margin:0px;width:180px;height:300px;"border="0"alt="“春天没来”欢迎您"src="http://image34.360doc.com/DownloadImg/2011/08/2207/16226241_11.jpg"__1315194367359__="ev_9296735104"></a></td></tr><tr><td><ahref="http://www.360doc.com/Edit/www.360doc.com/userhome/4127803"><imgstyle="border-width:0px;margin:0px;width:180px;height:300px;"border="0"alt="“春天没来”欢迎您"src="http://image34.360doc.com/DownloadImg/2011/08/2207/16226241_10.jpg"__1315194367359__="ev_9296735104"></a></td></tr><tr><td><ahref="http://www.360doc.com/Edit/www.360doc.com/userhome/4127803"><imgstyle="border-width:0px;margin:0px;width:180px;height:300px;"border="0"alt="“春天没来”欢迎您"src="http://image34.360doc.com/DownloadImg/2011/08/2207/16226241_9.jpg"__1315194367359__="ev_9296735104"></a></td></tr><tr><td><ahref="http://www.360doc.com/Edit/www.360doc.com/userhome/4127803"><imgstyle="border-width:0px;margin:0px;width:180px;height:300px;"border="0"alt="“春天没来”欢迎您"src="http://image34.360doc.com/DownloadImg/2011/08/2207/16226241_8.jpg"__1315194367359__="ev_9296735104"></a></td></tr><tr><td><ahref="http://www.360doc.com/Edit/www.360doc.com/userhome/4127803"><imgstyle="border-width:0px;margin:0px;width:180px;height:300px;"border="0"alt="“春天没来”欢迎您"src="http://image34.360doc.com/DownloadImg/2011/08/2207/16226241_7.jpg"__1315194367359__="ev_9296735104"></a></td></tr><tr><td><ahref="http://www.360doc.com/Edit/www.360doc.com/userhome/4127803"><imgstyle="border-width:0px;margin:0px;width:180px;height:300px;"border="0"alt="“春天没来”欢迎您"src="http://image35.360doc.com/DownloadImg/2011/09/0513/17071963_14.jpg"__1315194367359__="ev_9296735104"></a></td></tr><tr><td><ahref="http://www.360doc.com/Edit/www.360doc.com/userhome/4127803"><imgstyle="border-width:0px;margin:0px;width:180px;height:300px;"border="0"alt="“春天没来”欢迎您"src="http://image35.360doc.com/DownloadImg/2011/09/0513/17071963_2.jpg"__1315194367359__="ev_9296735104"></a></td></tr><tr><td><ahref="http://www.360doc.com/Edit/www.360doc.com/userhome/4127803"><imgstyle="border-width:0px;margin:0px;width:180px;height:300px;"border="0"alt="“春天没来”欢迎您"src="http://image35.360doc.com/DownloadImg/2011/09/0513/17071963_17.jpg"__1315194367359__="ev_9296735104"></a></td></tr><tr><td><ahref="http://www.360doc.com/Edit/www.360doc.com/userhome/4127803"><imgstyle="border-width:0px;margin:0px;width:180px;height:300px;"border="0"alt="“春天没来”欢迎您"src="http://image35.360doc.com/DownloadImg/2011/09/0513/17071963_16.jpg"__1315194367359__="ev_9296735104"></a></td></tr><tr><td><ahref="http://www.360doc.com/Edit/www.360doc.com/userhome/4127803"><imgstyle="border-width:0px;margin:0px;width:180px;height:300px;"border="0"alt="“春天没来”欢迎您"src="http://image35.360doc.com/DownloadImg/2011/09/0513/17071963_8.jpg"__1315194367359__="ev_9296735104"></a></td></tr><tr><td><ahref="http://www.360doc.com/Edit/www.360doc.com/userhome/4127803"><imgstyle="border-width:0px;margin:0px;width:180px;height:300px;"border="0"alt="“春天没来”欢迎您"src="http://image35.360doc.com/DownloadImg/2011/09/0513/17071963_7.jpg"__1315194367359__="ev_9296735104"></a></td></tr><tr><td><ahref="http://www.360doc.com/Edit/www.360doc.com/userhome/4127803"><imgstyle="border-width:0px;margin:0px;width:180px;height:300px;"border="0"alt="“春天没来”欢迎您"src="http://image35.360doc.com/DownloadImg/2011/09/0513/17071963_3.jpg"__1315194367359__="ev_9296735104"></a></td></tr></tbody></table></marquee></div>代码解析：1、上面的代码是左侧图的代码。块区标签中设置了绝对定位的样式：style="left:0px;top:304px;position:absolute;"表格中每行设置一个单元格，每个单元格内放置一个图片。2、移动标签、表格标签、图片标签中的宽度设置为180px——190px为宜。3、把块区标签、移动标签中的左（left）修改为右（right），其它的代码不变，就是右侧图的代码。（四）大图片中添加小图片代码：<divalign="center"><tableborder="0"cellSpacing="0"cellPadding="10"width="600"background="http://image48.360doc.com/DownloadImg/2011/11/2518/20260762_10.jpg"align="center"><tbody><tr><td><tableborder="0"cellSpacing="10"width="600"background="http://image48.360doc.com/DownloadImg/2011/11/2518/20260762_8.jpg"><tbody><tr><td><tableborder="0"cellSpacing="7"cellPadding="0"width="600"background="http://image48.360doc.com/DownloadImg/2011/11/2518/20260762_9.gif"><tbody><tr><td><tableborder="0"cellSpacing="3"cellPadding="0"width="600"background="http://image48.360doc.com/DownloadImg/2011/11/2518/20260762_10.jpg"><tbody><tr><td><tableclass="divBorderStyle"border="0"cellSpacing="3"cellPadding="0"width="769"background="http://image41.360doc.com/DownloadImg/2011/11/0219/18959862_11"height="970"><tbody><tr><td><divstyle="left:440px;top:634px;position:absolute;"class="divBorderStyle"><embedheight="508"type="application/x-shockwave-flash"align="middle"pluginspage="http://www.macromedia.com/go/getflashplayer"width="354"src="http://tmflash.6000y.com/flashxuexi/QQ249181841-376.swf"wmode="transparent"invokeurls="false"quality="high"allowScriptAccess="never"flashvars="pic=204342K12-4.jpg&fldr=Mar2010&ww=354&hh=508"allowNetworking="internal"></div><divstyle="left:150px;top:860px;position:absolute;"class="divBorderStyle"><imgstyle="width:400px;height:404px;"title="东方女性之魅力"border="0"alt="“春天没来”欢迎您"src="http://image57.360doc.com/DownloadImg/2012/12/1806/28992262_2.gif"></div><divstyle="left:200px;top:280px;position:absolute;"class="divBorderStyle"><embedheight="300"type="application/octet-stream"width="780"src="http://yemaishuyin.web-33.com/user/yemaishuyin/wysc-tmfls/45.swf"allowNetworking="internal"allowScriptAccess="never"quality="high"invokeurls="false"wmode="transparent"></div></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></div>代码解析：1、此代码先设置了一个居中对齐的块区标签，在块区标签中放入一个五重表格；2、在第五层表格的单元格中设置了三个块区标签。在第一个块区标签中，设置了“居左440px，居上634px”的绝对定位样式，在块区的首标签与尾标签之间放入了一个“高度为508px宽度为354px”的女模特动画图片。在第二个块区标签中，设置了“居左150px，居上860px”的绝对定位样式，在块区的首标签与尾标签之间放入了一个“高度为404px宽度为400px”的gif图片。在第三个块区标签中，设置了“居左200px，居上280px”的绝对定位样式，在块区的首标签与尾标签之间放入了一个“高度为300px宽度为780px”的闪光动画图片。作业：作业：1、认识css的绝对定位与相对定位的样式代码。2、在360图书馆中收集你喜爱的图片，将图片地址替换到上面的代码中，试着制作移动顶图、移动底图、移动左侧图、移动右侧图各一篇。3、应用css的绝对定位样式代码，在大图中添加几个小图片。4、通过你的制作，体会css的绝对定位样式代码的用法。2012年12月28日于北京第二章标签应用第三十二节定位标签应用（4）本节继续讲解定位标签的应用。下面讲解相对定位代码的应用：1、错位边框中的移动动画；2、相框中的移动相片。css的相对定位样式代码：style="LEFT:0px;WIDTH:940px;POSITION:relative;TOP:20px"相对定位是指相对它应该在的位置所做的移动，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。相对定位代码的应用举例：一、错位边框中的移动动画：代码：<table><tbody><tr><td><center><tableborder="5"borderColor="darksalmon"width="500"background="http://image27.360doc.com/DownloadImg/2011/04/1417/10915275_23.jpg"height="440"><tbody><tr><td><center><marqueedirection="up"height="440"width="500"scrollAmount="1"><embedheight="500"type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"width="600"src="http://xn.2000y.net/328428/uploadpic/2011022313575029707.swf"invokeURLs="false"WMode="Transparent"AllowScriptAccess="never"allowNetworking="internal"></marquee></center></td></tr></tbody></table></center><center><divstyle="left:100px;top:-170px;width:500px;height:440px;position:relative;"class="divBorderStyleRelative"><tableborder="5"borderColor="#55ccbb"width="450"background="http://image27.360doc.com/DownloadImg/2011/04/1417/10915275_56.jpg"height="440"><tbody><tr><td><center><marqueedirection="up"height="350"width="400"scrollAmount="1"><embedheight="500"type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"width="600"src="http://xn.2000y.net/328428/uploadpic/2011022313561181193.swf"allowNetworking="internal"AllowScriptAccess="never"WMode="Transparent"invokeURLs="false"></marquee></center></td></tr></tbody></table></div></center></td></tr></tbody></table>代码解析：1、这是一个特殊的网页，两个边框位置互相错开，有相互重叠的部分。设置的要点为：在总表格的单元格内放置了两个表格，把第二个表格又放置到了一个设置了css相对定位样式style="left:100px;top:-170px;width:500px;height:440px;position:relative;"的块区之中。把居左的数值设置为100px（left:100px），居上的数值设置为-170px（top:-170px）。2、在正常情况下，总表格中的第二个分表格在第一个分表格的下方，与第一个分表格是对齐的，由于把第二个分表格放入了设置了css相对定位样式的块区中，所以，第二个分表格向右上方移动了，向右移动了100px，向上移动了150px。3、在两个分表格的单元格中，各设置了一个移动标签，移动标签内各放置了一个动画图片。二、相框中的移动相片：代码：<tablestyle="left:0px;top:0px;position:relative;"id="table1"width="416"height="479"><tbody><tr><td><marqueeheight="475"width="412"loop="10"scrollAmount="3"><imgborder="0"src="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg"width="416"height="479"><imgborder="0"src="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_2.jpg"width="416"height="479"><imgborder="0"src="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_1.jpg"width="416"height="479"><imgborder="0"src="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_6.jpg"width="416"height="479"><imgborder="0"src="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_5.jpg"width="416"height="479"></marquee><divstyle="left:3px;top:3px;position:absolute;"class="divBorderStyle"height="479"width="416"><imgstyle="left:0px;top:0px;"src="http://image52.360doc.com/DownloadImg/2012/05/2208/24265553_69.jpg"></div></td></tr></tbody></table>代码解析：1、在表格的单元格中设置了一个移动标签，移动标签中放入了5个图片标签。移动标签的下面设置一个块区标签，块区标签中设置了绝对定位代码position:absolute。把相框的图片标签放置到了块区标签与它的尾标签之间。2、移动屏幕的规格要略小于表格与相框图片的规格（宽度与高度都小5px为宜）；移动屏幕的规格与表格的规格要相同。3、表格标签中设置了css的相对定位样式代码style="left:0px;top:0px;width:413px;position:relative;"为下面块区中设置的绝对定位代码提供了定位参考点。你可试着修改一下相对定位代码style="left:0px;top:0px;width:413px;position:relative;"中“居左”和“居上”的数值，观察其效果，深刻理解绝对定位的定位参考点：绝对定位是相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则，则依据body对象左上角作为参考点进行定位。在上面的代码中，块区标签中的绝对定位的参考点是表格，由于表格标签中设置了相对定位代码，所以无论把表格标签中相对定位的代码“居左”和“居上”的数值作任何的修改，相框图片和移动的相片之间的位置始终不变，它们都是同时向同一位置偏移的。4、块区中设置的宽度与高度是相框图片的宽度与高度。作业：1、认识css相对定位的样式代码。2、学会应用CSS相对定位样式代码。3、应用CSS相对定位样式style="left:0px;top:0px;position:relative;"制作一篇作品。代码入门教程(1)代码入门教程(2)代码入门教程(3)代码入门教程(4)代码入门教程(5)代码入门教程(6)代码入门教程(7)代码入门教程(8)代码入门教程(9)代码入门教程(10)代码入门教程(11)代码入门教程(12)代码入门教程(13)代码入门教程(14)代码入门教程(15)代码入门教程(16)代码入门教程(17)代码入门教程(18)代码入门教程(19)代码入门教程(20)代码入门教程(21)代码入门教程(22)代码入门教程(23)代码入门教程(24)