时间戳

首页 > 解决方案 > Css 样式未正确应用

html - Css 样式未正确应用

问题描述

我正在使用 freemarker 设计电子邮件模板并且遇到了几个问题，所以这是我的问题：

1) 在样式中创建的 CSS 样式未正确应用，正文不是自动边距或不是最大宽度，.parent 样式颜色由于某种原因不是我最初设置的颜色，.paragraph-title 样式已正确应用，包括（字体粗体，颜色，边缘顶部）

2) 有没有办法在文本顶部调整图像大小以完全适合 div 父容器？

<style>
    body {
    margin: auto;
    max-width: 800px;
}

   .parent{
     max-width: 730px;
     color: #002b55;
  }

   .paragraph-title{
     margin-top: 20px;
     font-weight: bold;
     color: #56b7e9;
    }

    </style>

<body>

<div class="parent">
<div>Lieber Nutzer,</div>
<div class="paragraph-title">Installation der 7-ZIP Software</div>
</div>

https://imgur.com/UoCvTo0 gmail https://imgur.com/yNgwjlZ icloud

完整代码

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>email</title>

</head>


<body style="margin: auto;max-width: 720px">

<div style="color: #002b55;">
    <img src=cid:header.png alt="header" width="100%">
    <div style="margin-top: 7px"><b>Lieber Nutzer,</b></div>

    <div style="margin-top: 20px; width: 100%">anbei finden Sie die von Ihnen angeforderten Dokumente aus dem elektronischen
        Gehaltsabrechnungsportal.
        <br>Diese sind zu Ihrer Sicherheit durch eine ZIP-Software verschlüsselt.
        <br>Sollten Sie Fragen zur Nutzung haben, haben wir hier einige Nutzungshinweise für Sie bereitgestellt. Sollten
        <br>Sie dennoch Probleme bei der Nutzung der Dokumente haben, wenden Sie sich bitte an das <a
                href="https://emea.servicedesk.int.kn/tas/public/ssp/content/serviceflow?unid=89593815068e482d8b0e2cfc0a0163f1&from=2aca860d-b6d5-42dd-ac3b-937eab299c43">HR
            Service Center.</a>
    </div>


    <div style="margin-top: 30px;color: #0087b1"><b>Installation der 7-ZIP Software</b></div>

    <div style="margin-top: 20px">Aufgrund der Sensibilität der Daten die verschickt werden, werden diese verschlüsselt
        als ZIP-Dateien versendet.
        <br>Um eine ZIP-Datei öffnen zu können, müssen Sie einmalig ein Archivierungsprogramm auf Ihrem privaten Rechner
        <br>installieren. Dieses Programm ist kostenlos und dient ausschließlich der erhöhten Sicherheit Ihrer Daten.
        <br>Installation für <b>Mac/iOS</b>: https://7zx.de.softonic.com/mac
        <br>Installation für <b>Windows</b>: https://www.7-zip.org/download.html
        <br><b>Smartphone/Tablet</b>: Suchen Sie im App-Store/Play-Store nach ZIP App und installieren Sie eine der
        entsprechenden <br>Apps.
    </div>

    <div style="margin-top: 20px"><b style="color: #0087b1">Anwendungshinweise zum Öffnen der
            Dateien</b></div>

    <div style="margin-top: 20px"><b>Wie kann ich die Datei öffnen?</b></div>
    <div><br> Beim Versand der Mail haben Sie ein Passwort vorgegeben, mit welchem Sie das
        Archiv öffnen können.
        <br>Anschließend können Sie die jeweiligen Dokumente nach dem Öffnen des ZIP-Ordners auch in einen alternativen
        <br>Ordner auf Ihrem Rechner verschieben. In diesem Fall müssen Sie das Dokument nicht mehr freischalten, um es
        <br>öffnen zu können.
    </div>

    <div style="margin-top: 20px"><b>Ich habe den 7-ZIP Konfigurator installiert und kann die Datei trotzdem nicht
            öffnen.</b></div>
    <div><br>Eventuell ist trotz der Installation des Programms dieses nicht als Standard zum
        Öffnen von ZIP-Dateien
        <br>hinterlegt. Hier gibt es zwei Möglichkeiten:
        <br>1. Zuerst den 7-ZIP Konfigurator öffnen und von dort in den jeweiligen Ordner gehen (bzw. Downloads).
        <br>2. In den Downloads auf den ZIP-Ordner mit den Dokumenten per Rechtsklick „Öffnen mit“ und dann 7-ZIP als
        <br>Programm auswählen.
    </div>

    <div style="margin-top: 20px"><b>Passwort vergessen?</b>
        <br>Das Passwort wird nicht gespeichert und kann daher nicht wiederhergestellt werden. Schicken Sie sich die
        <br>Dokumente in diesem Fall einfach erneut aus dem Portal zu.
    </div>

    <hr style="margin-top:25px">

    <div>English Version</div>


    <div style="margin-top: 10px"><b>Dear user,</b>
        <div style="margin-top: 20px"><br>Please find attached your requested documents from the digital payroll portal. For your security they are
            <br>encrypted by a ZIP software.
            <br>In case you have any questions regarding the use, we have prepared some usage hints for you here. If you
            <br>nevertheless encounter any problems using the documents, please contact the <a
                    href="https://emea.servicedesk.int.kn/tas/public/ssp/content/serviceflow?unid=89593815068e482d8b0e2cfc0a0163f1&from=2aca860d-b6d5-42dd-ac3b-937eab299c43">HR
                Service Center.</a>
        </div>
    </div>

    <div style="margin-top: 20px"><b style="color: #0087b1">Installation of the 7-ZIP
            Software</b>
        <br>Due to the sensibility of the sent data, they are transmitted as encrypted ZIP files. In order to be
        able to
        <br>open a ZIP file, you need to once install an archiving program on your private computer. This
        program is free of
        <br>charge and only aims at increasing the security of your data.
        <br>Installation for <b>Mac/iOS</b>: https://7zx.de.softonic.com/mac
        <br>Installation for <b>Windows</b>: https://www.7-zip.org/download.html
        <br><b>Smartphone/Tablet</b>: Search for „ZIP App“ in the App-Store/Play-Store and install the one of
        the apps
    </div>

    <div style="margin-top: 20px"><b style="color: #0087b1">Instructions for opening of
            files</b></div>

    <div style="margin-top: 10px"><b>How can I open the files?</b>
        <div><br>When sending the e-mail you have assigned a password that allows you to open
            the
            archive. After opening
            <br>the ZIP folder you can relocate the respective documents in an alternative folder on
            your computer.<br>In this case,
            <br>you do not need to activate the document in order to open it.
        </div>
    </div>

    <div style="margin-top: 20px"><b>I have installed the 7-ZIP configurator and still cannot open the file.</b>
        <div><br>Perhaps the program is not set as default for opening ZIP files despite its
            correct
            installation. There are two
            <br>possibilities:
            <br>1. First open the 7-ZIP configurator and go to the respective folder (or Downloads).
            <br>2. In the folder Downloads right-click to open the ZIP folder with the documents and
            then choose 7-ZIP as
            <br>program.
        </div>
    </div>

    <div style="margin-top: 20px"><b>Forgot your password?</b>
        <br>The password is not saved and thus cannot be recovered. In this case, just resend the documents
        from the portal.
    </div>
    <hr style="height: 15px;background-color:#002b55">

</div>
</body>
</html>

标签： htmlcss

解决方案

推荐阅读