Defnyddio Eiddo arnofio CSS i Ddylunio Cynlluniau Tudalen We
Mae'r eiddo CSS yn eiddo pwysig iawn ar gyfer y cynllun. Mae'n eich galluogi i osod eich dyluniadau tudalennau yn union fel y dymunwch eu dangos - ond er mwyn ei ddefnyddio, mae'n rhaid i chi ddeall sut mae'n gweithio.
Mewn dalen arddull, mae eiddo arnofio CSS yn edrych fel hyn:
.right {arnofio: dde; }
Mae hyn yn dweud wrth y porwr y dylai popeth gyda'r dosbarth o "dde" gael ei symud i'r dde.
Byddech yn ei neilltuo fel hyn:
dosbarth = "dde" />
Beth Allwch Chi ei Ffloi ag Eiddo Arnofio AG?
Ni allwch arnofio pob elfen ar dudalen we. Gallwch ond arnofio elfennau bloc-lefel . Dyma'r elfennau sy'n cymryd bloc o le ar y dudalen, fel delweddau (), paragraffau (), is-adrannau (), a rhestrau ().
Gelwir elfennau eraill sy'n effeithio ar destun, ond peidiwch â chreu blwch ar y dudalen, yn elfennau mewnline ac ni ellir eu llwytho. Mae'r rhain yn elfennau fel rhychwant (), seibiannau llinell (), pwyslais cryf (), neu italics ().
Ble Maen nhw'n Fflot?
Gallwch chi elfennau arnofio i'r dde neu i'r chwith. Bydd unrhyw elfen sy'n dilyn yr elfen flodeuo yn llifo o gwmpas yr elfen wedi'i llacio ar yr ochr arall.
Er enghraifft, os byddaf yn arnofio delwedd i'r chwith, bydd unrhyw destun neu elfennau eraill sy'n dilyn yn llifo o gwmpas y dde. Ac os wyf yn arnofio delwedd i'r dde, bydd unrhyw destun neu elfennau eraill sy'n ei dilyn yn llifo o'i gwmpas i'r chwith. Bydd delwedd a osodir mewn bloc o destun heb unrhyw arddull arnofio sy'n berthnasol iddo yn dangos, fodd bynnag, bod y porwr wedi'i osod i ddangos delweddau.
Fel rheol, mae hyn gyda'r llinell gyntaf o ddilyn y testun a ddangosir ar waelod y ddelwedd.
Pa mor bell fyddant yn ffloedio?
Bydd elfen sydd wedi ei flodeuo yn symud mor bell i'r chwith neu'r dde o'r elfen cynhwysydd ag y gall. Mae hyn yn arwain at sawl sefyllfa wahanol yn dibynnu ar sut mae'ch cod wedi'i ysgrifennu.
Ar gyfer yr enghreifftiau hyn, byddaf yn arwebu elfen DIV bach i'r chwith:
- Os nad oes lled wedi'i ddiffinio ymlaen llaw, bydd yn cymryd cymaint o ofod llorweddol yn ôl yr angen ac ar gael, waeth beth fo'r arnofio. Sylwer: mae rhai porwyr yn ceisio gosod elfennau wrth ymyl elfennau llaeth pan nad yw'r lled yn cael ei ddiffinio - gan roi ychydig o le yn unig i'r elfen heb ei flodeuo. Felly, dylech bob amser ddiffinio lled ar elfennau llaeth.
- Os yw'r elfen gynhwysydd yn yr elfen HTML, bydd y DIV llaeth yn eistedd ar ymyl chwith y dudalen.
- Os yw'r elfen gynhwysydd ei hun yn cael ei chynnwys gan rywbeth arall, bydd y DIV llaeth yn eistedd ar ymyl chwith y cynhwysydd.
- Gallwch chi nythu elfennau llaeth, a gall hynny arwain at yr arnofio yn dod i ben mewn lle syndod. Er enghraifft, mae hwn yn arnofio yn DIV ar y chwith y tu mewn i DIV ar y dde.
- Bydd elfennau llaeth yn eistedd wrth ymyl ei gilydd os oes lle yn y cynhwysydd. Er enghraifft, mae gan y cynhwysydd hwn dair elfen DIV 100px o led wedi'i flodeuo mewn cynhwysydd 400px o led.
Gallwch chi hyd yn oed ddefnyddio ffoniau i greu cynllun oriel luniau. Rydych chi'n rhoi pob llun bach (mae'n gweithio orau pan fyddant yr un maint) mewn DIV gyda'r pennawd ac yn arnofio'r elfennau DIV yn y cynhwysydd.
Ni waeth pa mor eang yw'r ffenestr porwr, bydd y lluniau'n cyd-fynd yn unffurf.
Turning Off the Float
Unwaith y byddwch chi'n gwybod sut i gael elfen i arnofio, mae'n bwysig gwybod sut i ddiffodd yr arnofio. Rydych yn diffodd yr arnofio gyda'r eiddo clir CSS. Gallwch chi glirio ffatiau ar y chwith, fflôtiau cywir neu'r ddau:
clir: chwith;
clir: dde;
clir: y ddau;
Bydd unrhyw elfen yr ydych yn gosod yr eiddo clir ar ei gyfer yn ymddangos yn is na elfen sy'n cael ei gyfeirio i'r cyfeiriad hwnnw. Er enghraifft, yn yr enghraifft hon nid yw'r ddau baragraff cyntaf o destun yn cael eu clirio, ond y trydydd yw.
Chwarae gyda gwerth clir gwahanol elfennau yn eich dogfennau i gael effeithiau gwahanol ar y cynllun.
Un o'r cynlluniau diddorol mwyaf diddorol yw cyfres o ddelweddau i lawr y golofn dde neu chwith wrth ymyl paragraffau testun. Hyd yn oed os nad yw'r testun yn ddigon hir i sgrolio heibio'r ddelwedd, gallwch ddefnyddio'r clir ar yr holl ddelweddau i wneud yn siŵr eu bod yn ymddangos yn y golofn yn hytrach na'r nesaf i'r ddelwedd flaenorol.
Yr HTML (ailadroddwch y paragraff hwn):
Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in pleasure. Cupidatat heb fod yn broffesiynol, er mwyn gweithio ac yn ddifrifol iawn.
Y CSS (i arnofio'r delweddau i'r chwith):
img.float {arnofio: chwith;
clir: chwith;
ymyl: 5px;
}
Ac i'r dde:
img.float {arnofio: dde;
clir: dde;
ymyl: 5px;
}
Defnyddio Floats ar gyfer Cynllun
Ar ôl i chi ddeall sut mae'r eiddo arnofio yn gweithio, gallwch ddechrau ei ddefnyddio i osod eich tudalennau gwe. Dyma'r camau yr wyf yn eu cymryd i greu tudalen gwe wedi'i flodeuo:
- Dyluniwch y cynllun (ar bapur neu mewn offer graffeg neu yn fy mhen).
- Penderfynwch ble bydd adrannau'r dudalen yn mynd i fod.
- Penderfynu ar led y gwahanol gynwysyddion a'r elfennau ynddynt.
- Arnofio popeth. Hyd yn oed mae'r elfen cynhwysydd mwyaf perffaith yn cael ei ffloo i'r chwith er mwyn i mi wybod ble bydd yn ymwneud â porthladd y porwr.
Cyn belled â'ch bod yn gwybod bod y lled (canrannau'n iawn) o'ch adrannau cynllun, gallwch ddefnyddio'r eiddo arnofio i'w rhoi lle maent yn perthyn ar y dudalen. A'r peth neis yw, does dim rhaid i chi boeni cymaint am fod y model blwch yn wahanol ar gyfer Internet Explorer neu Firefox.