作者:

web重构技巧与常见问题的解决方法

一、    xhtml+CSS 技巧篇

●在重构也面之前要做的准备工作:

1.拿一张PSD效果图,必需是PSD的这样的话你就可以自己更加随意的做切片;

2.先把PSD不做切片生成一个网页,起名为index_psd.html(这个页面做参考用);

3. 在准备几个必需的文件夹 images(放图片) 、css(放css样式文件)、js(放js文件);

●准备工作做好以后,先分析整个页面的结构。分析页面的结构要先整体再部分,先看页面中最大的板块是怎样关联的是上下并列还是左右平铺。看清了页面的大板块结构,就可以构建页面最基础的几个区块了。例如我们的页面试上中下结构,这时就可以写:

<div id=”header”></div>//放也面头和导航等

<div id=”content”></div>//页面的主题内容

<div id=”footer”></div>//页面脚版权声明等等

●写css的时候就需要使用index_psd.html这个文件了,用DW打开这个文件,选择视图模式,可以通过拉辅助线,来测量各个区块的长宽为设置CSS提供参考,这样做的好处就是重构出来的页面可以精确到1像素。

●每写好一个区块就要用IE和ff测试下效果,以便及时发现问题及时解决,在各个区块没内容的时候最好给他们都加上背景色。

●写好大的板块后,再分析大板块里面的内容,同样的道理也是先整体再部分,例如内容页面看起来是左右两个板块,这个时候我们可以把代码写为:

<div id=”header”></div>//放也面头和导航等

<div id=”content”>//页面的主题内容

<div class=”content-2-1”></div>//左边

<div class=”content-2-2”></div>//右边

</div>

<div id=”footer”></div>//页面脚版权声明等等

其中content-2-1中的2表是分两栏,2-1表示左栏,2-2表示右栏这样的分栏方式可以使自己查看页面代码的时候更加直观,分好多栏的时候这个优势更加明显。

●新闻列表,文章列表等等最好使用:

<ul>

<li>新闻标题1</li>

<li>新闻标题2</li>

…………

<li>新闻标题n</li>

</ul>

●栏目列表加描述的最好用:

<dl>

<dt>栏目1</dt>

<dl>栏目1描述</dl>

<dt>栏目2</dt>

<dl>栏目2描述</dl>

</dl>

●在CSS文件定义的最开始最好加上如下语句

body,html{ height:100%; }

*{ margin:0px; padding:0px; }

●最好能给大的区块设置overflow::hidden,这样可以保证容器不被撑开,从而破坏整个页面的布局。

二、    DIV+CSS 问题篇

1. IE6意外空白问题:

在并列的几个小区块横铺在一个大区块中的时候,本来小区块宽度的和等于大区块的宽度,在FF等其他浏览器中没问题,可是在IE6中就是有一个区块显 示不出来要不就被挤到下面去了。这个时候可以设置小区块的css 为display:inline。如果这个办法还不行那就把各个区块的宽度减少1到2个像素。

2.IE6重影问题:

有时在IE6中在一个大DIV结束的底端老出现div内容结尾几个字符的重复,在FF等其他浏览器里面就不会出现。解决这个问题有两个办法:1)删除注 释;2)在这个DIV的后面填加<div class=”clear”></div> 定义clear的CSS样式为:

.clear {

font-size: 1px;

clear: both;

visibility: hidden;

width: 1px;

}。推荐使用第二种方法,如果把注释去掉的话代码的可读性就受到影响了。

3.IE6无法居中的问题:

一般情况下只要给一个div(设其id为1)设置css样式:margin:0px auto;就可以让这个div在盛放它的容器(设其id为0)中居中了,它们的结构如下:

<div id=”0”>

<div id=”1”> … </div>

</div>

但是IE6就不行。这个时候可以给div0的css设置:text-align: center;

4. IE6有链接的图片有意外边框出现

在IE6中有时有链接的图片会有一个难看的边框出现,这个是由<a>引起的,这个时候可以设置通过在CSS中设置a { border:0px;}来消除。

5.FF中DIV里面的内容出轨

有时在IE中看很正常的内容在FF中却看到DIV里面的东西跑到外面了,这种情况在div有边框的时候尤为明显。这是因为div在IE中设置了高度后,如 果div里面的内容如果高于div的时候,div会自动增高。但是FF就没有这么灵活,只要限定了高度就不会自己改变。这时可以通过重设高度来解决这个问 题,也可以把高度设为自动。

6.FF中区域意外消失

在IE中很正常的布局在FF中却有一个区域消失了,这个问题在页面的最下角版权区块经常出现。这个时候可以通过给这个区域添加:clear:both;来解决。

其他的问题暂时想不起来了,在重构的过程中总会有一些莫名奇妙的问题,只要善于思考,不厌其烦的测试,或是到网上查找,总会找到解决办法的。每一个问题的解决都是一个不小的收获。

发表评论

评论