Sådan opretter du: E-mail nyhedsbrev

Lær hvordan du opretter en e-mail nyhedsbrev med CSS.

Abonner på vores nyhedsbrev

Lorem ipsum tekst om hvorfor du bør abonnere på vores nyhedsbrev blabla. Lorem ipsum tekst om hvorfor du bør abonnere på vores nyhedsbrev blabla. Lorem ipsum tekst om hvorfor du bør abonnere på vores nyhedsbrev blabla.

Prøv det selv

Sådan opretter du en nyhedsbrev

Første trin - tilføj HTML:

Brug <form> element til at håndtere input. Læs mere om det i vores PHP vejledning.

Så tilføj inputkontroller og 'Indsend' knappen til hver felt:

<form action="action_page.php">
  <div class="container">
    <h2>Abonner på vores nyhedsbrev</h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container" style="background-color:white">
    <input type="text" placeholder="Navn" name="name" required>
    <input type="text" placeholder="E-mailadresse" name="mail" required>
    <label>
      <input type="checkbox" checked="checked" name="subscribe"> Daglig nyhedsbrev
    </label>
  </div>
  <div class="container">
    <input type="submit" value="Subscribe">
  </div>
</form>

第二步 - 添加 CSS：

/* 为表单元素设置样式，使其周围带有边框 */
form {
  border: 4px solid #f1f1f1;
}
/* 为容器添加一些内边距和灰色背景色 */
.container {
  padding: 20px;
  background-color: #f1f1f1;
}
/* 设置输入元素和提交按钮的样式 */
input[type=text], input[type=submit] {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
/* 为复选框添加外边距 */
input[type=checkbox] {
  margin-top: 16px;
}
/* 设置提交按钮的样式 */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  border: none;
}
input[type=submit]:hover {
  opacity: 0.8;
}

Prøv det selv

Relaterte sider

Tilbakemelding:HTML skjema

Tilbakemelding:CSS skjema