Question

我尝试在没有JQuery的情况下编写自适应网页。但我遇到两个问题。 1.当我放大窗口时出现滚动条，左边的行不能自动重绘。 2.内容无法全部显示，请参见快照的底部。我在下面的快照中标记了这两个问题。要查看详细信息，请转至LINK，感谢您的帮助。 enter image description here 我想上传快照，但由于声誉低于10，我失败了。所以请访问我的个人页面查看快照。再次感谢。

我的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
</title>
<style type="text/css">
body
{ 
    margin:0px;
    padding:0px;
    border:0px;
    display:block;
    z-index:-9999;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    overflow:auto;
    font-family: Arial,Helvetica,sans-serif;
}
div.bg
{
    background-color:#fefefe;
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    display:block;
    z-index:-8888;
}
</style>
<script language="javascript" type="text/javascript">
    var sw = 0, sh = 0;
    var b = true;
    function alignImg() {
        if (b) {
            document.getElementById("bot").style.top = (sh-40)+"px";
            document.getElementById("rig").style.left = (sw - 40) + "px";
            document.getElementById("debug").innerHTML = "sw: " + sw + " sh:" + sh + " f:" + b;
        }
        if (!b) {
            document.getElementById("bot").style.top = "66px";
            document.getElementById("rig").style.left = "66px";
            document.getElementById("debug").innerHTML = "reed.xia@gmail";
        }
        b = !b;
    }

    (function (d) {
        setInterval(function () {
            w = d.body.clientWidth;
            h = d.body.clientHeight || window.innerHeight;
            document.title = w + " : " + h;
            document.getElementById("bot").style.top = (sh-40)+"px";
            document.getElementById("rig").style.left = (sw-40)+"px";
            document.getElementById("cn").style.top = 300+"px";
            document.getElementById("cn").style.left = (sw - 112) / 2 + "px";
            document.getElementById("en").style.top = 500 + "px";
            document.getElementById("en").style.left = (sw-178)/2+"px";
            document.getElementById("pig").style.left = (sw - 210) / 2 + "px";
            document.getElementById("menu").style.left = (sw - 220) / 2 + "px";
            document.getElementById("debug").style.left = (sw - 146) / 2 + "px";
            if (sw !== w || sh !== h) {
                sw = w;
                sh = h;
            }


        }, 1);
    })(document)
</script>
</head>

<body id="body" >
<div class="bg" >
<div>
<a href="#" ><img src="images/circle-ydall.png" alt="circle-ydall" style="position:absolute;top:0px;left:0px;width:40px;height:40px;z-index:-3333;background-color:#909090;" /></a>
<a href="#" ><img src="images/circle-wedall.png" alt="circle-wedall" style="position:absolute;top:0px;right:0px;width:40px;height:40px;z-index:-3333;background-color:#909090;" /></a>
<a href="#" ><img src="images/circle-yedall.png" alt="circle-yedall" style="position:fixed;bottom:0px;left:0px;width:40px;height:40px;z-index:-3333;background-color:#909090;" /></a>
<div id="menu" style="position:absolute;top:10px;left:40px;height:40px;z-index:-3333;">
<a href="#" ><img src="images/ydall.png" alt="ydall" style="height:20px;z-index:-3333;background-color:#909090;"/></a>
<a href="#" ><img src="images/wedall.png" alt="ydall" style="height:20px;z-index:-3333;background-color:#909090;"/></a>
<a href="#" ><img src="images/yedall.png" alt="ydall" style="height:20px;z-index:-3333;background-color:#909090;"/></a>
</div>

<div id="pig" style="position:absolute;top:80px;left:100px;height:180px;z-index:-3333;">
<img src="images/bigAllIn1.png" alt="bigAllIn1" style="height:180px;z-index:-3333;background-color:#909090;"/>
</div>
</div>
<div id="cn" style="position:absolute;top:41px;left:41px;z-index:-6666;background-color:#e0e0e0;" >
<h4 style="color:#606060">欢迎来到云道！</h4>
<h4 style="color:#606060">属于您的逼格！</h4>
<a href="http://www.ycpai.com/p_21104">进入</a>
</div>

<img id="row" src="images/row.png" alt="seperate row" style="position:absolute;top:40px;width:100%;height:1px;z-index:-5555;" />
<img id="col" src="images/column.png" alt="seperate column" style="position:absolute;left:40px;width:1px;height:100%;z-index:-5555;" />
<img id="bot" src="images/row.png" alt="seperate row" style="position:fixed;top:215px;width:100%;height:1px;z-index:-5555;" />
<img id="rig" src="images/column.png" alt="seperate column" style="position:fixed;left:215px;width:1px;height:100%;z-index:-5555;" />


