Πώς δημιουργήσει καλή αναζητούν WITHOUT μορφή πίνακα, CSS, Tutorials |

Πώς δημιουργήσει καλή αναζητούν WITHOUT μορφή πίνακα

Αυτό εξηγεί εκμάθηση πώς να σχεδιάσει μια καλή μορφή, χρησιμοποιώντας ένα καθαρό CSS σχεδιασμό με μόνο σήμα εισόδου και tags για την προσομοίωση ενός πίνακα HTML δομή. Μπορείτε να χρησιμοποιήσετε όλα τα CSS / HTML στοιχεία για το σχεδιασμό σας για την προσαρμοσμένη φόρμα σας web έργα:

form-17

Βήμα 1: Δημιουργία βασικού HTML δομή


  <form> 
  > <div κατηγορίας = "box"> 
  <h1> Επικοινωνία: </ h1> 
  <LABEL> 
  <span> Ονοματεπώνυμο </ span> 
  class = "input_text" name = "name" id = "name" / > <input τύπο = "text" κατηγορία = "input_text" όνομα = "name" id = "name" /> 
  </ label> 
  <LABEL> 
  <span> Email </ span> 
  class = "input_text" name = "email" id = "email" / > <input τύπο = "text" κατηγορία = "input_text" όνομα = "email" id = "email" /> 
  </ label> 
  <LABEL> 
  <span> Θέμα </ span> 
  class = "input_text" name = "subject" id = "subject" / > <input τύπο = "text" κατηγορία = "input_text" όνομα = "subject" id = "subject" /> 
  </ label> 
  <LABEL> 
  <span> Μήνυμα </ span> 
  name = "feedback" id = "feedback" > </textarea> <textarea κατηγορίας = "message" όνομα = "feedback" id = "feedback"> </ textarea> 
  class = "button" value = "Submit Form"  / > <input τύπο = "button" κατηγορία = "button" αξία = "Submit Form" /> 
  </ label> 
 
 
  </ div> 
  </ form>

Βήμα: 2 Δημιουργία κώδικα CSS


  ; padding : 0 ; } * (Περιθώριο: 0? Padding: 0?) 
  % normal  Arial, Helvetica, sans-serif ; background : # 161712 ; } σώμα (font: 100% της κανονικής Arial, Helvetica, sans-serif? φόντο: # 161712?) 
  ; padding : 0 ; color : #ffffff ; } μορφή, των εισροών, επιλέξτε, textarea (περιθώριο: 0? padding: 0? color: # FFFFFF?) 

  div. κουτί ( 
  ; περιθώριο: 0 auto? 
  πλάτος: 500px? 
  ; φόντο: # 222222? 
  θέση: σχετική? 
  top: 50px? 
  # 262626 ; σύνορα: 1PX στερεών # 262626? 
  ) 

  div. κουτί υ1 (  
  ; Χρώμα: # FFFFFF? 
  font-size: 18px? 
  κείμενο-μετατροπή: κεφαλαία? 
  5px 5px ; padding: 5px 0 5px 5px? 
  # 161712 ; σύνορα-κάτω: 1PX στερεών # 161712? 
  # 161712 ; συνόρων-top: 1PX στερεών # 161712?  
  ) 

  div. κουτί ετικέτα ( 
  πλάτος: 100%? 
  ; απεικόνιση: block? 
  ; φόντο: # 1C1C1C? 
  # 262626 ; συνόρων-top: 1PX στερεών # 262626? 
  # 161712 ; σύνορα-κάτω: 1PX στερεών # 161712? 
  10px 0 ; padding: 10px 0 10px 0? 
  ) 

  div. κουτί ετικέτα span ( 
  ; απεικόνιση: εμποδίσει? 
  ; Χρώμα: # bbbbbb? 
  font-size: 12px? 
  float: αριστερά? 
  πλάτος: 100px? 
  κείμενο-ευθυγραμμιστεί: δικαίωμα? 
  0 0 ; padding: 5px 20px 0 0? 
  ) 

  div. κουτί. input_text ( 
  ; padding: 10px 10px? 
  πλάτος: 200px? 
  ; φόντο: # 262626? 
  double # 171717 ; σύνορα-κάτω: 1PX διπλή # 171717? 
  double # 171717 ; συνόρων-top: 1PX διπλή # 171717? 
  # 333333 ; συνόρων-αριστερά: 1PX διπλό # 333333? 
  # 333333 ; συνόρων-δεξιά: 1PX διπλή # 333333? 
  ) 

  div. κουτί. μηνύματος ( 
  ; padding: 7px 7px? 
  πλάτος: 350px? 
  ; φόντο: # 262626? 
  double # 171717 ; σύνορα-κάτω: 1PX διπλή # 171717? 
  double # 171717 ; συνόρων-top: 1PX διπλή # 171717? 
  # 333333 ; συνόρων-αριστερά: 1PX διπλό # 333333? 
  # 333333 ; συνόρων-δεξιά: 1PX διπλή # 333333? 
  overflow: hidden? 
  ύψος: 150px? 
  ) 

  div. κουτί. κουμπί 
  ( 
  10px 0 ; περιθώριο: 0 0 10px 0? 
  ; padding: 4px 7px? 
  ; φόντο: # CC0000? 
  σύνορα: 0px? 
  ; θέση: σχετική? 
  top: 10px? 
  αριστερά: 382px? 
  πλάτος: 100px? 
  double # 660000 ; σύνορα-κάτω: 1PX διπλή # 660000? 
  double # 660000 ; συνόρων-top: 1PX διπλή # 660000? 
  #FF0033 ; συνόρων-αριστερά: 1PX διπλό # FF0033? 
  #FF0033 ; συνόρων-δεξιά: 1PX διπλή # FF0033? 
  )