Bagaimana membuat: berita newsletter

Belajar bagaimana membuat berita newsletter dengan CSS.

Berlangganan newsletter kami

Lorem ipsum text tentang mengapa Anda harus berlangganan newsletter kami blabla. Lorem ipsum text tentang mengapa Anda harus berlangganan newsletter kami blabla. Lorem ipsum text tentang mengapa Anda harus berlangganan newsletter kami blabla.

Coba sendiri

Bagaimana membuat berita newsletter

Langkah pertama - tambahkan HTML:

Gunakan elemen <form> untuk menangani input. Anda dapat menemukan informasi lebih lanjut di tutorial PHP kami.

Lalu tambahkan kontrol input untuk setiap field serta tombol "Kirim":

<form action="action_page.php">
  <div class="container">
    <h2>Langgir ke Berita Acara kami</h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container" style="background-color:white">
    <input type="text" placeholder="Nama" name="name" required>
    <input type="text" placeholder="Alamat email" name="mail" required>
    <label>
      <input type="checkbox" checked="checked" name="subscribe"> Newsletter Harian
    </label>
  </div>
  <div class="container">
    <input type="submit" value="Subscribe">
  </div>
</form>

Ketiga - Tambahkan 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;
}

Coba sendiri

Halaman yang berhubungan

Panduan:Form HTML

Panduan:Form CSS