Bygg et Responsive Pricing Table med nøyaktig svinge stater

Under denne opplæringen vil vi skape et slank prisbord med noen slående hovereffekter. Vi bruker Lea Verous Prefixfree-skript for å holde CSS ren, pluss vi gjør hele greia responsive, skifter layoutet ved et par brytepunkt.

The Markup

Bildet under viser et visuelt skjelett av merkingen vi skal skape. Som du kan se, er det ikke bygget ved hjelp av tabeller; Vi bruker uordnede lister for maksimal fleksibilitet og respons.

HTML Markup

Før alt annet, må vi begynne med et tomt dokument. Veldig viktig her er Viewport-metakoden som gjør det mulig for alle enheter å tolke vårt responsive layout riktig.

Nå kan vi begynne med kjøttet på bordoppsettet vårt (eller rettere sagt liste markup):

 
 
... 
 
 
grunn~~POS=TRUNC
 
 
 $ 9.99 per måned 
 
 
 
2 GB Lagring
 
5 klienter
 
10 aktive prosjekter
 
10 farger
 
Gratis godbiter
 
24/7-e-poststøtte
 
 
 Kjøp nå 
 
 
... 
 
... 
 
 

Helt nederst har vi tatt med prefixfree (før avslutningen tag), som tillater oss å bruke unprefixed CSS egenskaper overalt. Det fungerer bak kulissene, og legger til den nåværende nettleserens prefiks til en hvilken som helst CSS-kode, bare når det trengs.

Styles

Etter å ha sortert ut vårt oppslag, la oss se på å legge til noen stiler. Jeg skal gjøre det innen