Kā izveidot labu meklējat veidā bez galda, CSS, konsultācijas |

Kā izveidot labu meklējat veidā bez galda

Šī apmācība ir paskaidrots, kā veidot labu formu, izmantojot tīru CSS dizains tikai ar etiķeti un ievadi tagus modelētu HTML tabulu struktūru. Varat izmantot visus CSS / HTML elementi, dizains jūsu pasūtījuma veidlapu jūsu tīmekļa projektos:

form-17

Solis 1: Izveidot HTML struktūra


  <form> 
  > <div klase = "box"> 
  <h1> Contact Form: </ h1> 
  <label> 
  <span> Pilns vārds </ span> 
  class = "input_text" name = "name" id = "name" / > <input type = "text" klase = "input_text" name = "name" id = "name" /> 
  </ Label> 
  <label> 
  <span> E-pasts </ span> 
  class = "input_text" name = "email" id = "email" / > <input type = "text" klase = "input_text" name = "email" id = "email" /> 
  </ Label> 
  <label> 
  <span> Subject </ span> 
  class = "input_text" name = "subject" id = "subject" / > <input type = "text" klase = "input_text" name = "subject" id = "subject" /> 
  </ Label> 
  <label> 
  <span> Message </ span> 
  name = "feedback" id = "feedback" > </textarea> <textarea klase = "message" name = "feedback" id = "feedback"> </ textarea> 
  class = "button" value = "Submit Form"  / > <input type = "button" klase = "button" vērtība = "Submit Form" /> 
  </ Label> 
 
 
  </ div> 
  </ form>

Solis: 2 Izveidot CSS Kods


  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  % normal  Arial, Helvetica, sans-serif ; background : # 161712 ; } ķermeņa (font: 100% normāla Arial, Helvetica, sans-serif; background: # 161712;) 
  ; padding : 0 ; color : #ffffff ; } formā, ievadi, izvēlieties, textarea (margin: 0; padding: 0; color: # ffffff;) 

  div. box ( 
  ; margin: 0 auto; 
  width: 500px; 
  ; background: # 222222; 
  pozīciju: relatīvā; 
  top: 50px; 
  # 262626 ; border: 1px solid # 262626; 
  ) 

  div. ailē h1 (  
  ; color: # ffffff; 
  font-size: 18px; 
  text-pārveidot: lielajiem burtiem; 
  5px 5px ; padding: 5px 0 5px 5px; 
  # 161712 ; border-bottom: 1px solid # 161712; 
  # 161712 ; border-top: 1px solid # 161712;  
  ) 

  div. box label ( 
  width: 100%; 
  ; Rādīt: block; 
  ; background: # 1C1C1C; 
  # 262626 ; border-top: 1px solid # 262626; 
  # 161712 ; border-bottom: 1px solid # 161712; 
  10px 0 ; padding: 10px 0 10px 0; 
  ) 

  div. box label span ( 
  ; Rādīt: block; 
  ; color: # bbbbbb; 
  font-size: 12px; 
  Pluds: left; 
  width: 100px; 
  text-align: right; 
  0 0 ; padding: 5px 20px 0 0; 
  ) 

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

  div. lodziņā. ziņu ( 
  ; padding: 7px 7px; 
  width: 350px; 
  ; background: # 262626; 
  double # 171717 ; border-bottom: 1px dubultā # 171717; 
  double # 171717 ; border-top: 1px dubultā # 171717; 
  # 333333 ; border-left: 1px dubultā # 333333; 
  # 333333 ; border-right: 1px dubultā # 333333; 
  pārplūdes: slēpta; 
  augstums: 150px; 
  ) 

  div. lodziņā. poga 
  ( 
  10px 0 ; margin: 0 0 10px 0; 
  ; padding: 4px 7px; 
  ; background: # CC0000; 
  border: 0px; 
  ; stāvokli: relatīva; 
  top: 10px; 
  left: 382px; 
  width: 100px; 
  double # 660000 ; border-bottom: 1px dubultā # 660000; 
  double # 660000 ; border-top: 1px dubultā # 660000; 
  #FF0033 ; border-left: 1px dubultā # FF0033; 
  #FF0033 ; border-right: 1px dubultā # FF0033; 
  )