不同分辨率下“自适应”页面一例    
虽然说现在显示器主流的都是17'的了,但是使用还是有很大一部分用户是使用的15‘显示器,怎么样子做到在1024×768与800×600下页面“自适应”呢?下面我就通过我做过过的2个页面,来给大家简单的说下吧!

先看看效果吧,看了效果讲起来比较直观点
1024×768下
按此在新窗口浏览图片

800×600下

按此在新窗口浏览图片

1、背景居中
首先讲点题外话——背景都是居中。这个是用CSS样式实现的,代码如下

body {background: #84CFEF url(bg.gif) center;}
背景图片可以成这样

按此在新窗口浏览图片

高度无所谓,一般2到5象素就可以了,宽度超过1024象素即可,反正两边都是背景样色,如果你想在1152×864下可以是这样的效果的话,可以做的更宽。

2、header部分
头部文件看起来是一体的,其实是有2个层组成的,分别是左侧的两个女孩的图片和背景flash组成。
先做一个760象素宽的flash动画,注意左边部分要留图片问题,而且注意好与图片衔接是否合理。
左侧的图片是在PS下面处理成背景透明的GIF动画,本人美工水平有限,所以大家会觉察边缘处理的不是很好,然后添加一个“层”(用div标签实现)请看下面的示意图。

按此在新窗口浏览图片

之所有在table里面还要分2列就是要保证div层居左、flash居右。而且这里要注意的一点是:div层位置和大小都可以留空,这样的话,就可以把位置固定在div标签放置的位置上,不会随意移动。

 

关联文档