|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
与位图图形相比,矢量图形需要的内存和存储空间小很多,因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大,是因为图像中的每个像素都需要一组单独的数据来表示。
poluoluo中心提醒:在网页部分的结构上,必要接纳大批的自顺应,来满意分歧长度数据、内容的公道出现。以此包管页面不至于由于内容过量等缘故原由,招致堆叠、溢出、撑开等损坏全体视觉效果的情形。这里就复杂谈谈几个本人碰着过的自顺应成绩。
在网页部分的结构上,必要接纳大批的自顺应,来满意分歧长度数据、内容的公道出现。以此包管页面不至于由于内容过量等缘故原由,招致堆叠、溢出、撑开等损坏全体视觉效果的情形。这里就复杂谈谈几个本人碰着过的自顺应成绩。
1、两栏自顺应结构
在实践项目中,经常碰到如白色线框部分的两栏自顺应成绩。其关头点是,摆布两栏均不定宽,右边栏条目数目不定。
针对这类场景,能够接纳两栏均浮动的办法。参考Object-orientedCSS中使用到的结构计划,则必要套用两层标签完成,两栏中一栏浮动,另外一栏宽度自顺应:- .wrap{background:gray;}.left{float:left;background:orange;}.right{display:table-cell;_display:block;zoom:1;background:lime;}<divclass="wrap"><divclass="left">左边栏</div><divclass="right">右边栏</div></div>
复制代码 点此检察该代码示例:two_column_layout.html
因为IE6其实不撑持display:table-cell属性,必需经由过程CSShack来填补这个缺点。这里能够稍作改善,右边栏间接设定overflow:auto;zoom:1大概overflow:hidden;zoom:1的款式。
2、三栏自顺应结构
谈到三栏自顺应结构,这应当是最为基础的网页排版情势了。以Amazon首页来讲,其自顺应结构接纳的是与Object-orientedCSS相相似的计划:- .wrap{background:gray;}.left{float:left;width:250px;background:red;}.right{float:right;width:300px;background:orange;}.main{overflow:hidden;zoom:1;background:lime;}<divclass="wrap"><divclass="left">左边栏</div><divclass="right">右边栏</div><divclass="main">主体部分</div></div>
复制代码 点此检察该代码示例:three_column_layout.html
该案例中,摆布侧栏分离浮动,主体部分(两头栏)溢出埋没。这类结构的优点在于,不管外框宽度怎样变更,主体部分总能自顺应。但从页面布局下去说,节点物理按次和视觉逻辑按次纷歧致,最关头的主体部份内容被排在全部文档的前面,主次散布分歧理,总以为有一些遗憾。别的也会存在一些潜伏的风险:假如右边栏包括大批剧本资本,大概会影响乃至堵塞全部页面的载进(假如选择利用iframe大概ajax来加载就另当别论)。
尽人皆知,HTML文档是按次剖析的。在这张利用WebPageTest对Amazon首页衬着历程的某一时候截图中,能够发明摆布两侧的内容领先予以出现,而主体部分会形成必定工夫的空缺。因而这类计划其实不宜用于整站页面框架的搭建。
思索到页面布局的庞大水平和体积巨细,年夜型站点的结构计划,团体偏向于接纳诸如负边距之类自顺应结构。完成道理能够参考《CreatingLiquidLayoutswithNegativeMargins》这篇文章。使用负边距能够构建出良多庞大的流体结构情势。这里以YUI框架供应的栅格计划为例来讲明:- .wrap{}.section{float:left;margin-right:-40em;width:100%;}.g1{margin-right:310px;float:none;width:auto;position:static;}.g2{float:right;margin-left:-40em;width:100%;}.main{margin-left:210px;float:none;width:auto;position:static;overflow:auto;background:red;}.left{float:left;width:200px;position:relative;background:orange;}.aside{float:right;width:300px;position:relative;background:lime;}<divclass="wrap"><divclass="section"><divclass="g1"><divclass="g2"><divclass="main">主体部分</div></div><divclass="left">左边栏</div></div></div><divclass="aside">右边栏</div></div>
复制代码 点此检察该代码示例:negative_margin_layout.html
固然完成上要比其他计划更加庞大,必要嵌套多层标签,在必定水平上有掉HTML文档的简便性。但一个主要的优点是,其各个区块(左边栏、主体部分、右边栏)文档布局按次能够随便互换,而在视觉出现上却没有任何差别。今朝口碑网的前端结构体系恰是使用了这类办理计划,并有公用工具完成结构框架的主动化天生。
3、自顺应栅格化结构
Object-orientedCSS提出了一种布局化的多栏自顺应结构,使用栅格把持容器宽度,内容把持容器高度。使很多层嵌套的自顺应栅格化结构明晰了然。假如使用到相似表格的页面排版,这类办法卓有成效。具体参考自顺应栅格化结构代码示例:grid_layout.html
而今朝大批的网站正在利用950px/960px宽度的栅格体系,流动最小栅格单位的宽度,包管全体布局的公道、不乱和分歧。与其比拟,在部分页面结构中,倡议利用Object-orientedCSS这类简便的、基于百分比的栅格计划。假如能够包管外部一切区块自顺应,就只必要对最外层容器设定宽度,显得更加天真。
Flash又被称之为闪客,是由macromedia公司推出的交互式矢量图和Web动画的标准,由Adobe公司收购。 |
|