Hvordan bruke CSS for horisontal navigasjonsbakgrunnsbilde fast høyde

Web-sider, som papirdokumenter i de fleste vestlige kulturer, er tradisjonelt orientert vertikalt: innhold som ikke får plass på siden strekker seg nedover. Cascading Style Sheet (CSS) kode, men er ganske allsidig, og du kan tvinge overkant innholdet på siden din for å utvide til høyre i stedet. Undertrykk loddrette rullefeltet ved hjelp av "overflow-y" eiendom og bruke "white-space" eiendom for å hindre innhold fra rennende nedover. Monter et bakgrunnsbilde til høyden av nettleservinduet for å fullføre horisontal nettsted mal.

Bruksanvisning

1 Legg til følgende kode mellom "hodet" kodene i HTML-dokumentet:

<Style type = "text / css">

kropp{

flow-y: hidden;

white-space: NOWRAP;

}

</ Style>

2 Skriv et avsnitt lang nok til å utvide forbi den høyre kanten av siden din i kroppen av HTML-dokumentet. Lagre siden, og legg den i en nettleser. Legg merke til at innholdet ikke brytes, men strekker seg horisontalt så mye som nødvendig.

3 Partisjonere horisontal plass ved hjelp av spennelementer med sine "display" eiendommen er satt til "inline-block". For eksempel legge til følgende klassen definisjonen til CSS-koden i "head" -seksjonen:

.skillevegg{

width: 500px;

display: inline-block;

vertical-align: top;

white-space: normal;

}

Bredden av horisontale partisjoner må angis manuelt fordi nettleseren kanten ikke lenger fører til innpakning. Den "white-space" eiendommen ville være arvet fra kroppen som standard, så det er overstyres for å bryte tekst og innhold i hver partisjon. Legg "span" elementer som er tildelt "partisjon" klasse til kroppen av dokumentet, plassere innholdet som skal grupperes sammen i hver. Husk at hvis en "partisjon" span inneholder mer innhold enn det er plass i den, vil at innholdet forlenge av bunnen av vinduet og være utilgjengelig.

4 Legg til følgende linjer til "kroppen" blokk i CSS-kode, bytter ut "background.jpg" med filnavnet på bildet for å legge til et bakgrunnsbilde som er dimensjonert til høyden på nettleservinduet:

background-image: URL ( 'background.jpg');

background-size: inneholde;

Hint

  • Legg til følgende kode til toppen av HTML-dokumentet for å sikre kompatibilitet med Internet Explorer:
  • <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">