欢迎来到天天文库
浏览记录
ID:11909158
大小:26.82 KB
页数:39页
时间:2018-07-14
《网页布局技术(web layout technology)》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、网页布局技术(Weblayouttechnology)Baiduspace
2、Baiduhomepage
3、login100hundredyearsofcloudsoverseawaitingtimebusy,solifeemptyslim;tappingintothenetseafanpage,twopageblogalbumrottenmachineacrossthe
4、profile
5、friendsseearticleDIV+CSSpagelayouttechnology[Web2.0]200706Wednesday,PM,02:48CSSlayoutcommon
6、lyusedmethod:float:none
7、left
8、rightValue:None:defaults.ObjectsarenotfloatingTheleft:textflowstotherightoftheobjectTheright:textflowstotheleftoftheobjectHowdoesitwork?LookatanexampleofarowoftwocolumnsXhtml:hereisthefirstcolumn
9、sthesecondcolumn,
10、absolute
11、fix
12、ed
13、relativeValue:Static:defaults.Nospecialpositioning,objectsfollowHTMLpositioningrulesAbsolute:drawsobjectsfromthedocumentstreamandusesleft,right,top,bottom,andotherattributestomakeabsolutepositioningrelativetotheirnearest,mostlocalizedparentobject.Ifthereisnosuchparentobject,thenthe
14、bodyobject.ThestackisdefinedbytheZ-indexpropertyFixed:notsupported.Objectorientationfollowsabsolute(absolute)mode.ButfollowsomerulesRelative:objectsarenotstackable,buttheyareoffsetinthenormaldocumentstreambasedonattributessuchasleft,right,top,bottom,andsoonItimplementsanexampleofarowo
15、ftwocolumnsXhtml:hereisthefirstcolumnhereisthesecondcolumn,CSS:Therelativepositioningof*/width:770px#wrap{position:relative;}/*;#column1{position:absolute;top:0;left:0;width:300px;}#column2{position:absolute;top:0;rig
16、ht:0;width:470px;}What'sthedifferencebetweenthem?Obviously,floatisrelativelypositionedandchangeswiththesizeandresolutionofthebrowser,andthepositiondoesn'twork,soingeneral,it'sthefloatlayout!CSScommonlayoutinstanceSinglelineBody{margin:0px;padding:0px;text-align:center;}#content{margin
17、-left
此文档下载收益归作者所有