Hvordan lage barer med CSS

May 24

Cascading Style Sheets (CSS) er en ideell måte å skape elementer, slik som barer, for websidene dine fordi du ikke trenger å ha bilder for å lage disse komponentene og CSS gir deg mer kontroll over hvordan disse funksjonene ser på siden din. Ved hjelp av CSS i allianse med Hypertext Markup Language (HTML) kode, kan du opprette barer på nettstedet ditt for bruk som dekorative skillevegger, diagramelementer eller noen annen type side funksjon som kan bruke dem.

Bruksanvisning

1 Start din tekst editor og åpne en nettside.

2 Finn "<head> </ head>" i HTML-koden og skriver CSS posten mellom disse elementene som følger:

3 Skriv inn en "time" før klammeparenteser for å lage en plassholder for horisontal linje på siden din (for eksempel "hr {}"). Den "hr" element oppretter automatisk en linje i koden din, og ved hjelp av CSS, du stil denne koden inn i baren som du trenger.

4 Skriv inn "background-color", "height" og "width" verdier for å finne ut hvordan baren ser ut. For å gjøre en loddrett strek, skriv inn et større antall etter "høyde" attributt i prosent (%), punkter (PT) eller piksler (PX); ellers, skriver i et større antall etter "width" entry. For eksempel, for å skape en horisontal bar som er 20 piksler høyt og 200 piksler bred, skriver du inn følgende:

hr {background-color: blue; height: 20px; width: 200px; }

5 Skriv inn et "flyte" descriptor og skriv inn en "venstre" eller "riktig" verdi for å finne ut hvor din CSS bar vises på siden. For eksempel:

hr {float: left; background-color: blue; height: 20px; width: 200px; }

6 Bruk nettleseren for å forhåndsvise filen, og deretter lagre siden når du er ferdig.