Hvordan lage en DIV synlig i HTML
Den <div> tag er en av de grunnleggende byggesteinene i hvilken som helst nettside. En div kan betraktes som en beholder, som en boks som holder alt innholdet pent og ryddig, eller en mappe du kan sende visse opplysninger i. Dette gjør at du kan logisk rekkefølge innholdet på nettstedet ditt og plasser den hvor du vil. Når du setter inn en div i HTML-innholdet vil være synlig, men div seg selv vil være usynlig. Å gjøre den synlig krever hjelp av en liten mengde av CSS.
Bruksanvisning
Definere div i HTML
1 Åpne HTML-dokumentet på ditt foretrukne ASCII teksteditor. Bruk Notisblokk hvis du ikke har en tekst editor.
2 Finn elementene du ønsker å pakke i en div. Dette kan være tekst eller et bilde. Den raskeste måten å finne konkrete innhold er å gjøre et søk ved hjelp av "Ctrl + F."
3 Sett inn en div inn koden ved hjelp av åpningen tag <div> og den avsluttende koden </ div>. Din koden skal se slik ut:
<Div>
Innholdet ditt her
</ Div>
4 Gi div en id. Id kan være noe, men det er best å holde det beskrivende, slik at du kan forstå koden når du kommer til å redigere den. Den id bør se slik ut:
<Div id = "wrapper">
Gjør div synlig i CSS
5 Åpne CSS dokumentet på ditt foretrukne ASCII teksteditor. Bruk Notisblokk hvis du ikke har en tekst editor.
6 Opprett en ny klasse i dette dokumentet ved hjelp av følgende kode:
wrapper {
}
7 Gi div en høyde og bredde ved å gjøre følgende:
wrapper {
height:100px;
width: 100px;
}
8 Gjør div synlig ved å gi det en grense som følger:
wrapper {
border:1px solid black;
}
9 For å sikre div og dens innhold er synlige og ikke arve noen modell fra andre steder, legger du det synlige eiendom, som dette:
wrapper {
visibility: visible
}
Hint
- Du kan skjule div og dens innhold ved hjelp av "visibility: hidden".
- Din div må enten ha innhold eller en bestemt høyde og bredde for å være synlig.
- Sikre dine CSS og HTML-dokumenter er knyttet bruker <link rel = "stylesheet" type = "text / css" href = "styles.css" /> inne i <head> taggene.