Nasıl oluşturulur: E-posta bülteni

CSS ile e-posta bülteni nasıl oluşturulur öğrendiğinizi öğrenin.

Haber bültenimize abone olun

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.

Kişisel olarak deneyin

Haber bülteni nasıl oluşturulur

İlk Adım - HTML Ekle:

<form> elementini girdileri işlemek için kullanın. Daha fazla bilgi için bizim PHP eğitim programımıza göz atabilirsiniz.

Her için her alan ekleyin girdi kontrol cihazı ve 'Gönder' düğmesi:

<form action="action_page.php">
  <div class="container">
    <h2>Bizim Bültenimize Abone Olun</h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container" style="arka_plan_rengi:white">
    <input type="text" placeholder="Ad" name="ad" gereklidir>
    <input type="text" placeholder="E-posta adresi" name="mail" gereklidir>
    <label>
      <input type="checkbox" checked="checked" name="subscribe"> Günlük Bülten
    </label>
  </div>
  <div class="container">
    <input type="submit" value="Abone Ol">
  </div>
</form>

İkinci Adım - CSS Ekle:

/* Form elementlerinin tarzını ayarlayın, etrafında çerçeve oluşturun */
form {
  çerçeve: 4px solid #f1f1f1;
}
/* Konteynerin iç kenar boşluklarını ve gri arka plan rengini ekleyin */
.container {
  dolgu: 20px;
  arka_plan_rengi: #f1f1f1;
}
/* Giriş elementleri ve gönder düğmelerinin tarzını ayarlayın */
input[type=text], input[type=submit] {
  genişlik: %100;
  dolgu: 12px;
  kenarlik: 8px 0;
  görünüm: yatay_bloklama;
  çerçeve: 1px solid #ccc;
  çevre_dahil: kutu;
}
/* Çekme kutusuna etkin bir kenarlık ekleyin */
input[type=checkbox] {
  üst_kenar: 16px;
}
/* Gönder düğmesinin tarzını ayarlayın */
input[type=submit] {
  arka_plan_rengi: #04AA6D;
  renk: beyaz;
  çerçeve: none;
}
input[type=submit]:hover {
  şeffaflık: 0.8;
}

Kişisel olarak deneyin

İlgili sayfalar

Ders:HTML formu

Ders:CSS formu