0

我试图在此页面上很好地定位 JQuery 动画（较低，居中）：

http://www.edoardocroce.com/

我正在使用在这里和那里找到的代码片段。您可以在下面找到我在这里使用的代码。

任何人都可以告诉我这是否可能不需要太多工作？

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js">
    </script>
    <script type="text/javascript">
var myName = "Edo's Blog";
var letterColors=[black,black,black];
if(10 < 9) {
    bubbleShape = "circle";
}
else {
    bubbleShape = "square";
}
drawName(myName, letterColors);
bounceBubbles();
    </script>
  </body>
</html>
4

2 回答 2

0

将 CSS 添加到中心并降低画布...例如：

#myCanvas {
   margin: 0 auto; /*to center*/
   margin-top: 80px; /*to lower*/
}

万一你不知道，css进入头部，像这样

<head>
  <style>
    #myCanvas {
       margin: 0 auto; /*to center*/
       margin-top: 80px; /*to lower*/
    }
  </style>
 .....
</head>

或者您可以链接到外部 css 表，这是做事的“正确”方式。

于 2014-01-04T23:38:21.807 回答
0

只需将样式添加到#myCanvas，或在其上方添加带有样式的元素，例如：

<div id="header"><canvas id="myCanvas"></canvas></div>

在你的 CSS 上：

#header { text-align: center; width: 100% }
#myCanvas { margin-top: 100px }

这将使画布居中并将标题降低 100 像素。

于 2014-01-04T23:35:40.497 回答