<div id="en" style="position:absolute;top:157px;left:17px;z-index:-6666;background-color:#b0b0b0;" >
<h4 style="color:#606060">Welcome to YDall.com!</h4>
<h4 style="color:#606060">Awesome only for you!</h4>
<a href="http://www.ycpai.com/p_21104">Enter</a>
</div>
<div style="position:fixed;bottom:0px;right:0px;height:40px;z-index:-6666;display:block;background-color:#b0b0b0;">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<p id="debug" style="position:fixed;bottom:0px;left:60px;z-index:-2222;background-color:#909090;" >reed.xia@gmail.com</p>

</div>
<a href="#" onclick="alignImg()"><img src="images/favicon200x200.png" alt="favicon200x200" style="position:fixed;width:40px;height:40px;bottom:0px;right:0px;z-index:-3333;background-color:#909090;" /></a>
</body>
</html>

Answer 1

＆＃13;

Use this replace you body code:
<body id="body" >
<div class="bg" >
<div>
<a href="#" ><img src="images/circle-ydall.png" alt="circle-ydall" style="position:absolute;top:0px;left:0px;width:40px;height:40px;z-index:-3333;background-color:#909090;" /></a>
<a href="#" ><img src="images/circle-wedall.png" alt="circle-wedall" style="position:absolute;top:0px;right:0px;width:40px;height:40px;z-index:-3333;background-color:#909090;" /></a>
<a href="#" ><img src="images/circle-yedall.png" alt="circle-yedall" style="position:fixed;bottom:0px;left:0px;width:40px;height:40px;z-index:-3333;background-color:#909090;" /></a>
<div id="menu" style="position:absolute;top:10px;left:40px;height:40px;z-index:-3333;">
<a href="#" ><img src="images/ydall.png" alt="ydall" style="height:20px;z-index:-3333;background-color:#909090;"/></a>
<a href="#" ><img src="images/wedall.png" alt="ydall" style="height:20px;z-index:-3333;background-color:#909090;"/></a>
<a href="#" ><img src="images/yedall.png" alt="ydall" style="height:20px;z-index:-3333;background-color:#909090;"/></a>
</div>
<div style="position:absolute;left:50px;top:50px;z-index:-3333;"/>
<a href="images/q1.png"> question snapshot</a>
</div>
<div id="pig" style="position:absolute;top:80px;left:100px;height:180px;z-index:-3333;">
<img src="images/bigAllIn1.png" alt="bigAllIn1" style="height:180px;z-index:-3333;background-color:#909090;"/>
</div>
</div>
<div id="cn" style="position:absolute;top:41px;left:41px;z-index:-6666;background-color:#e0e0e0;" >
<h4 style="color:#606060">欢迎来到云道！</h4>
<h4 style="color:#606060">属于您的逼格！</h4>
<a href="http://www.ycpai.com/p_21104">进入</a>
</div>

<img id="row" src="images/row.png" alt="seperate row" style="position:absolute;top:40px;width:100%;height:1px;z-index:-5555;" />
<img id="col" src="images/column.png" alt="seperate column" style="position:absolute;left:40px;width:1px;height:100%;z-index:-5555;" />
<img id="bot" src="images/row.png" alt="seperate row" style="position:fixed;top:215px;width:100%;height:1px;z-index:-5555;" />
<img id="rig" src="images/column.png" alt="seperate column" style="position:fixed;left:215px;width:1px;height:100%;z-index:-5555;" />


<div id="en" style="position:absolute;top:157px;left:17px;z-index:-6666;background-color:#b0b0b0;" >
<h4 style="color:#606060">Welcome to YDall.com!</h4>
<h4 style="color:#606060">Awesome only for you!</h4>
<a href="http://www.ycpai.com/p_21104">Enter</a>
</div>
<div style="position:fixed;bottom:0px;right:0px;height:40px;z-index:-6666;display:block;background-color:#b0b0b0;">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<p id="debug" style="position:fixed;bottom:0px;left:60px;z-index:-2222;background-color:#909090;" >reed.xia@gmail.com</p>

</div>
<a href="#" onclick="alignImg()"><img src="images/favicon200x200.png" alt="favicon200x200" style="position:fixed;width:40px;height:40px;bottom:0px;right:0px;z-index:-3333;background-color:#909090;" /></a>
</body>

＆＃13;

滚动条并在JavaScript中刷新一行

1 个答案: