小谈网页布局

WEB前端的开发，UI是很重要的，一个成功的UI往往就是项目成功的一半。

 

在商业化的UI里面，布局是一个很重要的设计要素。

 

一、整体布局

 

1. frameset布局

 

frameset是使用得最广泛的布局模式。

 

优点

 

1. 简单

    frameset的布局是浏览器一级的界面，我们不用关心但页面溢出时，我们应该怎么处理，而且标签和属性不多

 

2.嵌套页面时，执行效率好。

    如果我们不使用frameset来嵌套页面，当然我们也可以选择iframe。但是iframe的执行效率并不高，而且很容易内存溢出。

 

缺点

 

1.不灵活，我们无法自由的定制漂亮的自定义边框，只能使用有限的border属性值去控制边框。而且一旦我们写定了页面的框架后，我们就无法更改。

 

2.有些浏览器并不支持frameset

 

2. DIV布局

DIV布局是一种很灵活的布局形式，但如果经常情况下，我们都会在布局中增加嵌套页面，这时我们必须使用IFrame。但DIV的布局非常的灵活。

 

有兴趣的朋友可以研究一个EXT 的ViewPort组件，这个组件就是用DIV实现页面布局的一个优秀范例，当然ViewPort虽然界面美观，但速度却有待提高。

 

 二、定位

1. 绝对定位

    绝对定位是一个很好理解的元素定位方法。绝对定位不会在乎页面上其他元素的干扰，而是相对于窗口的左上角的定位模式，就相似于数学中的坐标。HTML中，我们可以在style中定义position属性的值为absolute。同时我们还要设置left和top属性。