如何使用HTML&JavaScript

How to place a logo using HTML & JavaScript

本文关键字：JavaScript amp 何使用 HTML      更新时间：2024-03-25

我试图把徽标放在渐变代码的右边。此代码用于MicroCategory（商业智能工具）登录页。我们之前使用了更简单的代码。我需要帮助使第二个代码块和第一个代码块一样工作。

<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>

最重要的是画布不在表中。您需要将其包含在一个新的表格单元格（<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等也会这样做）。

相关文章：