Hvordan lage en CSS Sammenligning Chart

Hvordan lage en CSS Sammenligning Chart


Sammenligning diagrammer er en ren og elegant måte å presentere informasjon om en tjeneste, produkt eller plan som gjør at betrakteren til å ta avgjørelser eller kjøp raskt. I dag kan HTML5-koder brukes i kombinasjon med lister og divs (<div> tags) i stedet for å bruke tabeller, som har en mer rigid og statisk struktur. CSS-klasser brukes til å bestemme posisjonen til hver DIV og listeelement, og å style overskrifter og verdier. Det er en rekke måter å lage en sammenligning diagram ved hjelp av CSS, og ingen av dem er bedre eller verre enn en annen. Men hvis du vil at hver kolonne for å være interaktiv, er den mest effektive metoden å bruke stylet divs.

Bruksanvisning

1 Åpne HTML editor og opprette en ny fil som heter "chart.html." Denne filen vil holde strukturen og innholdet i sammenligning diagram. Opprett en ny ny fil og kaller det "style.css". Denne filen vil holde CSS som styrer utformingen og utseendet på diagrammet. Denne koden kan senere bli lagt til ditt nettsted hoved stilark eller holdes atskilt. Det er opp til deg. Lagre begge filer til en ny mappe som "mychart."

2 Fjern eventuelle eksisterende innhold fra som kan ha blitt lagt til av din editor HTML-dokumentet. Skriv inn følgende kode for å lage en HTML5 header for dokumentet:

<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8" />
<Title> tittel </ title>
<Link href = "style.css" rel = "stylesheet" type = "text / css" />
</ Head>

Erstatt "tittelen" med den ønskede tittelen på diagrammet og sikre veien til din style.css er riktig.

3 Skriv en åpning "<body>" tag. Nedenfor denne angir åpnings koder for å begynne din første kolonne. Følgende eksempler bruker HTML5 tags "artikkel" og "header" for å definere hver kolonne som en egen del av innholdet.

<Div id = "diagram">
<Artikkelen>

&lt;header>
&lt;h1>Option One&lt;/h1>
&lt;/header>
&lt;section>

Erstatt "Option One" med ønsket kurs navn, som kan være noe sånt som "Basic Plan" eller "konkurrent".

4 Skriv inn HTML for valgliste eller verdier. Du må nok rader for å få plass til maksimumsverdiene, selv om de ikke brukes i hver kolonne, for eksempel hvis "Alternativ 1" har bare fire fordeler eller verdier, men "Alternativ 3" har ti, du trenger minst ti rader. Dette oppnås ved hjelp av en sorterte liste:

<Ul>
<Li> Fordel 1 </ li>
<Li> <div class = "sjekke"> </ div> </ li>
</ Ul>

Du ville bare duplisere "<li> Fordel 1 </ li>" så mange ganger som nødvendig, endre innholdet på riktig måte. Innholdet kan være tekst, linker eller bilder. For å unngå å duplisere bilde-koder, kan du bruke en DIV klasse med en stylet bakgrunn i stedet, som i det andre eksemplet. Du må lukke seksjon på dette punktet ved å skrive inn "</ avsnitt>" tag.

5 Skriv inn din footer koden under ditt lukkede delen. Bunnteksten er et passende sted å sette pris, en utvalgt eller "kjøp nå" -knappen, eller begge deler. Bruke "bunntekst" tag er en snarvei i HTML5 som unngår å skape en spesiell beholder klasse, og i stedet kan du opprette en enhetlig stil som kan brukes på hver "bunntekst" i hver kolonne. For eksempel:
<Footer>

&lt;div class=&quot;price&quot;>

<P> <strong> $ 45 </ strong> </ p>

&lt;p>&lt;a class=&quot;button&quot; href=&quot;#&quot;>Buy Now&lt;/a>&lt;/p>
&lt;/div>

</ Footer>

