Hvordan lage en div Scroll
Webutviklere kan bruke HTML og CSS (Cascading Style Sheets) kode for å bestemme innholdet og utseendet på websider. Begge typer koden kan også diktere aspekter av brukerinteraksjon med en side. For å gjøre en div element kan bla i en side kan du bruke CSS overløp eiendom. Making elementer scroll er vanligvis ikke vanskelig, og krever bare noen få enkle linjer med kode. Du kan lage et HTML-element kan bla både horisontalt og vertikalt.
Bruksanvisning
1 Lag din HTML-side. Bruk følgende eksempel markup kode, definerer omrisset av en webside:
<Html>
<Head>
</ Head>
<Body>
</ Body>
</ Html>
Åpne en ny fil i en tekst editor og kopiere denne koden inn i det, lagre den med .html filtypen. Hvis du allerede har en webside med en div i det, kan du bruke dette i stedet for å lage en ny.
2 Lag en seksjon på siden din for CSS-koden. Du kan bruke en kobling til CSS-kode fra en egen CSS-fil på siden din <head> delen, eller kan inkludere koden i <head> -delen direkte. For å gjøre dette, legger du til følgende avsnitt mellom åpning og lukking <head> taggene i HTML-siden:
<Style type = "text / css">
/
CSS-kode /
</ Style>
Plasser CSS-kode mellom disse stil koder.
3 Legg en div element til siden din. Sett følgende eksempel markup koden mellom åpning og lukking <body> tags:
<Div id = "innhold"> <p> Her er noe av innholdet i et avsnitt, som er inne i et element. </ P> </ div>
Denne enkle element har en id-attributt så CSS-koden kan identifisere den på siden som helhet. Du kan ta med alt innhold du liker innenfor div element, inkludert tekst, bilder og andre medier.
4 Legg CSS-regler for ditt element. Innenfor stilen delen av siden din, sette inn følgende kode som identifiserer div element og bruke visse stil regler til det:
innhold{
height: 100px;
width: 100px;
overløp: bla;
}
Denne koden angir en fast bredde og høyde for elementet, samt å instruere leseren til å rulle innhold renner over dette området. For at du skal bruke rulle eiendom, må du elementene har bestemte dimensjoner, som bla eiendom forteller leseren hva de skal gjøre med innholdet hvis det ikke passer inn i det avsatt plass for et element.
5 Lagre HTML-fil og åpne den i en nettleser. Du bør se enten en eller to rullefeltene rundt div element. Eksperimentere med koden din ved å endre dimensjonene, og samtidig la overløp eiendom for å bla. Rullefeltene vil oppføre seg forskjellig avhengig av elementets dimensjoner og på hvor mye innhold som er inni den.
Hint
- Prøv å bruke andre verdier for rulle eiendom, for eksempel skjult, for å se de forskjellige mulighetene.
- Noen nettlesere kan ikke gjennomføre bla eiendom korrekt, spesielt nettlesere kjører på mobile enheter.