|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
这工具比表格好的唯一就是你可以定义一个ID,想怎么玩它就怎么玩他,表格用来处理显示数据,DIV+CSS+TABLE就行了,都什么年代了,以前没有DIV,而且386的年代不也一样,现在都奔腾4了
网页制造poluoluo文章简介:网页制造进修教程:CSSPosition.
1.position:static
一切元素的默许定位都是:position:static,这意味着元素没有被定位,并且在文档中呈现在它应当在的地位。
一样平常来讲,不必指定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;}
复制代码 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;}
复制代码 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;}
复制代码
现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV+CSS的框架模式,更加印证了DIV+CSS是大势所趋。 |
|