欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何將HTML，CSS中生成的簽名以正確的樣式復制到outlook 2016中？

CSS
錢艷冰2年前8瀏覽0評論

我為簽名生成器設計了一個模板，并將其上傳到我網站的服務器上(example website.com/signatures)。但是，當我從服務器復制簽名并在Outlook中使用它時，CSS樣式沒有出現。只有圖像和字段被復制，沒有附帶的CSS。如何配置Outlook或修改代碼以確保簽名在Outlook中以相同的方式顯示？

document.getElementById('signature-form').addEventListener('submit', function(event) {
      event.preventDefault();

      // Get form input values
      var name = document.getElementById('name').value;
      var surname = document.getElementById('surname').value;
      var job = document.getElementById('job').value;
      var phone = document.getElementById('phone').value;

      // Update signature output
      var signatureOutput = document.getElementById('signature-output');
      signatureOutput.querySelector('.name-surname').textContent = name + ' ' + surname;
      signatureOutput.querySelector('.job-desc').textContent = job;
      signatureOutput.querySelector('.phone').textContent = phone;

      // Scroll to the signature output
      signatureOutput.scrollIntoView({ behavior: 'smooth' });
    });

    document.getElementById('copy-button').addEventListener('click', function() {
      var signatureOutput = document.getElementById('signature-output');
      
      // Create a range and select the signature output content
      var range = document.createRange();
      range.selectNode(signatureOutput);
      
      // Copy the content to the clipboard
      var selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      document.execCommand('copy');
      
      // Deselect the content
      selection.removeAllRanges();
      
      // Show a success message
      alert('Signature copied to clipboard!');
    });

.rectangle {
      position: absolute;
      width: 486px;
      height: 160px;
      left: 67px;
      top: 331px;
      background: #F0F9F5;
      border-radius: 8px;
    }
    
    .name-surname {
      position: absolute;
      width: 200px;
      height: 18px;
      left: 87px;
      top: 347px;
      font-family: 'DM Sans', sans-serif;
      font-style: normal;
      font-weight: 700;
      font-size: 14px;
      line-height: 18px;
      color: #3B785A;
    }
    
    .job-desc {
      position: absolute;
      width: 160px;
      height: 18px;
      left: 87px;
      top: 369px;
      font-family: 'DM Sans', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 18px;
      color: #3B785A;
    }
    
    .phone {
      position: absolute;
      width: 120px;
      height: 18px;
      left: 87px;
      top: 391px;
      font-family: 'DM Sans', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 18px;
      color: #3B785A;
    }
    
    .social-layout {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0px;
      gap: 16px;
      position: absolute;
      width: 80px;
      height: 16px;
      left: 87px;
      top: 434px;
    }
    
    .logo-linkedin {
      width: 16px;
      height: 16px;
      flex: none;
      order: 0;
      flex-grow: 0;
    }
    
    .logo-youtube {
      width: 16px;
      height: 16px;
      flex: none;
      order: 1;
      flex-grow: 0;
    }
    
    .logo-facebook {
      width: 16px;
      height: 16px;
      flex: none;
      order: 2;
      flex-grow: 0;
    }
    
    .hyperlinkurl {
      position: absolute;
      width: 128px;
      height: 17px;
      left: 87px;
      top: 458px;
      font-family: 'DM Sans', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 13px;
      line-height: 17px;
      text-decoration-line: underline;
      color: #3B785A;
    }
    
    .logomg {
      position: absolute;
      width: 73.92px;
      height: 48px;
      left: 463px;
      top: 427px;
    }
    
    .map-gradient {
      position: absolute;
      width: 307.92px;
      height: 160px;
      left: 201px;
      top: 331px;
      background: url(map-gradient.png);
    }

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css?v=1" />
</head>
<body>
  <div class="rectangle"></div>
  
  <form id="signature-form">
    <input type="text" id="name" placeholder="Name" required>
    <input type="text" id="surname" placeholder="Surname" required>
    <input type="text" id="job" placeholder="Job" required>
    <input type="tel" id="phone" placeholder="Phone Number" required>
    <button type="submit">Generate</button>
  </form>

  <div id="signature-output" class="signature-output">
    <span class="name-surname"></span>
    <span class="job-desc"></span>
    <span class="phone"></span>
  
    <div class="social-layout">
      <a >
        <img src="logo-linkedin.png" alt="logo-linkedin" class="logo-linkedin">
      </a>

      <a >
        <img src="logo-youtube.png" alt="logo-youtube" class="logo-youtube">
      </a>

      <a >
        <img src="logo-facebook.png" alt="logo-facebook" class="logo-facebook">
      </a>
    </div>
  
    <a href="#" class="hyperlinkurl">WebsiteUrl.com</a>
  
    <img src="logo.png" alt="Logo" class="logomg">
  
    <div class="map-gradient"></div>
  </div>

  <button id="copy-button">Copy Signature</button>


</body>
</html>

我不確定從一個文件的CSS中內聯CSS的代碼是否真的能在這里工作，但是這應該是你代碼開發(fā)的方向。

就像評論中說的那樣:外部CSS文件很可能會被阻止，所以您需要在線添加任何樣式。

