Nasıl oluşturulur güzel görünen tablo, Css, Rehberler olmadan formu |

Nasıl oluşturulur güzel görünen tablo olmadan formu

Bu eğitimde ne kadar iyi bir formu tek etiket ve bir HTML tablo yapıları taklit girişi etiketleri ile temiz bir CSS tasarım kullanarak tasarım anlatıyor. Web projeleri için özel formu tasarım tüm CSS / HTML öğelerini kullanabilirsiniz:

form-17

1. Adım: temel yapısı oluşturun


  <form> 
  > <div class = "box"> 
  <h1> İletişim Formu: </ h1> 
  <label> 
  <span> Tam adı </ span> 
  class = "input_text" name = "name" id = "name" / > = "text" class = "input_text" name = "name" <input type = "name" / id> 
  </ etiket> 
  <label> 
  <span> E-posta </ span> 
  class = "input_text" name = "email" id = "email" / > = "text" class = "input_text" name = "email" <input type = "email" / id> 
  </ etiket> 
  <label> 
  <span> Konu </ span> 
  class = "input_text" name = "subject" id = "subject" / > = "text" class = "input_text" name = "subject" <input type = "subject" / id> 
  </ etiket> 
  <label> 
  <span> Mesaj </ span> 
  name = "feedback" id = "feedback" > </textarea> <textarea class = "message" name = "feedback" = "feedback"> </ textarea> id 
  class = "button" value = "Submit Form"  / > = "button" class = "button" değeri <input type = "Submit Form" /> 
  </ etiket> 
 
 
  </ p> 
  </ form>

Adım: 2 CSS Kodu Oluştur


  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  % normal  Arial, Helvetica, sans-serif ; background : # 161712 ; } body (font: 100%, normal Arial, Helvetica, sans-serif; background: # 161712;) 
  ; padding : 0 ; color : #ffffff ; } formu, giriş, metin (margin: 0; padding: 0; color: # ffffff;) seçin 

  div. box ( 
  ; margin: 0 otomatik; 
  width: 500px; 
  ; background: # 222222; 
  konum: göreli; 
  top: 50px; 
  # 262626 ; border: 1px solid # 262626; 
  ) 

  div. kutusunu h1 (  
  ; color: # ffffff; 
  font-size: 18px; 
  text-transform: büyük; 
  5px 5px ; padding: 5px 0 5px 5px; 
  # 161712 ; border-bottom: 1px solid # 161712; 
  # 161712 ; border-top: 1px solid # 161712;  
  ) 

  div. kutusuna etiket ( 
  width: 100%; 
  ; display: engellemek; 
  ; background: # 1C1C1C; 
  # 262626 ; border-top: 1px solid # 262626; 
  # 161712 ; border-bottom: 1px solid # 161712; 
  10px 0 ; padding: 10px 0 10px 0; 
  ) 

  div. kutusuna etiket aralığı ( 
  ; display: engellemek; 
  ; color: # bbbbbb; 
  font-size: 12px; 
  float: left; 
  width: 100px; 
  text-align: right; 
  0 0 ; padding: 5px 20px 0 0; 
  ) 

  div. kutusunda. input_text ( 
  ; padding: 10px 10px; 
  width: 200px; 
  ; background: # 262626; 
  double # 171717 ; border-bottom: 1px çift # 171717; 
  double # 171717 ; border-top: 1px çift # 171717; 
  # 333333 ; border-left: 1px çift # 333333; 
  # 333333 ; border-right: 1px çift # 333333; 
  ) 

  div. kutusunu. mesaj ( 
  ; padding: 7px 7px; 
  width: 350 pikselden; 
  ; background: # 262626; 
  double # 171717 ; border-bottom: 1px çift # 171717; 
  double # 171717 ; border-top: 1px çift # 171717; 
  # 333333 ; border-left: 1px çift # 333333; 
  # 333333 ; border-right: 1px çift # 333333; 
  overflow: hidden; 
  height: 150px; 
  ) 

  div. kutusunu. düğmesini 
  ( 
  10px 0 ; margin: 0 0 10px 0; 
  ; padding: 4px 7px; 
  ; background: # CC0000; 
  border: 0px; 
  ; konum: göreli; 
  top: 10px; 
  left: 382px; 
  width: 100px; 
  double # 660000 ; border-bottom: 1px çift # 660000; 
  double # 660000 ; border-top: 1px çift # 660000; 
  #FF0033 ; border-left: 1px çift # FF0033; 
  #FF0033 ; border-right: 1px çift # FF0033; 
  )