Lukk kolonne ved å legge til "</ article>" tag etter "</ bunntekst>".

6 Kopier hele artikkelen seksjon, som begynner med "<artikkelen>", og lim under "</ article>" for å opprette flere kolonner. Oddetall fungerer best hvis du planlegger å understreke en bestemt kolonne. Når du har lagt inn ønsket antall, legge til de avsluttende kodene for diagrammet DIV, kroppen, og dokumentet:

</ Div>
</ Body>
</ Html>

7 Lag stiler for de grunnleggende elementer som koblinger, overskriftskodene, avsnitt og knappen din, hvis de brukes. Test din HTML-dokumentet i nettleseren din gjennom hele prosessen for å se effekten av stil valg og finjustere etter behov. Legg stiler for diagrammet begynner med "diagram" -klassen. Denne klassen vil påvirke alt under den, så dette er et passende sted å definere skrifttyper, farger, og den totale bredden av tabellen. Følgende eksempel foruts kartet vil bli plassert på en full bredde side:

diagram

{
font-family: Arial, sans-serif;
font-size: 12px;
color: # 333333;
bredde: 960 x;
padding: 40px 0; // Mellomrommet mellom diagrammet innhold og sideinnholdet området grensen.
margin: 0 auto; // Centers diagrammet på siden.
klar: begge; // Gjør at diagrammet er på en egen linje hvis det er andre divs som kom før det på siden.
}

8 Lag en stil for artikkelen din, eller chart kolonner. For å komme hver kolonne for å sitte ved siden av hverandre, må du bruke "flyte. Venstre" Resten av stilen er opp til deg. I følgende eksempel, vil hver artikkel gis samme standard bakgrunnsfarge og en ramme.

diagram artikkel

{
float: left;
margin: 0;
background-color: # ffffff;
border: 1px solid # e5e5e5;
}

9 Gjenta denne prosessen for å legge til stiler for header, bunntekst og delen. Overskriften stil må minst definere en høyde og plassering av "slektning". Bunnteksten må definere en "min-height" og tekstjustering av "center". For å distribuere kolonne innhold jevnt over diagrammet, ikke definere bredder. For eksempel:

diagram header

{
min-height: 101px;
position: relative;
bakgrunn: # 373737 URL ( "../ images / headerbg.jpg") 0 0 repeat-x;
border-bottom: 1px solid # 363636;
}

diagram footer

{
border-top: solide 1 piksler # f5f5f5;
border-left: 1px solid # B0B0B0 \ 9;
min-height: 70 piksler;
text-align: center;
bakgrunn: # c4c4c4 URL ( "../ images / footerbg.jpg") 0 0 repeat-x;
}

10 Style listen "li" elementer. Disse elementene bør minst ha polstring og en høydeverdi:

diagram ul li

{
padding: 13 piksler 0;
min-height: 24px;
}

11 Etter individuelle stiler, skriv en kombinert klasse for å definere stiler som deles av alle containerelementer. Den viktigste verdien er "display: block" som gjør at hele elementet for å utføre en handling i stedet for bare teksten inni. For eksempel:

diagram artikkel, diagram delen, diagram header, diagram bunntekst, diagram div, diagram p, diagram ul, diagram .button

{
display: block;
padding: 0;
margin: 0;
list-style: none viktig;
skissere: none;
}

Hint

  • Merk en bestemt tjeneste eller produkt ved å opprette en egen artikkel klasse som bruker drop-skygger, grenser, hover effekter eller fet tekst. Når klassen er brukt på en artikkel tag, vil de tilhørende stiler legge vekt på element som kan påvirke kjøpsbeslutninger.
  • Lag klasser for å vise spesielle ikoner ved å liste elementer der klassen brukes, for eksempel "#chart ul li.star" eller "#chart ul li.checked." Gi hver spesiell klasse et bakgrunnsbilde med en venstrejustering og legge polstring for å holde din tekst fra overlappende.