Layout Tableless Louvri New Frontiers Design
Gen anpil rezon pa sèvi ak tab pou layout . Youn nan rezon ki pi souvan moun bay pou kontinye sèvi ak yo se paske li difisil yo fè Layout ak CSS. Malgre ke CSS scripting egzije yon koub aprantisaj, lè ou konprann ki jan fè CSS Layout, ou ta ka etone nan ki jan fasil li kapab. Ak yon fwa ou aprann, ou pral gen adrese dezyèm rezon ki pi komen moun ki bay pou pa itilize CSS- "Li pi vit yo ekri tab." Li pi vit paske ou konnen tab, men yon fwa ou aprann CSS, ou ta ka jis kòm rapid ak sa.
Navigatè Sipò pou CSS Pozisyon
Pozisyon CSS byen sipòte nan tout navigatè modèn . Sòf si ou ap bati yon sit pou Netscape 4 oswa Internet Explorer 4, lektè ou yo pa ta dwe gen nenpòt pwoblèm pou wè paj wèb CSS ou yo.
Reprann fason ou bati yon paj
Lè ou bati yon sit lè l sèvi avèk tab, ou gen panse nan yon fòma tabulaire . Nan lòt mo, w ap panse an tèm de selil ak ranje ak kolòn. Paj wèb ou yo ap reflete apwòch sa a. Lè ou deplase nan yon konsepsyon pwezante CSS, ou pral kòmanse panse nan paj ou an tèm de kontni an, paske ka kontni an dwe mete nenpòt kote ou ta renmen nan layout a-menm kouch sou tèt lòt kontni.
Sou sit entènèt diferan gen estrikti diferan. Pou konstwi yon paj ki efikas, evalye estrikti a nan nenpòt ki bay paj anvan ou bay kontni nan li. Yon paj egzanp ta ka gen ladan senk seksyon diferan:
- Header . Kay nan reklam nan banyè, non an sit, lyen navigasyon, yon tit atik ak kòm byen ke kèk lòt bagay.
- Dwat kolòn . Sa a se bò dwat nan paj la ak bwat rechèch la, anons, videyo bwat, ak zòn fè makèt.
- Kontni . Tèks la nan yon atik, pòs blog oswa shopping cart-vyann-ak-pòmdetè yo nan paj la.
- Inline anons . Piblisite yo aliye nan kontni an.
- Footer . Navigasyon anba a, enfòmasyon otè, enfòmasyon copyright, Ajoute banyè pi ba, ak lyen ki gen rapò.
Olye ke mete sa yo senk eleman nan yon tab, sèvi ak HTML5 seksyon eleman yo defini pòsyon yo diferan nan kontni an, ak Lè sa a, sèvi ak CSS pwezante nan plas eleman yo kontni sou paj la.
Idantifye seksyon kontni ou yo
Apre ou te defini zòn kontni diferan nan sit ou, ou bezwen ekri yo nan HTML ou. Pandan ke ou ka, jeneralman, mete seksyon ou nan nenpòt lòd, li nan yon bon lide yo mete pati ki pi enpòtan nan paj ou an premye. Apwòch sa a pral ede avèk optimize rechèch motè, osi byen.
Pou montre pwezante, anvizaje yon paj ki gen twa kolòn men pa gen okenn header oswa pye. Ou ka sèvi ak pwezante pou kreye nenpòt tip Layout ou renmen.
Pou yon Layout twa-kolòn, defini twa seksyon: kolòn kite, kolòn dwa, ak kontni.
Seksyon sa yo pral enstisyone lè l sèvi avèk eleman ARTIK a pou kontni an ak de eleman SEKSYON pou de kolòn yo. Tout bagay pral gen tou yon atribi ki idantifye li. Lè ou itilize atribi id, ou dwe bay yon non inik pou chak id.
Pozisyon Content la
Sèvi ak CSS, defini pozisyon pou eleman ID'd ou yo. Sere enfòmasyon sou pozisyon ou nan yon apèl style tankou sa a:
#content {
}}
Kontni nan eleman sa yo pral pran anpil espas kòm li kapab, sètadi 100 pousan nan lajè kote aktyèl la oswa paj la. Pou afekte kote yon seksyon san fòse li nan yon lajè fiks, chanje padding la oswa pwopriyete yo Marge.
Pou sa a Layout, mete de kolòn yo nan lajè fiks ak Lè sa a, mete pozisyon yo absoli, se konsa ke yo pa ta dwe afekte pa kote yo jwenn nan HTML la.
# kite-kolòn {
pozisyon: absoli;
kite: 0;
lajè: 150px;
Marge-bò gòch: 10px;
Marge tèt: 20px;
koulè: # 000000;
padding: 3px;
}}
# dwa-kolòn {
pozisyon: absoli;
kite: 80%;
tèt: 20px;
lajè: 140px;
padding-bò gòch: 10px;
z-endèks: 3;
koulè: # 000000;
padding: 3px;
}}
Lè sa a, pou zòn nan kontni, mete marges yo sou bò dwat la ak bò gòch pou ke kontni an pa ta sipèpoze de de kolòn yo deyò.
#content {
tèt: 0px;
Marge: 0px 25% 0 165px;
padding: 3px;
koulè: # 000000;
}}
Defini paj ou a lè l sèvi avèk CSS olye pou yo yon tablo HTML mande pou yon ti jan plis teknik konpetans, men paye a swiv soti nan desen plis fleksib ak reponn ak fasilite pi gwo nan fè ajisteman estriktirèl nan paj ou pita.