页面中横排布局的思考
作者:LuLi 来源:SimpleLife 发布时间:2008-01-18 12:56:00
经过一轮的项目封闭开发,页面制作的动手能力提高了不少,用AW的话说就是被复杂的东西虐过以后很多问题都变得容易了,的确很有道理。
我个人觉得技术学习中不断总结是个很有效的提高过程,同是也是个积累和分享。这里我想总结一下对页面横排布局实现方式的思考。多数人觉得没有必要思考这个,能把页面效果实现就可以了。但我个人还是坚持认为需要思考一下这个问题,下面我来说说自己的看法,也希望得到更多人的意见。
首先我以土豆为例,来解释一下我说的横排布局
经常我们会听到两分栏、三分栏等等,都被我视作横排布局,土豆这个页就是常见的左右两分栏布局,图中我还对其中其他的横排布局做了注释。回想一下,在你曾经切过的页面里是否有很多类似的横排布局,我想答案是肯定的,甚至你制作的一个页面有更多更复杂的横排布局。那么你是怎么来实现他们的呢?下面我来总结一下我知道几种通用可行方法:
一、浮动
这是最常见的做法,尤其是在页面大布局(也就是我们常说的两栏、三栏等)时,我们第一个会想到浮动来实现。既然使用了浮动,那么我们需要考虑浮动闭合的问题,通常闭合浮动有下面做法。
1、利用clear:both来清楚浮动,原理是在最后一个浮动元素的同级添加一个空便签,并添加clear:both,效果很不错,但增加了一个无语意标签。
2、利用:after伪类,最经典的就是clearfix了,屡试不爽。但除开li这样的列表浮动浮动时本身就有ul这样的父标签可用,这里需要给我们的浮动元素增加一个空的父容器,然后应用clearfix,这样让我们的页面内容的层次嵌套深了一层,如果滥用这样的浮动闭合,那么嵌套的层次自然越来越深。为了实现页面效果,我们大幅度地动了DOM的结构。我觉得这样深的结构对于搜索引擎来讲肯定是只有弊不会有利。搜索引擎本身对页面做清理的时候需要递归这么多层的嵌套,效率自然有消耗。
对于页面重点的内容更应当避免过深的嵌套。(这是土豆首页的一块代码截图,虽然不是clearfix造成的,但我很不解为何要嵌套这么深,而且还是节目内容这么重要的元素。可以在baidu里搜索一下site:www.tudou.com,你会发现收录的基本都是土豆的用户主页,而不是视频。再对比一下其他几个视频站,你会发现区别的。)
3、利用overflow属性。给浮动元素的父级添加overflow,设置为visible之外的任何属性都行,但IE下需要触发layout。从结构上讲和clearfix带来的麻烦一样,滥用会造成页面内容的层次过深。
这上面三中清除浮动的方法都有弊端,因此在使用中需要视不同的情况来确定如何使用。
二、绝对定位
例如我们要实现两分栏,右侧宽度150px,左侧自适应浏览器。那么我们可以把右侧的容器绝对定位并设定宽度,左侧的容器设置margin-right:150px即可。
再以土豆的那个页面中的绿框中的横排布局为例,左侧蓝色框可以设置宽度,绝对定位到left,右侧蓝色框设置margin-left。这里只是为了说明一个思路,其实于这个列表肯定是有空的父标签可用的,完全可以用clearfix解决。
三、内联元素
块级和内联特性是HTML标签给我们的原生能力,例如紫色块中的部分我们完全可以用内联的span a 或者直接是text结合a来实现。如果你套个div 或者是一个li列表,然后浮动他们,我觉得反而是做麻烦了。对于内联元素和块级元素的结合布局,我感觉淘宝的页面考虑的比较好,有兴趣的可以去刨刨看。总结一下就是小块的横排布局可以用内联元素来实现的就不要苛求用块级元素来模拟了。
四、表格
这是一个争论不休的话题,什么是表格,什么是列表?这个到底是怎么界定了?各有各的道理。就我自己的理解,大块的布局是坚决不会用表格的,例如这个红框的左右布局。如果涉及到多行多列的内联元素,并且需要设置对齐的时候,我会使用表格,当然是做格式数据,不是做布局。
列出上面的这些做法,目的是在于遇到具体情况能够有更广的思考空间,从而选择合理的解决方案,如何实现不关键,关键在于要坚持制作的原则:表现是为内容服务的,尽量不要让内容迁就表现。。
用户看页面关注的是页面设计,前端的代码怎么写用户都不会关心,但搜索引擎甚至是其他平台的系统,它们只认识页面的结构内容,如何让它们正确理解我们的内容,如何让搜索引擎多收录我们的内容这也是前端组在制作的过程中需要思考的问题。
猜你喜欢
- Microsoft? SQL Server? 2000 的可用版本如下:SQL Server 2000企业版作为生产数据库服务器使用。支持
- 1 数据库连接a.数据库的连接(ACCESS和SQL)在APS脚本中可以通过3中方式访问数据库: ∈IDC (Inte
- 网页版面布局的方法及技巧,版面指的是浏览器看到的完整的一个页面(可以包含框架和层)。因为每个人的显示器分辨率不同,所以同一个页面的大小可能出
- 层的八条定律当然,这些并非真正的定律,而只是一些有益的忠告,使你免陷于使用层时可能的困顿中。原来有九条定律的,我们精简掉一条,还有下面的八条
- 最近在研究品牌如何演绎,当然,看的时候没有忘记本行,分析了一下他们的交互设计~~路易威登LV上图采用胶片展示多组信息——大片展示品牌渲染。利
- * 惯,请先看测试页面:event-test.html 结论:在非IE浏览器,同一元素同一事件类型的处理函数是先进先出的。只有IE下,是先进
- 如何使用Iframe实现本页提交?例:chunfeng.html< html>< head>&n
- 到现在为止,你只学习了如何根据特定的条件从表中取出一条或多条记录。但是,假如你想对一个表中的记录进行数据统计。例如,如果你想统计存储在表中的
- 这个问题我在给新云CMS升级时遇到了,按照升级步骤做完,后台登录时,出现“HTTP 错误 500.100 - 内部服务器错误 - ASP 错
- 如何在线创建新表?下面我们以建立一个数码相机库用表为例,看看在ASP程序代码中使用 [CREATE TABLE 相机 (品牌 TEXT(10
- 请问鼠标移过去就出现二级菜单代码怎么写啊 <head><style type="tex
- Web性能优化最佳实践中最重要的一条是减少HTTP请求,它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScr
- 代码如下:---在仓储管理中经常会碰到的一个问题 一、关于LIFO与FIFO的简单说明 ---FIFO: First in, First o
- asp生成wbmp代码如下: <%@ Language=VBScript %><%Funct
- (5)SELECT (5-2) DISTINCT(5-3)TOP(<top_specification>)(5-1) <s
- 可在图片连接后面加上宽和高,如:width="150" height="50"<h
- 做为一个专职的页面重构者, 我们从事的工作简单的说就是“将设计稿转换成WEB页面”,这一过程可以很简单到直接把PSD从里导出成网页;也可复杂
- 或者说有一条命令 hostname [string],当string是不包含2950时,是true,包含2950时是false。使用Exce
- 1 , javascript字符集:javascript采用的是Unicode字符集编码。为什么要采用这个编码呢?原因很简单,16位的Uni
- 在附加数据库后查看不了数据库关系图,也无法建立数据库关系图 我的解决方法如下: 1、设置兼容级别为90(2005为90)(2000为80)