Question

我试图将徽标放在渐变代码的第一个和右边。此代码用于Microstrategy（商业智能工具）登录页面。我们之前使用过更简单的代码。我需要帮助使第二个代码块与第一个代码块相同。

＆＃13;

<DIV id=grad1>
  <TABLE width="100%">
    <TBODY>
      <TR>
        <TD style="BACKGROUND: white" width="30%" align=left>
          <IMG src="https://upload.wikimedia.org/wikipedia/en/d/d8/Url-logo.png" width=245 height=50>
        </TD>
        <TD style="FONT-SIZE: 40px; FONT-FAMILY: Helvetica, sans-serif; BACKGROUND:         none transparent scroll repeat 0% 0%; COLOR: white; PADDING-BOTTOM: 5px; TEXT-    ALIGN: left; PADDING-TOP: 5px; PADDING-LEFT: 20px; BACKGROUND: linear-    gradient(to right, #7AC143 , #3DA040, #007A3C)"
        ; width="70%">Enterprise Reporting
        </TD>
      </TR>
    </TBODY>
  </TABLE>
  <BR>
</DIV>



<DIV id=grad1>
  <TABLE width="100%">
    <TBODY>
      <TR>
        <TD style="BACKGROUND: white" width="30%" align=left>
          <IMG src="https://upload.wikimedia.org/wikipedia/en/d/d8/Url-logo.png" width=245 height=230>
        </TD>
        <CANVAS id=myCanvas style="BORDER-TOP: #d3d3d3 1px solid;     BORDER-RIGHT: #d3d3d3 1px solid; BORDER-BOTTOM: #d3d3d3 1px solid; BORDER-LEFT:     #d3d3d3 1px solid" height="115" width="900">Your browser does not support the HTML5 canvas tag.
          <SCRIPT>
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var c1 = document.getElementById("myCanvas");
            var ctx1 = c.getContext("2d");
            var gradient = ctx.createLinearGradient(0, 0, 900, 0);
            gradient.addColorStop(0, "#7AC143");
            gradient.addColorStop(0.5, "#3DA040");
            gradient.addColorStop(1, "#007A3C");
            ctx.textAlign = 'left';
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 20, 900, 75);
            ctx1.fillStyle = "white";
            ctx1.font = "40px Helvetica, sans-serif";
            ctx1.fillText("Enterprise Reporting", 450, 65);

          </SCRIPT>
        </CANVAS>
      </TR>
    </TBODY>
  </TABLE>
</DIV>

＆＃13;

Answer 1

最重要的是你的画布不在桌面内。您需要将其包含在新的表格单元格中（<TD></TD>）。

<TD style="BACKGROUND: white" width="30%" align=left>
  <IMG src="https://upload.wikimedia.org/wikipedia/en/d/d8/Url-logo.png" width=245 height=230>
</TD>
<TD>
  <CANVAS id=myCanvas style="BORDER-TOP: #d3d3d3 1px solid;     BORDER-RIGHT: #d3d3d3 1px solid; BORDER-BOTTOM: #d3d3d3 1px solid; BORDER-LEFT:     #d3d3d3 1px solid" height="115" width="900">
    Your browser does not support the HTML5 canvas tag.
  </CANVAS>
</TD>

此外，在html中间插入脚本标记通常是不好的做法。我会在画布上面加上脚本。

最后，你提到你是HTML新手（通常可能是编码吗？）。读取格式正确的代码要容易得多。

包含多种不同类型操作的长行代码难以解析和理解（更不用说没有滚动的读取）。

<TD style="BACKGROUND: white" width="30%" align=left><IMG     src="https://upload.wikimedia.org/wikipedia/en/d/d8/Url-logo.png" width=245     height=230></TD><CANVAS id=myCanvas style="BORDER-TOP: #d3d3d3 1px solid;     BORDER-RIGHT: #d3d3d3 1px solid; BORDER-BOTTOM: #d3d3d3 1px solid; BORDER-LEFT:     #d3d3d3 1px solid" height="115" width="900">Your browser does not support the     HTML5 canvas tag.

与我的回复更有序的代码相反。 TD正在爆发。它们中包含的材料是缩进的，因此您可以轻松地告知哪些信息属于哪些TD（我会对DIV，TABLE，TR等进行相同的操作）。

如何使用HTML＆amp;放置徽标JavaScript的

1 个答案: