Hvordan lage en Tableless CSS Website Template
HTML-tabeller gir nettstedet utviklere med en måte å formatere nettstedet layout. Tabeller er vanskelig å håndtere, så \ "tableless \" oppsett har erstattet gamle HTML programmering stiler. Tableless CSS layouts involverer erstatte hvert bord rad og kolonne med en \ "div \" tag. Divs er elementer som skaper en gjennomførbar plass i en nettside. For eksempel kan en div inneholde et avsnitt av informasjon i midten av en side. Opprette en tableless format krever en div layout som erstatter en tabell egenskaper.
Bruksanvisning
1 Lag dine viktigste div koder som definerer layout. I dette eksemplet er et nettsted mal opprettet med en topp div som inneholder navigasjon og firmalogo, en bunntekst og en venstre sidebar. Følgende kode oppretter tableless div struktur:
<Body>
<div id=\"header\"> </div>
<div id=\"sidebar\"> </div>
<div id=\"main\"> </div>
<div id=\"footer\"> </div>
</ Body>
2 Lag overskriften CSS stil. CSS-stiler plassere div koder i brukerens nettleser. Følgende CSS-klasse er plassert i hodet kodene i HTML-mal:
header {
position: fixed
GÅ
width: 100%
GÅ
height: 15%
GÅ
top: 0
GÅ
right: 0
GÅ
bottom: auto
GÅ
left: 0
GÅ
}
Den \ "# \" prefikset indikerer at klassen matcher ID av div. Dette betyr at du ikke trenger å spesifisere klasse for div, og det brukes automatisk når siden lastes.
3 Plasser div sidepanelet til venstre i nettleservinduet. Den venstre div sidebar brukes til navigasjon eller informasjon for brukerne. Følgende CSS-klasse posisjonerer sidefeltet div:
sidebar {
position:fixed
GÅ
width:11em
GÅ
height:auto
GÅ
top:15%
GÅ
right:auto
GÅ
bottom:100px
GÅ
left:0
GÅ
}
Du kan også plassere denne div på høyre side av nettleseren ved å endre verdiene for \ "riktige \" og \ "igjen. \" \ "Venstre \" er satt til 0, så det er plassert helt til venstre. Endre denne verdien til \ "auto \" og endre \ "riktige \" verdien til 0 trekk div til høyre.
4 Angi posisjonen for hoved div innhold. Dette div brukes til hovedinnholdet eksempel produktlister eller blogg tekst. Det er der nettsiden eieren legger hoved \ "kjøtt \" på nettsiden. Følgende kode plasserer hoved div:
hoved~~POS=TRUNC {
position:fixed
GÅ
width:auto
GÅ
height:auto
GÅ
top:15%
GÅ
right:0
GÅ
bottom:100px
GÅ
left: 10em
GÅ
}
5 Plasser bunnteksten nederst på siden. Bunnteksten er ofte brukt for opphavsrett og linker til et områdekart. Følgende kode legger footer div:
footer {
position:fixed
GÅ
width:100%
GÅ
height:100px
GÅ
top:auto
GÅ
right:0
GÅ
bottom:0
GÅ
left:0
GÅ
}