Bouw een responsieve tarieventabel met netjes zwevende staten

Tijdens deze tutorial zullen we een strakke prijstabel maken met enkele opvallende hover-effecten. We gebruiken het Prefixfree-script van Lea Verou om onze CSS schoon te houden, en we maken het hele proces responsief, waarbij de lay-out wordt verschoven naar een aantal onderbrekingspunten.

De markup

De onderstaande afbeelding toont een visueel skelet van de markup die we zullen maken. Zoals u kunt zien, is het niet opgebouwd met behulp van tabellen; we gebruiken ongeordende lijsten voor maximale flexibiliteit en reactievermogen.

HTML-markup

Voor alles moeten we beginnen met een leeg document. Heel belangrijk hier is de metatag voor de viewport waarmee alle apparaten onze responsieve lay-out correct kunnen interpreteren.

Nu kunnen we beginnen met het vlees van onze tabelmarkering (of beter gezegd lijst markup):

 
 
... 
 
 
basis-
 
 
 $ 9.99 per maand 
 
 
 
Opslag van 2 GB
 
5 klanten
 
10 actieve projecten
 
10 kleuren
 
Gratis Goodies
 
24/7 e-mailondersteuning
 
 
 Koop nu 
 
 
... 
 
... 
 
 

Helemaal onderaan hebben we prefixfree toegevoegd (vóór de sluiting tag), waarmee we overal ongekende CSS-eigenschappen kunnen gebruiken. Het werkt achter de schermen en voegt het voorvoegsel van de huidige browser toe aan elke CSS-code, alleen wanneer dat nodig is.

stijlen

Nadat we onze opmaak hebben uitgezocht, laten we enkele stijlen toevoegen. Ik zal dit binnenin doen