Hvordan lage en webside passe på skjermen ved hjelp av HTML & lt; hr & gt;

Når du er en designer og koding et nettsted, kan du ønsker for Web-siden til å passe den besøkendes skjerm uavhengig av hans eller hennes datamaskin oppløsning. Du kan oppnå denne effekten ved å bruke en flytende layout, der du angir element bredder i prosenter i stedet for faste forener eksempel piksler. Beholdere som tabeller, divs og avsnitt vil utvide eller redusere, basert på den besøkendes oppløsning, for å møte denne spesifikasjonen.

Bruksanvisning

1 Start en kode editor, slik at Notepad, på datamaskinen. Alternativt kan du trenger for å logge på en online redaktør i nettleseren din.

2 Åpne "File" -menyen og velg "Open". Finn din webside filen og dobbeltklikker på den, hvis du bruker Windows, for å åpne den.

3 Angi bredden for din nåværende elementer, for eksempel tabeller eller divs. For eksempel, hvis hovedelement er en div, kan du angi en 90 prosent bredde:

<Div style = "width: 90%">

Content her

</ Div>

4 Bruk overløp eiendom for å legge scrollbar til eventuelle containere (tabeller, divs, avsnitt) hvis de inneholder bilder, videoer, annonser eller annet innhold som er bredere enn elementet.

<Div style = "width: 90%; overflow: auto">

Content her

</ Div>

5 Klikk på "File" -menyen og velg alternativet for å lagre endringene. Du kan nå vise filen i nettleseren din for å se endringene.

Hint

• Du kan erstatte faste bredder med variable bredder. Det kan være lurt å bruke en prosentandel som er tilnærmet lik den pixel bredde på en oppløsning på 800 x 600 (en vanlig, mindre oppløsning).
• Ved bruk av flere, side-by-side-elementer, vil du ønsker å holde den samlede bredde mindre enn 100 prosent for Web-siden til å passe skjermer til enhver oppløsning.
• Legge marginer, padding og grenser til elementer øker bredden på elementet. Det kan være lurt å redusere bredden for å kompensere for disse stilene.
• Du kan mikse og matche faste og variable bredder. For eksempel kan du sette en bredde på 200 px for en sidebar, hvis det er nødvendig, og angi en variabel bredde for et større element som inneholder en større tekstblokk. Hvis du besøkende bruker 800 x 600 oppløsning, etterlater dette 75 prosent av skjermen for deg å fylle.
• For å hindre utseendet på et rullefelt eller innhold klipping, endre størrelsen på bilder, videoer og annet innhold som kan ha en bredde større enn 800 piksler.
• Blokk-nivå elementer, for eksempel tabeller og divs, viser automatisk ved en bredde på 100 prosent (skjermstørrelse).