Kev Kawm Txog Kev Ua Hauv Web Design

Web tsim tau ib txwm txais cov thawj xibfwb thiab cov ntsiab lus txhais ntawm lub ntiaj teb ntawm daim duab thiab luam tawm qauv. Qhov no yog qhov tseeb tshwj xeeb tshaj yog thaum nws tuaj txog lub web typography thiab txoj kev uas peb tau txais tsab ntawv ntawm peb cov nplooj ntawv web. Cov kev cai no tsis yog tas li 1 mus rau 1 phau ntawv, tiam sis koj yeej pom tau qhov twg ib qho kev qhuab qhia tau ua rau lwm tus. Qhov no yog qhov tseem ceeb tshaj plaws thaum koj xav txog kev sib raug zoo ntawm cov qauv ntawv lo ntawm "traditional" thiab " CSS" uas paub tias "kab qhov siab."

Lub Ntsiab ntawm Kev Ua Thawj

Thaum cov neeg siv los xij cov khoom siv hlau los ntoo los xij los tsim cov hom ntawv sau rau phab ntawv sau, cov nplooj ntawv nyias muaj nyias ntawm cov kab ntawv ntawm cov ntawv nyeem thiaj li tsim qhov sib txawv ntawm cov kab. Yog tias koj xav tau qhov chaw loj, koj yuav tso cov hlau lead ntau dua. Qhov no yog li cas lo lus "ua" yog coined. Yog tias koj ntsia lub sij hawm "ua" hauv phau ntawv txog cov qauv tsim thiab tus thawj xibfwb, nws yuav nyeem ib yam dab tsi rau kev ua haujlwm ntawm - "qhov kev ncua deb ntawm cov kab lus ntawm cov kab sib txuas ntawm hom."

Ua hauv Web Design

Hauv cov qauv tsim, lub sij hawm ua tseem siv rau kev xa mus rau cov kis ntawm kab ntawv. Muaj ntau cov kev siv siv cov lus qhia no, txawm tias cov hlau lead tiag tiag tsis yog siv rau hauv cov kev pab cuam no. Qhov no yog ib qho piv txwv ntawm cov qauv tshiab ntawm kev tsim qiv cov tswv yim los ntawm cov neeg coj noj coj ua, txawm tias txoj kev cai siv tau hloov lawm.

Thaum nws tuaj cuag lub web tsim, nws tsis muaj CSS cov cuab yeej rau "tus coj." Xwb, CSS cov cuab yeej uas yuav los ua qhov kev pom ntawm cov ntawv nyeem no hu ua kab-qhov siab. Yog tias koj xav kom koj cov ntawv nyeem muaj chaw seem ntawm txoj kab ntawm kab ntawv, koj yuav siv cov cuab yeej no. Piv txwv li, hais tias koj xav ua kom qhov kab qhov siab rau tag nrho cov seem hauv lub ntawm koj qhov chaw , koj tuaj yeem ua li no:

lub ntsiab p {kab qhov siab: 1.5; }

Qhov no yuav tam sim no yog 1.5 npaug ntawm qhov ntsuas kab ncaj nruab nrab, raws li lub font default loj ntawm nplooj ntawv (uas yog feem ntau 16px).

Thaum twg thiaj li yuav siv Kab-Qhov siab

Raws li tau hais los saum toj, kab-qhov siab tsim nyog los siv qhov chaw ntawm cov ntawv nyeem hauv pawg lus los yog lwm cov ntawv ntawm cov ntawv nyeem. Yog tias muaj chaw seem tsawg dhau ntawm cov kab, cov ntawv nyeem tuaj yeem cuam tshuam thiab tsis yooj yim nyeem rau cov neeg saib xyuas rau koj lub vev xaib. Zoo tib yam, yog tias cov kab no tau sib nrug deb heev ntawm cov nplooj ntawv, qhov nquag khiav ntawm kev nyeem ntawv yuav raug cuam tshuam thiab cov nyeem yuav muaj teeb meem nrog koj cov lus rau qhov laj thawj no. Qhov no yog vim li cas koj thiaj li xav nrhiav qhov tsim nyog ntawm qhov siab-qhov siab nrawm los siv. Koj tuaj yeem sim sim koj cov qauv siv nrog cov neeg siv sij hawm kom tau txais lawv cov lus qhia txog qhov nyeem tau ntawm nplooj ntawv .

Thaum Tsis Siv Cov Kab-Qhov siab

Tsis txhob muab lub sijhawm rau qhov siab los ntawm txoj hlua khi los yog khiv qhov uas koj yuav siv ntxiv rau cov nplooj ntawv tsim, nrog rau cov npe hauv qab lossis nqe lus. Uas spacing yog tsis ua, thiab yog li ntawd nws tsis yog daws los ntawm kab qhov siab.

Yog tias koj xav ntxiv qhov chaw nyob hauv qee cov ntawv nyeem, koj yuav siv margins los yog padding. Rov qab mus rau CSS yav dhau los peb tau siv, peb yuav ntxiv qhov no:

lub ntsiab p {kab qhov siab: 1.5; paj tau paj hauv qab: 24px; }

Qhov no puas tseem muaj 1.5 kab qhov siab ntawm cov kab ntawv ntawm peb nplooj ntawv (qhov sawv daws yuav sab hauv lub ntsiab ). Cov kev cai qub no tseem yuav muaj 24 pixels ntawm cov me nyuam mos uas nyob hauv qab ntawm txhua tus, cia rau kev pom kev so uas cia cov neeg nyeem tau yooj yim qhia ib seem ntawm lwm tus thiab ua kom nyeem ntawv tau yooj yim ua. Koj kuj tseem siv tau cov khoom padding nyob rau hauv qhov chaw ntawm margins no:

lub ntsiab p {kab qhov siab: 1.5; padding-hauv qab: 24px; }

Nyob rau yuav luag txhua tus neeg mob, qhov no yuav pom tib yam li CSS yav dhau los.

Hais tias koj xav ntxiv qhov kis ntawm daim ntawv teev npe uas muaj sab hauv nrog ib chav kawm ntawm "services-menu", koj yuav siv margins los yog padding ua li ntawd, TSIS kab qhov siab. Ces qhov no yuav tsim nyog.

.services-zaub mov li { Koj tsuas yog siv kab qhov siab ntawm no yog tias koj xav teem lub zais ntawm cov ntawv nyob hauv daim ntawv-cov khoom lawv tus kheej, piv txwv tias lawv tau ua tiav ntawm cov ntawv nyeem uas yuav khiav tau ntau txoj kab rau txhua qhov ncauj lus.