我是新来的Javascript &相对较新的HTML。我想知道什么语言(纯html或Javascript & html)我应该使用&算法的一些建议,以执行以下操作:对角位置HTML元素
将4个方块放在背景上,但将它们对角放置。每个方块都是一个链接,您可以点击进入不同的页面。 那么,我将如何能够像我的图片对角地定位html元素?
http://i54.tinypic.com/2v7uw5u.png
我相信我的代码是这样的:
<script>
function positionIt()
{
var screenW = // javascript function to get screen width??;
var screenH = // javascript function to get screen height??;
var sq1 = document.getElementById("square1");
var sq2 = document.getElementById("square2");
var sq3 = document.getElementById("square3");
var sq4 = document.getElementById("square4");
// What javascript functions set a elements x,y positions?
// Should I use another way of positioning the square (not by absolute terms)
sq1.setXPos(screenW/4);
sq1.setYPos(screenH/4);
sq2.setXPos(screenW/3);
sq2.setYPos(screenH/3);
}
</script>
// OR if I use css
.menu { background-color: blue; }
/* Position the square in absolute terms diagonally */
#square1 { x=200; y=200; }
#square2 { x=300; y=300; }
#square3 { x=400; y=400; }
#square4 { x=500; y=500; }
<div class="menu" onload="positionIt()">
<a id="square1" href="home.html"><img src="square.jpg" /></a>
<a id="square2" href="home.html"><img src="square.jpg" /></a>
<a id="square3" href="home.html"><img src="square.jpg" /></a>
<a id="square4" href="home.html"><img src="square.jpg" /></a>
</div>
谢谢,这太棒了。有没有办法让CSS的屏幕/浏览器尺寸,所以我可以使用这样的表达式:left:expression(screen.width <= 1000?screen.width/4:true) – Mack
@Mack:不使用CSS(是与JS),但它会更好,如果我改变我的演示为基于'%'的布局,而不是如果你想补偿不同大小的屏幕。 – thirtydot
@Mack:其实我不确定你想要什么。你能解释一下屏幕大小和页面上应该改变的关系吗? (框的大小,框的位置等) – thirtydot