阿里页面常见问题及解决方案

页面常见问题及解决方案

● 问题

1.如何使页面不易错位？

2.如何避免设置好的样式被需求方改掉？

3.如何取消flash控件激活？

4.如何使网页背景全屏居中？

5.JS效果库

● 解决方案

1.如何使页面不易错位？

a、在页面中少用热点链接。

b、页面中内外嵌套的表格的尺寸要匹配

2.如何避免设置好的样式被需求方改掉？

a、对内容比较多的文字做成可编辑可扩展的的，以方便需求方修改和编辑。

b、需要运营人员自己编辑文字的地方，文字的style设置尽量放在TD里面，

3.如何取消flash控件激活？

采用JS调用的方法。代码如下：

<script language="JavaScript"type="text/javascript">flash("top.swf",'100%','315',"Transparent")</script>

4.如何使网页背景全屏居中？

代码如下：

<div style="width:100%;background:url(http://i02.c.aliimg.com/news/upload/swfw/px/top1_1216198121972.jpg) center no-repeat;height:83px"></div>

5.JS效果库

a、向上滚动：

<div id="demo" style="overflow:hidden;height:100px;width:210px; border:1px solid blue;">

<div id="demo1">

<ul style="margin:0px; padding:0px;">

<li>看这个向上滚动的代码</li>

<li>看这个向上滚动的代码</li>

<li>看这个向上滚动的代码</li>

<li>看这个向上滚动的代码</li>

<li>看这个向上滚动的代码</li>

<li>看这个向上滚动的代码</li>

<li>看这个向上滚动的代码</li>

<li>看这个向上滚动的代码</li>

</ul>

</div>

<div id="demo2"></div>

</div>

<script style="text/javascript">

var speed=40;//数值越大，速度越慢

var demo2=document.getElementById("demo2");

var demo1=document.getElementById("demo1");

var demo=document.getElementById("demo");

demo2.innerHTML=demo1.innerHTML;

demo.scrollTop=demo.scrollHeight;

function MarqueeUp(){

if(demo2.offsetTop-demo.scrollTop<=0)

demo.scrollTop-=demo2.offsetHeight;

else{

demo.scrollTop++;

}

}

var MyMar=setInterval(MarqueeUp,speed);

demo.onmouseover=function() {clearInterval(MyMar);}

demo.onmouseout=function() {MyMar=setInterval(MarqueeUp,speed);}

</script>

b、向下滚动：

<div id="demo" style="overflow:hidden;height:100px;width:210px; border:1px solid blue;">

<div id="demo1">

<ul style="margin:0px; padding:0px;">

<li>看这个向下滚动的代码</li>

<li>看这个向下滚动的代码</li>

<li>看这个向下滚动的代码</li>

<li>看这个向下滚动的代码</li>

<li>看这个向下滚动的代码</li>

<li>看这个向下滚动的代码</li>

<li>看这个向下滚动的代码</li>

<li>看这个向下滚动的代码</li>

</ul>

</div>

<div id="demo2"></div>

</div>

<script style="text/javascript">

var speed=40;//数值越大，速度越慢

var demo2=document.getElementById("demo2");

var demo1=document.getElementById("demo1");

var demo=document.getElementById("demo");

demo2.innerHTML=demo1.innerHTML;

demo.scrollTop=demo.scrollHeight;

function MarqueeDown(){

if(demo1.offsetTop-demo.scrollTop>=0)

demo.scrollTop+=demo2.offsetHeight

else{

demo.scrollTop--

}

}

var MyMar=setInterval(MarqueeDown,speed);

demo.onmouseover=function() {clearInterval(MyMar);}

demo.onmouseout=function() {MyMar=setInterval(MarqueeDown,speed);}

</script>

c、向右滚动：

<div id="demo" style="overflow:hidden;height:90px;width:210px; border:1px solid blue;">

<div id="demo1">

<table cellspacing="0">

<tr>

<td><img src="1207014080942.jpg" height="84" width="64"></td><td><img src="1207014080942.jpg" height="84" width="64"></td><td><img src="1207014080942.jpg" height="84" width="64"></td><td><img src="1207014080942.jpg" height="84" width="64"></td><td><img src="1207014080942.jpg" height="84" width="64"></td><td><img src="1207014080942.jpg" height="84" width="64"></td><td><img src="1207014080942.jpg" height="84" width="64"></td>

</tr>

</table>

</div>

<div id="demo2"></div>

</div>

<script style="text/javascript">

var speed=40;//数值越大，速度越慢

var demo2=document.getElementById("demo2");

var demo1=document.getElementById("demo1");

var demo=document.getElementById("demo");

demo.scrollLeft=demo.scrollWidth

function MarqueeRight(){

if(demo.scrollLeft<=0)

demo.scrollLeft+=demo2.offsetWidth

else{

demo.scrollLeft--

}

}

var MyMar=setInterval(MarqueeRight,speed);

demo.onmouseover=function() {clearInterval(MyMar);}

demo.onmouseout=function() {MyMar=setInterval(MarqueeRight,speed);}

</script>

d、向左滚动：

<div id="demo" style="overflow:hidden;height:301px;width:312px; border:1px solid blue;">

<div id="demo1">

<table width="312" height="301" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="103" height="146"><img src="images/cuxiao_08.jpg" width="103" height="146" alt=""></td>

<td width="105"><img src="images/cuxiao_09.jpg" width="105" height="146" alt=""></td>

<td width="104"><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>

<td width="104"><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>

<td width="104"><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>

<td width="104"><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>

</tr>

<tr>

<td height="155"><img src="images/cuxiao_14.jpg" width="103" height="155" alt=""></td>

<td><img src="images/cuxiao_15.jpg" width="105" height="155" alt=""></td>

<td><img src="images/cuxiao_16.jpg" width="104" height="155" alt=""></td>

<td><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>

<td><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>

<td><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>

</tr>

</table>

</div>

<div id="demo2"></div>

</div>

<script style="text/javascript">

var speed=40;//数值越大，速度越慢

var demo2=document.getElementById("demo2");

var demo1=document.getElementById("demo1");

var demo=document.getElementById("demo");

function MarqueeLeft(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(MarqueeLeft,speed);

demo.onmouseover=function() {clearInterval(MyMar);}

demo.onmouseout=function() {MyMar=setInterval(MarqueeLeft,speed);}

</script>