Siv CSS los kho cov duab rau sab laug ntawm lub vev xaib Layout
Saib ntawm txhua lub vas sab hnub no thiab koj yuav pom cov ntawv nyeem thiab cov duab ua ke ntawm cov nplooj ntawv. Nws yog heev yooj yim mus ntxiv cov ntawv nyeem thiab cov duab rau ib daim ntawv . Cov ntawv nyeem yog siv cov txheej txheem HTML raws li cov lus teev tseg, cov npe, thiab cov ntawv, thaum cov dluab raug tso siv element .
Lub peev xwm los ua cov ntawv nyeem thiab cov dluab ua haujlwm zoo ua ke yog dab tsi ua kom zoo dua cov neeg ntiav tsim tawm! Koj tsis yog koj xav kom koj cov ntawv thiab cov duab tshwm rau ib qho tom qab, uas yog li cas cov theem ntawm cov theem no yuav tsim teeb tsa ua ntej. Tsis yog, koj xav kom ib co tswj li cas cov ntawv nyeem thiab cov duab ua ke hauv dab tsi yuav kawg yog koj lub website qhov muag pom.
Muaj ib daim duab uas txuas mus rau sab laug ntawm nplooj ntawv thaum cov ntawv nyeem ntawm nplooj ntawv ntawd yog ib qho kev tsim kho rau cov qauv tsim thiab kuj rau cov nplooj ntawv web. Hauv web cov ntsiab lus, cov nyhuv no yog hu ua floating daim duab . Cov style no yog tiav nrog CSS cov cuab yeej rau "float". Cov cuab yeej no tso cai rau cov ntawv nyeem nyob ib ncig ntawm cov duab kos rau nws sab xis. (Los yog nyob ib ncig ntawm ib daim duab uas muaj cai los ua ke rau nws sab laug.) Cia saib seb yuav ua li cas thiaj li ua tau qhov kev pom qhov muag.
Pib nrog HTML
Thawj qhov koj yuav tau ua yog muaj ib co HTML ua haujlwm nrog. Rau peb tus qauv, peb yuav sau ib nqe lus ntawm cov ntawv thiab ntxiv cov duab thaum pib ntawm pawg lus (ua ntej cov ntawv nyeem, tab sis tom qab qhib
lossis). Ntawm no yog qhov HTML markup zoo li:
Yog vim li cas, peb lub webpage yuav tso nrog cov duab saum toj no cov ntawv nyeem. Qhov no yog vim hais tias cov dluab yog block-theem ntsiab lus hauv HTML. Qhov no txhais tau hais tias tus browser qhia txog cov kab so ua ntej thiab tom qab daim duab los ntawm lub neej ua ntej. Peb yuav hloov qhov kev saib no vim yog tig rau CSS. Ua ntej, txawm li cas los xij, peb yuav ntxiv qhov nqi kawm rau peb cov duab duab . Cov chav kawm ntawd yuav ua qhov "sib txuas" uas peb yuav siv tom qab peb CSS.
Nco ntsoov tias hoob kawm "sab laug" tsis muaj dab tsi nyob rau hauv nws tus kheej! Rau peb kom ua tiav peb lub hom phiaj, peb yuav tsum siv CSS tom ntej.
CSS Hom
Nrog peb HTML nyob rau hauv qhov chaw, nrog rau peb tus cwj pwm hauv chav kawm ntawm "sab laug", peb tuaj yeem tig mus rau CSS. Peb yuav ntxiv ib txoj cai rau peb cov qauv ntaub ntawv uas yuav ntab cov duab thiab tseem ntxiv me ntsis padding ntawm nws kom cov ntawv nyeem uas yuav kawg qhwv ib ncig ntawm daim duab tsis lub pob tab tawm tsam nws dhau ze. Nov yog CSS koj yuav sau:
.left {float: left; padding: 0 20px 20px 0; }Cov style no floats tus duab mus rau sab laug thiab ntxiv me ntsis padding (siv ib co CSS shorthand) mus rau sab xis thiab hauv qab ntawm daim duab.
Yog tias koj saib cov nplooj ntawv uas muaj qhov HTML hauv qhov browser, daim duab yuav tam sim no mus rau sab laug thiab cov ntawv ntawm cov pawg yuav tshwm rau nws txoj cai nrog ib qho tsim nyog ntawm kev sib nraus ntawm ob. Ceeb toom cov nqi hauv chav kawm ntawm "sab laug" uas peb siv yog arbitrary. Peb tau hu nws txhua yam vim hais tias lo lus "sab laug" tsis muaj dab tsi nyob ntawm nws tus kheej. Qhov no yuav tsum muaj tus cwj pwm hauv chav kawm ntawv hauv HTML uas ua haujlwm nrog ib qho tseeb CSS style uas hais txog cov kev hloov koj pom uas koj tab tom ua.
Lwm Txoj Kev rau Cov Hau Kev Sib Tw
Qhov kev qhia ntawm qhov muab cov duab ntawm tus cwj pwm hauv chav kawm thiab tom qab ntawd ces siv cov CSS style uas ntab ntawm lub caij no tsuas yog ib txoj kev uas koj yuav ua tiav qhov "duab tshuav cov duab tshuav". Koj kuj tseem tuaj yeem siv cov nqi hauv chav kawm tawm ntawm tus duab thiab ntaus nws nrog CSS los ntawm kev sau ib yam khoom tshwj xeeb. Piv txwv, cia saib ib qho piv txwv uas pom cov duab hauv sab ntawm ib qho kev sib faib nrog cov nqi ntawm cov "ntsiab lus".
Yuav kom tau cov duab no, koj tuaj yeem sau qhov CSS no:
.main-content img {float: left; padding: 0 20px 20px 0; }Hauv no tus sceario, peb cov duab yuav mus raws mus rau sab laug, nrog cov ntawv nyeem floating ncig nws li ua ntej, tab sis peb tsis xav ntxiv ib qho kev kawm ntxiv rau peb cov cim. Ua qhov no hauv nplai yuav pab tsim cov ntawv me me HTML, uas yuav yooj yim rau kev tswj thiab tuaj yeem pab txhim kho kev ua tau zoo.
Thaum kawg, koj yuav txawm ntxiv cov yeej ncaj qha rau koj HTML markup, zoo li no:
Hom no hu ua " inline styles ". Nws tsis yog advisable vim hais tias nws meej meej combines cov style ntawm ib lub caij nrog nws cov qauv kev cim. Cov kev zoo tshaj plaws hauv lub web tshaj tawm hais tias cov qauv thiab cov qauv ntawm nplooj ntawv yuav tsum nyob sib nrug. Qhov no yog qhov tshwj xeeb tshaj yog thaum koj nplooj ntawv xav tau kev hloov nws qhov layout thiab saib xyuas qhov sib txawv ntawm qhov ntau thiab tsawg dua thiab muaj lub website zoo. Muaj qhov style ntawm nplooj ntawv intertwined hauv HTML yuav ua rau nws nyuaj rau tus neeg sau ntawv xov xwm uas yuav kho koj qhov chaw zoo li qhov xav tau ntawm cov ntxig ntxig hom.
Thawj tsab xov xwm los ntawm Jennifer Krynin. Edited by Jeremy Girard rau 4/3/17.