Sådan oprettes webskærme med CSS

Cascading Style Sheets giver webdesignere kontrol over udseendet af hver side på deres websted. Du kan gemme udviklingstid på din virksomhed eller kundens projekt ved at bruge en enkelt ekstern CSS-fil til at formatere hver side på et websted. Flere CSS-filer kan give et unikt udseende til hver side eller gruppe af sider. Hemmeligheden med CSS layout er at definere diskrete sideelementer inde i HTML-koden og tildele deres displayegenskaber og positioner i CSS-filen.

HTML

1.

Opret en HTML-fil. Placer et link til CSS-filen inde i sektionen med sætningen:

Denne tag fortæller en browser, hvor du kan finde formateringsinstruktioner til denne side.

2.

Definer et div element med et id "main" umiddelbart efter åbningstaggen:

Dette skaber en beholder, som kan bruges til at kontrollere de generelle egenskaber ved siden. Placer lukkekoden for dette div-element umiddelbart over sidens lukkekroppenhed.

3.

Åbn en ny div tag med id "header" direkte under "main" posten:

Indhold går her

Luk hver div-element, undtagen "main" -beholderen, i slutningen af ​​sektionens indhold.

4.

Brug den samme metode til at oprette tre ekstra div-tags og tildele dem ids af "information1", "information2" og "foot".

CSS

1.

Opret en fil med navnet "my_style.css" inde i samme mappe som den forrige HTML-fil.

2.

Definer sidens samlede bredde og baggrundsfarve ved at henvise til "main" div-taggen:

main {

bredde: 960px; baggrundsfarve: blå; }

Brug tegnet "#" til at henvise til et enkelt element ved dets id.

3.

Angiv skærmegenskaberne for overskrifts- og informationssektionerne ved at tilføje disse linjer:

header{

baggrundsfarve: hvid; tekst-align: center; }

information1 {

baggrundsfarve: grå; bredde: 480px; højde: 200px; flyde: venstre; }

informationer2 {

baggrundsfarve: grøn; bredde: 480px; højde: 200px; flyde: venstre; }

Flyde begge informationssektioner til venstre og tildele dem samme højde for at oprette en to-kolonne visning.

4.

Placer "fod" beholderen nederst på siden med linjerne:

fod{

baggrundsfarve: sort; farve: hvid; klare: begge; }

Brug "clear: both" egenskaben til at placere footer under de to flydende kolonner.

Tip

  • Brug unikke baggrundsfarver til hvert afsnit, mens du designer din CSS-fil for at få et hurtigt overblik over dit layout, inden du tilføjer indhold. Den bedste måde at blive komfortabel på med CSS-design er at eksperimentere med de tilgængelige egenskaber for hvert element. Dette eksempel benytter kun nogle få af de mange mulige formateringsmuligheder, der er tilgængelige med CSS.
 

Efterlad Din Kommentar