CSS išdėstymas reikalauja, kad jūs manote apie savo svetainės išdėstymą kaip visumą, tada paimkite gabalus ir sudėkite juos kartu. Sužinokite, kaip sukurti paprastą 3 stulpelių išdėstymą su CSS.
01 iš 09Parengti savo išdėstymą
Galite piešti maketą popieriuje arba grafikos programoje. Jei jau turite kietąjį karkasą ar netgi dar platesnį dizainą, supaprastinkite jį su pagrindinėmis svetainės sudedamosiomis kortomis. Šiam projektui pridedamas trys stulpeliai pagrindiniame turinio srityje, taip pat antraštė ir poraštė. Jei atidžiai žiūrėsite, pamatysite, kad trys stulpeliai nėra vienodo pločio.
Kai išrinksite išdėstymą, galite pradėti galvoti apie matmenis. Šiame pavyzdyje dizainas turi šiuos pagrindinius aspektus:
- Ne daugiau kaip 900 pikselių pločio
- 20 pikselių latakai kairėje
- 10 px tarp stulpelių ir eilučių
- Stulpeliai, kurių plotis yra 250 piks., 300 piks. Ir 300 piks
- Viršutinė eilutė yra 150 piks. Aukščio
- Apatinė eilutė yra 100 piks. Aukščio
Parašykite pagrindinį HTML / CSS ir sukurkite konteinerio elementą
Kadangi šis puslapis bus galiojantis HTML dokumentas, Pradėti naudokite tuščią HTML konteinerį
Pridėkite pagrindinių CSS stilių, kad nulaučiau puslapio paraštes, sieneles ir dangčius. Nors yra ir kitų standartinių CSS stilių, skirtų naujiems dokumentams, šie stiliai yra minimalūs, norint gauti švarų išdėstymą. Pridėkite juos prie savo dokumento galvos:
Norėdami pradėti kurti maketą, įdėkite konteinerio elementą. Kartais atsitinka, kad vėliau galėsite atsikratyti konteinerio, tačiau daugumai fiksuoto pločio išdėstymų konteinerio elementas yra lengviau valdomas skirtingose interneto naršyklėse. Taigi, kūnas įdėti šią: Ir CSS stiliaus lape įdėti: Talpykla apibrėžia, kaip bus platus tinklalapio turinys, taip pat visos išorinės pusės ir užpildas viduje. Šiame dokumente talpa yra 870 piks. Pločio, o kairėje - 20 pikselių latakai. Vandenėlė yra nustatoma pagal maržos stilių, tačiau talpyklos užpildas yra nuliuojamas, kad bet kokie elementai nebūtų tokie dideli, kaip konteineris. #container { plotis: 870px; marža: 0 0 0 20 px; / * viršutinė dešinė apatinė kairė * / padding: 0; } Jei dabar išsaugosite dokumentą, konteineris bus sunkiai matomas, nes jame nieko nėra. Jei pridėsite rezervuaro tekstą, galėsite aiškiau matyti konteinerio elementą. Kaip jūs nusprendėte kurti antraštės eilutę, labai priklauso nuo to, kas jame yra. Jei antraštės eilutėje bus tik logotipo grafika ir antraštė, tada naudokite antraštės žymę ( Antraštės eilutės HTML eina konteinerio viršuje ir atrodo taip: Tada, norėdami nustatyti stilius, apačioje buvo pridėta raudona rėmelis, kad galėtumėte pamatyti, kur jis baigiasi, maržos ir užpildai buvo nuliuojami, plotis buvo nustatytas 100%, o aukštis iki 150 pikselių: #container h1 { marža: 0; padding: 0; plotis: 100%; aukštis: 150 pikselių; plūdė: kairė; border-bottom: # c00 solid 3px; } Nepamirškite plaukioti šio elemento su plūdiniu: kairėn; nuosavybė. CSS maketų rašymo raktas - viską plasti - net tokius pačius pločius kaip konteineris. Tokiu būdu jūs visada žinote, kur elementai bus ant puslapio. CSS palikuonių parinkiklis pritaikė stilius tik H1 elementams, esantiems #container elemento viduje. Kai sukursite trys stulpelius su CSS, turite suskirstyti savo išdėstymą į dvi grupes. Taigi šis trijų skilčių išdėstymas - vidurinis ir dešinysis stulpeliai ir sugrupuotas ir dedamas šalia kairiojo stulpelio į dviejų skilčių išdėstymą, kuriame kairysis stulpelis yra 250 piks. Pločio, o dešinysis stulpelis yra 610 piks. Pločio (kiekviena iš dviejų stulpelių yra 300 , plius 10px tarp latakų). HTML atrodo taip: Ut aliquip ex ea commodo consequat. Velit esse cillum dolore ut enim ad minim veniam, lorem ipsum dolor sit agent. Reprehenderit in volustete quis nostrud exercice eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex ea commodo consequat. Visai nesvarbu, ar jūs einate, ar ne? Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Stulpelių vietoje žymiklio tekstas leidžia juos matyti bandant. CSS atrodo taip: #container # col1 { plotis: 250 pikselių; plūdė: kairė; } #container # col2outer { plotis: 610px; plūduras: teisė; marža: 0; padding: 0; } Kairėje esanti stulpelis yra plūduriuojama į kairę, o kita - į dešinę. Kadangi bendras abiejų stulpelių plotis yra 860 pikselių, tarp jų yra 10 pikselių latakai. Norėdami sukurti tris stulpelius, pridėkite du dives platesnio antro stulpelio viduje, lygiai taip pat, kaip pridėjote 2 tarpus paskutiniame žingsnyje konteinerio stulpelyje. HTML atrodo taip: Visai nesvarbu, ar jūs einate, ar ne? Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Nam libero tempore, quia voluptas sit aspernatur dicta sunt explicabo.Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerumas yra tikroji, depektacinė, šiuolaikiška ir ilgaamžė. CSS atrodo taip: # col2outer # col2mid { plotis: 300 pikselių; plūdė: kairė; } # col2outer # col2side { plotis: 300 pikselių; plūduras: teisė; } Kadangi šios dvi 300 piks. Pločio dėžutės yra 610 piks. Pločio dėžutės viduje, tarp jų vėl bus 10 pikselių latakai. Dabar, kai likusi dalis puslapio yra stiliaus, galite pridėti poraštę. Naudokite paskutinį div su "footer" id ir pridėkite turinį, kad galėtumėte jį pamatyti. Viršuje taip pat galite pridėti sieną, taigi jūs sužinosite, kur ji prasideda. HTML: CSS: #container #footer {
plūdė: kairė;
plotis: 870px;
border-top: # c00 solid 3px;
} 08 iš 09 Dabar, kai baigiate išdėstymą, galite pradėti pridėti savo asmeninius stilius ir turinį. Atminkite, kad antraštėje ir poraštėje esančios sienos buvo pridėtos, kad būtų rodomi maketavimo skyriai, o ne konkrečiai dizainui. Čia yra visas dokumentas, HTML ir CSS: Ut aliquip ex ea commodo consequat. Ut enim ad minim veniam. Nam libero tempore. Stiliaus konteineris
Naudokite Antraštės antraštės antraštę
) yra daugiau prasmės nei naudojant
Mano antraštė eilutė
Norėdami gauti tris stulpelius, pradėkite kurdami du stulpelius
Įtraukite du stulpelius į plačią antrąją skiltį
Pridėti į apačią
Pridėti savo asmeninius stilius ir turinį
Galutinis HTML / CSS
Mano antraštė eilutė
