如何创建：电子邮件通讯

学习如何用 CSS 创建电子邮件通讯。

订阅我们的新闻通讯

Lorem ipsum text about why you should subscribe to our newsletter blabla. Lorem ipsum text about why you should subscribe to our newsletter blabla. Lorem ipsum text about why you should subscribe to our newsletter blabla.

Try it yourself

如何创建新闻通讯

第一步 - 添加 HTML：

使用 <form> 元素来处理输入。您可以在我们的 PHP 教程中了解更多相关信息。

然后为每个字段添加输入控件以及“提交”按钮：

<form action="action_page.php">
  <div class="container">
    <h2>Abonnieren Sie unseren Newsletter</h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container" style="Hintergrundfarbe:white">
    <input type="text" placeholder="Name" name="name" required>
    <input type="text" placeholder="E-Mail-Adresse" name="mail" required>
    <label>
      <input type="checkbox" checked="checked" name="subscribe"> Tägliches Newsletter
    </label>
  </div>
  <div class="container">
    <input type="submit" value="Abonnieren">
  </div>
</form>

Schritt 2 - CSS hinzufügen:

/* Stile für die Formularelemente einstellen, um eine Umrandung um sie zu erstellen */
form {
  Umrandung: 4px feste Linie #f1f1f1;
}
/* Einige Innenabstände und eine graue Hintergrundfarbe für den Behälter hinzufügen */
.container {
  Auffüllung: 20px;
  Hintergrundfarbe: #f1f1f1;
}
/* Stile für Eingabeelemente und Übermittlungsbutton einstellen */
input[type=text], input[type=submit] {
  Breite: 100%;
  Auffüllung: 12px;
  Abstand: 8px 0;
  Anzeige: inline-block;
  Umrandung: 1px festes Linie #ccc;
  Box-sizing: border-box;
}
/* Außenabstand für das Kontrollkästchen hinzufügen */
input[type=checkbox] {
  obenabstand: 16px;
}
/* Stile für den Übermittlungsbutton einstellen */
input[type=submit] {
  Hintergrundfarbe: #04AA6D;
  Farbe: weiß;
  keine Umrandung;
}
input[type=submit]:hover {
  Transparenz: 0.8;
}

Try it yourself

Related pages

Tutorial:HTML form

Tutorial:CSS form