|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
可以增加更多的用户而不需要建立独立的版本。可以一次设计,随处发布。
基于浮动的结构使用了float(浮动)属性来并排定位元素,并在网页上创立列。能够使用这个属性来创立一个围绕在四周的效果,比方围绕在照片四周,可是当你把它使用到一个<div>标签上时,浮动就酿成了一个壮大的网页结构工具。float属性把一个网页元素挪动到网页(大概其他包括块)的一边。任何显现在浮动元素下方的HTML都在网页中上移,并围绕在浮动四周。
float属性承受3种分歧值之一:left(左)、right(右)和none(无)。要把一张图片移到网页的右侧,能够创立这个类款式,并把它使用到<img>标签上:
.floatRight{float:right;}
不异的属性使用到一个充斥内容的<div>标签上也能够创立一个工具条:
#sidebar{
float:left;
width:170px;}
1-3展现了这两个款式的感化。
注重:none值封闭了任何浮动,把元素像一个一般的没有浮动的元素一样定位。这只要已使用到元素的浮动有效时才有效。你大概有一个使用了特定类如“sidebar”的元素,这个元素浮动到右侧。但在网页中,你大概要带有这个类的元素不要浮动,可是又要安排在网页流以内,就如这个“注重”方框。经由过程用float:none创立一个更详细的CSS选择器能够避免这个元素浮动。
如1-3的一个复杂的两列计划只必要几个步骤。
1.把每列都包抄在一个带有ID大概class属性的<div>标签内里。
在1-3中,列在右边工具条中的旧事项目被包抄在一个<div>内里――<divid="news">,而且主内容在另外一个div内里――<divid="main">。
2.把工具条<div>浮动到右侧大概右边。
当你利用浮动时,源按次(增加HTML到一个文件的按次)很主要。浮动元素的HTML必需显现在要包抄它的元素的HTML后面。
1-4展现了3个两列的计划。右边的图表展现了网页HTML的源按次:给banner的一个<div>,前面随着sidebar的<div>,最初是maincontent的<div>。在右侧,你能够看到实践的网页结构。在HTML中sidebar在maincontent后面,因而它能够浮动到右边(上图,下图)大概右侧(中图)。
3.给浮动的sidebar设定一个宽度。
除非你正浮动一张带有预设宽度的图片,不然你应当一直给浮动设定一个宽度。如许,给浮动元素创立一个流动的尺寸,使扫瞄器给其他内容腾出了包抄该地位的空间。
这个宽度多是一个流动的尺寸好比170px大概10em。你也能够对基于扫瞄器窗口宽度的弹性计划利用百分比。假如sidebar是20%宽,扫瞄器窗口是700px宽,那末sidebar将是140px宽。可是假如会见者调剂窗口尺寸为1000px,那末sidebar也增年夜为200px。流动宽度的sidebar更简单计划,由于你不用思索sidebar舒展时的一切分歧宽度。但是,百分比让你在两列之间坚持不异的比例,可使其更悦目。
注重:当全体的网页计划是一个流动宽度时,sidebar的百分比宽度值也取决于包括元素的流动宽度。这个宽度不取决于窗口尺寸,当扫瞄器窗口改动尺寸时它不会产生改动。
4.给maincontent增加一个右边距。
假如sidebar比网页上的其他内容更短,来自立列的文本包抄sidebar的下方,损坏了两个并分列的展示效果。增加一个右边距即是大概年夜于缩进网页次要内容的sidebar宽度,发生一个第二列的幻觉效果:
#main{margin-left:180px;}
特地说一下,使右边距比sidebar的宽度略年夜一般是个好主张:如许发生了一些空的空间――一个红色的――在两个元素之间。因而,当使用百分比来设定sidebar的宽度时,给右边距设定一个略微年夜一些的百分比值。
没有需要往制止给maincontent的div计划宽度,由于扫瞄器只需扩展到合适现有的空间。即便要一个流动宽度的计划,也不用给主内容的div计划宽度,就如你将鄙人一节中所看到的。
在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处? |
|