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">