document
    .getElementById('signature-form')
    .addEventListener('submit', function (event) {
        event.preventDefault();

        // Get form input values
        var name = document.getElementById('name').value;
        var surname = document.getElementById('surname').value;
        var job = document.getElementById('job').value;
        var phone = document.getElementById('phone').value;

        // Update signature output
        var signatureOutput = document.getElementById('signature-output');
        signatureOutput.querySelector('.name-surname').textContent =
            name + ' ' + surname;
        signatureOutput.querySelector('.job-desc').textContent = job;
        signatureOutput.querySelector('.phone').textContent = phone;

        // Scroll to the signature output
        signatureOutput.scrollIntoView({ behavior: 'smooth' });
    });

document.getElementById('copy-button').addEventListener('click', function () {
    var signatureOutput = document.getElementById('signature-output');

    // Create a range and select the signature output content
    var range = document.createRange();
    range.selectNode(signatureOutput);

    // Copy the content to the clipboard
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand('copy');

    // Deselect the content
    selection.removeAllRanges();

    // Show a success message
    alert('Signature copied to clipboard!');
});

.rectangle {
    /* added inline CSS */
}

.name-surname {
    /* added inline CSS */
}

.job-desc {
    /* added inline CSS */
}

.phone {
    /* added inline CSS */
}

.social-layout {
    /* added inline CSS */
}

.logo-linkedin {
    /* added inline CSS */
}

.logo-youtube {
    /* added inline CSS */
}

.logo-facebook {
    /* added inline CSS */
}

.hyperlinkurl {
    /* added inline CSS */
}

.logomg {
    /* added inline CSS */
}

.map-gradient {
    /* added inline CSS */
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css?v=1" />
    </head>
    <body>
        <div
            class="rectangle"
            style="
                position: absolute;
                width: 486px;
                height: 160px;
                left: 67px;
                top: 331px;
                background: #f0f9f5;
                border-radius: 8px;
            "
        ></div>

        <form id="signature-form">
            <input type="text" id="name" placeholder="Name" required />
            <input type="text" id="surname" placeholder="Surname" required />
            <input type="text" id="job" placeholder="Job" required />
            <input type="tel" id="phone" placeholder="Phone Number" required />
            <button type="submit">Generate</button>
        </form>

        <div id="signature-output" class="signature-output">
            <span
                class="name-surname"
                style="
                    position: absolute;
                    width: 200px;
                    height: 18px;
                    left: 87px;
                    top: 347px;
                    font-family: 'DM Sans', sans-serif;
                    font-style: normal;
                    font-weight: 700;
                    font-size: 14px;
                    line-height: 18px;
                    color: #3b785a;
                "
            ></span>
            <span
                class="job-desc"
                style="
                    position: absolute;
                    width: 160px;
                    height: 18px;
                    left: 87px;
                    top: 369px;
                    font-family: 'DM Sans', sans-serif;
                    font-style: normal;
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 18px;
                    color: #3b785a;
                "
            ></span>
            <span
                class="phone"
                style="
                    position: absolute;
                    width: 120px;
                    height: 18px;
                    left: 87px;
                    top: 391px;
                    font-family: 'DM Sans', sans-serif;
                    font-style: normal;
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 18px;
                    color: #3b785a;
                "
            ></span>

            <div
                class="social-layout"
                style="
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    padding: 0px;
                    gap: 16px;
                    position: absolute;
                    width: 80px;
                    height: 16px;
                    left: 87px;
                    top: 434px;
                "
            >
                <a >
                    <img
                        src="logo-linkedin.png"
                        alt="logo-linkedin"
                        class="logo-linkedin"
                        style="
                            width: 16px;
                            height: 16px;
                            flex: none;
                            order: 0;
                            flex-grow: 0;
                        "
                    />
                </a>

                <a >
                    <img
                        src="logo-youtube.png"
                        alt="logo-youtube"
                        class="logo-youtube"
                        style="
                            width: 16px;
                            height: 16px;
                            flex: none;
                            order: 1;
                            flex-grow: 0;
                        "
                    />
                </a>

                <a >
                    <img
                        src="logo-facebook.png"
                        alt="logo-facebook"
                        class="logo-facebook"
                        style="
                            width: 16px;
                            height: 16px;
                            flex: none;
                            order: 2;
                            flex-grow: 0;
                        "
                    />
                </a>
            </div>

            <a
                href="#"
                class="hyperlinkurl"
                style="
                    position: absolute;
                    width: 128px;
                    height: 17px;
                    left: 87px;
                    top: 458px;
                    font-family: 'DM Sans', sans-serif;
                    font-style: normal;
                    font-weight: 400;
                    font-size: 13px;
                    line-height: 17px;
                    text-decoration-line: underline;
                    color: #3b785a;
                "
                >WebsiteUrl.com</a
            >

            <img
                src="logo.png"
                alt="Logo"
                class="logomg"
                style="
                    position: absolute;
                    width: 73.92px;
                    height: 48px;
                    left: 463px;
                    top: 427px;
                "
            />

            <div
                class="map-gradient"
                style="
                    position: absolute;
                    width: 307.92px;
                    height: 160px;
                    left: 201px;
                    top: 331px;
                    background: url(map-gradient.png);
                "
            ></div>
        </div>

        <button id="copy-button">Copy Signature</button>
    </body>
</html>