"Dekoratyvūs" išdėstymai atveria naujus dizaino sienas
Yra daugybė priežasčių nenaudoti išdėstymo lentelių . Viena iš dažniausiai pasitaikančių priežasčių, kodėl žmonės jas toliau naudoja, yra tai, kad sunku padaryti maketą su CSS. Nors CSS scenarijus apima mokymosi kreivę, kai jūs suprantate, kaip padaryti CSS išdėstymą, galite būti nustebinti, kaip tai lengva. Kai tik jūs išmoksite, turėsite atsakyti į antrą dažniausiai pasitaikančią priežastį, kodėl žmonės nesinaudoja CSS: "Greičiau rašyti stalus". Tai greičiau, nes žinote lenteles, bet kai tik jūs išmoksite CSS, galite būti tokia pat greita su tuo.
Naršyklės palaikymas CSS padėties nustatymui
CSS pozicionavimas yra gerai palaikomas visose šiuolaikinėse naršyklėse . Jei nesudarysite "Netscape 4" ar "Internet Explorer 4" svetainės, skaitytojai neturėtų susidurti su jūsų CSS pozicionuotų tinklalapių peržiūra.
Perspektyva, kaip kuriate puslapį
Kai kuriate svetainę naudodamiesi lentelėmis, turite galvoti apie tai lentelės formatu. Kitaip tariant, tu galvoji apie ląsteles, eilutes ir stulpelius. Jūsų interneto puslapiai atspindi šį požiūrį. Kai persikeliate į CSS pozicionavimo dizainą, pradėsite galvoti apie savo puslapius turinio atžvilgiu, nes turinys gali būti dedamas bet kurioje vietoje, kuriame norite išdėstyti, netgi sluoksniuotą ant kito turinio.
Skirtingos svetainės turi skirtingas struktūras. Kad sukurtumėte veiksmingą puslapį, prieš nustatydami turinį jį įvertinkite bet kurio puslapio struktūrą. Pavyzdiniame puslapyje gali būti penki skirtingi skyriai:
- Antraštė . Pagrindinis skelbimo reklama, svetainės pavadinimas, naršymo nuorodos, straipsnio pavadinimas ir dar keletas kitų dalykų.
- Dešinysis stulpelis . Tai yra dešinė puslapio pusė su paieškos laukeliu, skelbimais, vaizdo įrašų dėžėmis ir prekybos vietomis.
- Turinys . Straipsnio tekstas, tinklaraščio įrašas ar krepšelis - puslapio mėsa ir bulvės.
- Inline skelbimai . Skelbimai įterpiami į turinį.
- Poraštė . Apatinė navigacija, autoriaus informacija, autorių teisių informacija, apatiniai reklaminiai skelbimai ir susijusios nuorodos.
Užuot išleisdami tuos penkis elementus lentelėje, naudokite HTML5 skyrimo elementus, kad apibrėžtumėte skirtingas turinio dalis, o tada naudokite CSS padėtį, kad turinio elementai būtų įtraukti į puslapį.
Jūsų turinio sekų identifikavimas
Nustačius skirtingus svetainės turinio sričius, turite juos įrašyti į HTML. Nors paprastai galite padalyti savo skiltis bet kokia tvarka, pirmiausia reikia įdėti svarbiausias jūsų puslapio dalis. Šis metodas taip pat padės optimizuoti paieškos variklius.
Norėdami parodyti poziciją, įsivaizduokite puslapį su trimis stulpeliais, bet ne antraštę arba poraštę. Galite naudoti poziciją, kad galėtumėte kurti bet kokio tipo maketą.
Trijų skilčių išdėstymui nustatyti trys skyriai: kairysis stulpelis, dešinysis stulpelis ir turinys.
Šie skyriai bus parodyti, naudojant elementą ARTICLE turinį ir du SKAIČIAI abiejuose stulpeliuose. Viskas taip pat turės savybę identifikuoti. Kai naudojate id atributą, turite priskirti unikalų kiekvieno ID vardą.
Turinio padėtis
Naudodamiesi CSS, nustatykite savo ID ID elementus. Laikykite savo pozicijos informaciją stiliaus skambučiu tokiu būdu:
#turinys {
}
Turinys šiuose elementuose užims tiek pat vietos, kiek gali, ty 100 procentų dabartinės vietos ar puslapio pločio. Jei norite paveikti skyrių vietą, nepajudindami jos į fiksuotą plotį, pakeiskite polinkį arba maržos savybes.
Šiam išdėstymui nustatykite du stulpelius į fiksuotą plotį ir nustatykite jų poziciją absoliučiai, kad jie nebūtų paveikti to, kur jie randami HTML.
# left-column {
pozicija: absoliutus;
kairėje: 0;
plotis: 150 pikselių;
kairė pusė: 10 px;
"margin-top": 20 px;
spalva: # 000000;
padding: 3px;
}
# dešinysis stulpelis {
pozicija: absoliutus;
kairėje: 80%;
viršus: 20 px;
plotis: 140px;
padding-left: 10px;
z indeksas: 3;
spalva: # 000000;
padding: 3px;
}
Tada turinio srityje nustatykite paraštę dešinėje ir kairėje, kad turinys nebūtų persidengęs dviejų išorinių stulpelių.
#turinys {
viršuje: 0 px;
marža: 0px 25% 0 165px;
padding: 3px;
spalva: # 000000;
}
Nustatydamas savo puslapį naudodamas CSS, o ne HTML lentelę, reikia šiek tiek daugiau techninių įgūdžių, tačiau atsipirkimas priklauso nuo lankstesnių ir labiau reaguojančių dizainų ir lengviau atlikti struktūrinius pataisymus į jūsų puslapį vėliau.