Hvordan lage en DIV utforminger Overlay
Den lokke av DIV elementer i nettstedet oppsett er i deres fleksibilitet. Fordi divs kan plasseres helt på en side ved hjelp av CSS, kan du angi en rekke overlappende elementer eller stable elementer oppå den andre for å skape interessante visuelle effekter. Ved hjelp av CSS og divs, kan du stable, posisjon og selv endre gjennomsiktigheten divs på siden din med minimalt stress. Mens de enkelte detaljene stillinger avhenger helt av din layout, det grunnleggende overlappende og posisjons DIV lag er universelle.
Bruksanvisning
1 Lag en ID for nederste DIV i nettsidens stylesheet, altså "# div1 {}." Hvis du ikke har et stilark opprettet for siden din, starte ark med:
<Style type = "text / css">
<! -
Tast inn ID-en for første DIV, og ender arket med "-> </ style>" før "</ head>" tag. All CSS vil gå mellom "<! -" Og "->".
2 Angi posisjonen og formen for bunn DIV mellom "{}" parentes. Hvis du setter posisjonen i hjørnet på siden for en 50-by-50-pixel lag, for eksempel, ser CSS slik ut:
div1 {
position: absolute;
top: 0px;
venstre: 0px;
bredde: 50 piksler;
høyde: 50 piksler;}
3 Opprett en ny ID for din neste DIV element, eller "# DIV2 {}", og angi størrelse og posisjon for dette elementet også. Hvis du ønsker å fullstendig overlapper det første elementet, angi posisjonen til å være akkurat det samme. Hvis du vil at det skal bli motvirket av 10 piksler fra øverste venstre hjørne, ser CSS slik ut:
DIV2 {
position: absolute;
top: 10px;
venstre: 10px;
bredde: 50 piksler;
høyde: 50 piksler;}
4 Gjenta dette for så mange overlappende lag som du ønsker. Når lagene er ferdig, legge til "z-index" element for å fortelle leseren som laget er på bunnen, og som er på toppen. Bunnlaget bør være "z-index: 1;" med det øverste laget som har det høyeste nummer. Hvis du har to lag og det andre laget er på topp, er det z-index "z-index: 2;".
5 Legg gjennomsiktigheten DIV, hvis du vil, ved å legge til "opacity: 0.5; filter: alpha (opacity = 50);" til CSS for DIV du ønsker å være gjennomsiktig. For eksempel, hvis den andre og øverste DIV er satt til 50 prosent gjennomsiktig, ser CSS som dette:
DIV2 {
position: absolute;
top: 10px;
venstre: 10px;
bredde: 50 piksler;
høyde: 50 piksler;
z-index: 2;
opacity: 0.5;
filter: alpha (opacity = 50);}
Den "opacity" tag fungerer i de fleste nettlesere; den "filter" tag er inkludert for Internet Explorer, som ikke anerkjenner "opacity." Jo lavere din åpenhet tall, jo mindre synlig ditt element.
6 Opprett DIV element på kroppen din side. Din første DIV starter med "<div id =" div1 ">" etterfulgt av innholdet i laget. Når elementet er ferdig, ender det med "</ div>." Gjenta dette for alle lagene som er angitt i stilarket. Lagre siden din, så sjekk at elementene er plassert og lagvis riktig i nettleseren av valget.
Hint
- Selv om du kan bruke "style =" "" element innenfor DIV tag å endre styling av din lag, skaper dette rotete kode, og er vanskeligere å følge når du redigerer siden din eller leter etter feil i koden.