最近做银行项目,需要页面演示的demo,因为不必实际交易,美工直接用ps给出了各个页面的html文件;纠结的是每个页面都是清一色table、tr、td,于是问题来了......
1.滚动条问题
有些超出手机浏览器height的页面,需要除去header、footer后实现滚动效果,我们的修改方法是将table一分为三,中间部分使用div、ul、li来实现;
2.添加滚动条后,table竖白条问题
拆开table后发现,header、footer部分的table多数都出现了竖白条问题,google浏览器中相对还好些,在ie6、ie7显示错位严重。
分析原因:美工的ps出图格式为table,使用属性colspan来定义td的宽度,当table拆开后相对于全局的colspan就相对的无法适用,需要新的colspan来定义td,比如:
初始table界面:
<table id="Table_01" width="404" height="607" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7"></td>
</tr>
<tr>
<td></td>
<td colspan="5"><td>
<td></td>
</tr>
......
<tr>
<td><img src="images/spacer.gif" width="67" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="14" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="81" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="80" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="81" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="68" height="1" alt=""></td>
</tr>
</table>
添加滚动条后界面:
<table id="Table_01" width="404" height="158" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3"></td> </tr> <tr> <td></td> <td ></td> <td ></td> </tr> </table> <div class="container"> <ul> <li><img src="images/20130321195721_07.jpg" width="39" height="47" alt=""></li> ...... <li><img src="images/20130321195721_20.jpg" width="39" height="47" alt=""></li> </ul> </div> //剩余tr的colspan不做修改 <table id="Table2" style="position: absolute; left: 0px; top: 544px;" width="404" height="63" border="0" cellpadding="0" cellspacing="0"> ..... <tr> <td colspan="4"></td> <td colspan="2"></td> <td></td> <td colspan="2"></td> <td colspan="4"></td> </tr> <tr> <td><img src="images/spacer.gif" width="67" height="1" alt=""></td> <td><img src="images/spacer.gif" width="14" height="1" alt=""></td> <td><img src="images/spacer.gif" width="81" height="1" alt=""></td> <td><img src="images/spacer.gif" width="80" height="1" alt=""></td> <td><img src="images/spacer.gif" width="81" height="1" alt=""></td> <td><img src="images/spacer.gif" width="13" height="1" alt=""></td> <td><img src="images/spacer.gif" width="68" height="1" alt=""></td> </tr> </table>
3.无滚动条,页面含有自定义input等控件时出现的白边
自定义input替换美工的图片后,可能因为width过大而错乱了tr td宽度,导致table出现白边,只需减少将input宽度,适当调节即可解决问题。
4.ios是否切换img控件的实现
两个方法,一是因为一个是否按钮切换这个页面,效率太低;另一种是只对这个<img/>的src重新赋值,明显后者更优,两张图片:yes.jpg和no.jpg,实现方法如下:
html中图片添加事件
<img src="images/yes.jpg" width="117" height="34" alt="" onclick="show(this)">
js中代码:
function show(img){ var urls = img.src.split("/"); var imgName = urls[urls.length-1]; if(imgName == "yes.jpg"){ img.src="images/no.jpg"; } else{ img.src="images/yes.jpg"; } }
ps: 为了不引入jquery,就不用什么show、hide事件了,直接这么简化写
5.input[type="text"]的mouse事件
<input type="text" style="height: 43px; width: 326px; value="请输入" onmouseover="this.focus()" onmouseout="if(this.value=='')this.value='请输入';" onfocus="this.select()" onclick="if(this.value=='请输入')this.value=''">
6.textarea的mouse事件
html页面:
<textarea style="width:260px;height:77px" onfocus="textareaKeyDown(this);" onblur="textareaKeyUp(this);">
请输入您的建议
</textarea>
js脚本:
textareaKeyUp = function(el) { var value = el.value; if (value === "") { el.value = "请输入您的建议!"; } } textareaKeyDown = function(el) { var value = el.value; if (value == "请输入您的建议") { el.value = ""; } }
7.vs和dreamweaver创建页面链接方式的差异
在dreamweaver中,为img创建链接a时,会自动添加border=0属性;
而在vs中添加链接a时,img会默认属性(即添加上1px的border),需要手动再设置border=0