Siv HTML thiab CSS los tsim Tabs thiab Spacing

Saib seb qhov chaw seem li cas hauv HTML yog kho los ntawm browsers

Yog tias koj yog thawj qhov web designer, ib qho ntawm ntau yam uas koj yuav tau to taub thaum ntxov yog qhov uas yog qhov chaw dawb hauv qhov chaw ua haujlwm yog xyuas los ntawm cov web browsers.

Hmoov tsis, txoj kev uas browsers daws qhov chaw dawb yog tsis heev intuitive thaum xub thawj, tshwj xeeb tshaj yog tias koj tuaj rau hauv HTML thiab muab piv rau qhov chaw seem dawb hauv kev ua lus sau cov kev pab cuam, uas koj yuav paub ntau dua.

Hauv kev sau ua software, koj tuaj yeem tau ntau ntau yam kev sib tw los yog tabs hauv daim ntawv thiab qhov kev sib hloov ntawd yuav tsum muaj kev cuam tshuam hauv cov ntaub ntawv ntawm cov ntaub ntawv cov ntsiab lus. Qhov no tsis yog qhov teeb meem nrog HTML lossis cov nplooj ntawv web. Raws li xws li, kawm tau li cas qhov chaw dawb, qhov tseeb, xyuas los ntawm cov web browsers yog ib qho tseem ceeb heev.

Spacing hauv Sau

Hauv kev sau ua software, peb lub npe dawb lub cim yog qhov chaw, tab, thiab xa rov qab. Txhua yam ntawm cov cai no nyob rau hauv ib txoj kev sib txawv, tab sis hauv HTML, browsers kav lawv txhua tus yeej tseem zoo ib yam. Txawm koj tso ib qhov chaw lossis 100 qhov chaw hauv koj cov cim HTML, lossis sib xyaw koj txoj kev sib xyaw nrog tabs thiab kev them tsheb rov qab, tag nrho cov no yuav muab condensed mus rau ib qhov chaw thaum lub nplooj ntawv tau ua los ntawm qhov browser. Nyob rau hauv lub web tsim qauv, qhov no yog hu ua qhov chaw seem dawb. Koj tsis tuaj yeem siv cov kev hloov no raug hloov ntxiv hauv cov nplooj ntawv web site vim hais tias qhov browser tau sib tsoo ntau qhov chaw mus ua ib qhov chaw thaum nws ua qhov browser,

Vim Li Cas Tus Neeg Siv Tabs?

Feem ntau, thaum tib neeg siv cov tabs hauv cov ntawv nyeem, lawv siv lawv cov kev tsim tawm los yog tau txais cov ntawv nyeem kom txav mus rau ib qhov chaw los yog kom muaj qee yam ntawm lwm lub caij. Hauv kev tsim web, koj siv tsis tau cov cim kev cim lus kom ua tau raws li cov yeeb yaj duab los yog qhov kev xav tau.

Hauv kev tsim web, kev siv cov cim ntxiv rau hauv cov cai yuav tsum yooj yim rau kev nyeem cov cai. Web designers thiab cov neeg tsim khoom siv feem ntau siv cov tabs rau cov cai indent kom lawv pom tau cov ntsiab lus uas yog cov me nyuam ntawm lwm cov ntsiab lus - tab sis cov khab hauv qab no tsis cuam tshuam rau qhov kev teeb tsa qhov pom ntawm nplooj ntawv nws tus kheej. Rau cov kev xav tau hloov qhov hloov qhov hloov, koj yuav tsum tau tig mus rau CSS (cov ntawv txheeb cov kev ntaus ntawv).

Siv CSS los tsim HTML Tabs thiab Spacing

Cov websites niaj hnub no ua nrog sib cais ntawm cov qauv thiab cov qauv. Tus qauv ntawm nplooj ntawv yog xyuas los ntawm cov HTML thaum cov style dictated los ntawm CSS. Qhov no txhais tau tias kom tsim spacing los yog ua tau ib qho layout, koj yuav tsum tau xa mus rau CSS thiab tsis txhob sim tsuas yog kis cov cim rau cov HTML code.

Yog hais tias koj sim siv tabs los tsim txhua kab ntawv, koj tuaj yeem siv

cov ntsiab lus uas tau muab tso nrog CSS kom tau txais qhov qhov teeb meem hauv kab. Qhov kev tso kawm no yuav ua tiav los ntawm CSS floats, kev tso meej txog qhov sib nrig, lossis tshiab dua CSS qhov kev ua qauv xws li Flexbox lossis CSS Grid.

Yog tias cov ntaub ntawv koj tabtom tso tawm yog tabular cov ntaub ntawv, koj tuaj yeem siv cov ntxhuav los kho cov ntaub ntawv uas koj xav tau. Ntxhuav feem ntau tau txais kev phem rau hauv web tsim vim lawv tau ua phem rau cov cuab yeej ntshiab rau ntau xyoo, tab sis cov ntxhuav yeej tseem siv tau yog tias koj cov ntsiab lus muaj cov lus qhia hauv cov ntaub ntawv.

Margins, Padding, thiab Text-Indent

Qhov ntau txoj kev los tsim kev sib tw nrog CSS yog siv ib qho ntawm CSS nram qab no:

Piv txwv, koj tuaj yeem nkag rau thawj kab ntawm ib pawg lus zoo li tab nrog CSS nram qab no (ceeb toom tias qhov no suav tias koj cov lus muaj ib chav kawm ntawm "thawj" nrog rau nws):

p.first {
text-indent: 5em;
}

Cov pawg lus no yuav tsum yog indented txog 5 cim.

Koj tseem tuaj yeem siv cov paj tau paj los yog padding cov khoom hauv CSS ntxiv qhov kis mus rau qhov kawg, hauv qab, sab laug, los yog txoj cai (los yog kev sib txuas ntawm cov tog) ntawm ib qho. Thaum kawg, koj tuaj yeem ua txhua yam ntawm kev sib tw uas xav tau los ntawm kev xa mus rau CSS.

Tsiv ntawv ntau dua Ib Qhov Chaw Tsis Muaj CSS

Yog hais tias txhua yam koj xav tau yog rau koj cov ntawv nyeem kom tau txav ntau tshaj ib qho chaw deb ntawm cov khoom yav dhau los, koj tuaj yeem siv qhov chaw tsis muaj kev cuam tshuam.

Siv qhov chaw uas tsis yog-tawg, koj tsuas ntxiv & nbsp; raws li ntau lub sij hawm raws li koj xav tau nws nyob hauv koj cov cim HTML.

Piv txwv, yog tias koj xav rhais koj lo lus tsib qhov chaw, koj tuaj yeem ntxiv cov lus hauv qab no ua ntej lo lus.

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;

HTML respects no thiab yuav tsis collapse lawv mus rau ib qhov chaw. Txawm li cas los xij, qhov no xam tau tias yog ib qho kev txom nyem heev vim nws yog ntxiv cov cim HTML ntxiv rau ib daim ntawv tsuas yog mus ua kom tiav qhov tsim nyog. Xa rov qab mus rau qhov kev sib cais ntawm cov qauv thiab cov qauv, koj yuav tsum tsis txhob muab cov neeg tsis yog rhuav tshem kom thiaj ncav tau qhov teeb meem uas yuav tsum tau tsim thiab yuav tsum siv CSS margins thiab padding xwb.