Lilo awọn CSS Alafofo ohun ini lati Ṣeto Awọn oju-iwe ayelujara Ṣiṣe Awọn ojulowo
Ohun elo CSS jẹ ohun-ini pataki fun ifilelẹ. O faye gba o lati ṣe ipo awọn oju-iwe ayelujara rẹ bi o ṣe fẹ ki wọn han-ṣugbọn ki o le lo o o ni lati ni oye bi o ti n ṣiṣẹ.
Ninu iwe ara, awọn ohun elo CSS float dabi eyi:
.right [float: ọtun; }
Eyi sọ fun aṣàwákiri pe ohun gbogbo pẹlu kilasi ti "ọtun" yẹ ki o ṣàn si ọtun.
Iwọ yoo ṣe ipinnu bi eleyi:
kilasi = "ọtun" />
Kini O Ṣe Lè Fẹ pẹlu Ile-iṣẹ CSS Ti Okun Okun?
O ko le ṣafo gbogbo opo lori oju-iwe ayelujara kan. O le nikan ṣatunṣe awọn ohun elo -ipele-ipele . Awọn wọnyi ni awọn eroja ti o gba akọọlẹ aaye kan lori oju-iwe, bi awọn aworan (), paragira (), awọn ipin (), ati awọn akojọ ().
Awọn eroja miiran ti o ni ipa ọrọ, ṣugbọn ko ṣe apoti kan lori oju-iwe ni a npe ni awọn eroja inline ati pe a ko le ṣan. Awọn wọnyi ni awọn eroja bi igba (), awọn adehun ila (), itọkasi to lagbara (), tabi awọn itumọ ().
Nibo Ni Wọn Ṣe Ikunfo?
O le ṣatunṣe awọn ohun elo si ọtun tabi osi. Eyikeyi eleyi ti o tẹle awọn ohun elo ti o ni ṣiṣan yoo ṣàn ni ayika ẹda omi lori apa keji.
Fun apẹrẹ, ti mo ba ṣa aworan kan si apa osi, eyikeyi ọrọ tabi awọn ero miiran ti o tẹle o yoo ṣàn ni ayika rẹ si ọtun. Ati pe ti mo ba ṣafọ aworan kan si apa ọtun, eyikeyi ọrọ tabi awọn ero miiran ti o tẹle rẹ yoo ṣàn ni ayika rẹ si apa osi. Aworan kan ti a gbe sinu apo ti ọrọ laisi eyikeyi irufẹ ti a lo si rẹ yoo han sibẹsibẹ a ṣeto ẹrọ lilọ kiri lati han awọn aworan.
Eyi maa n wa pẹlu ila akọkọ ti tẹle atọrọ ti o han ni isalẹ ti aworan naa.
Bawo Ni Yio Foo Wọn Yoo?
Ohun ti o ti ṣafo yoo gbe lọ si apa osi tabi sọtun ti nkan ti o wa ni bii o le ṣe. Eyi yoo mu ki ọpọlọpọ awọn oriṣiriṣi ipo da lori bi a ṣe kọ koodu rẹ sii.
Fun awọn apeere wọnyi, Emi yoo wa ni ṣiṣan omi kan kekere DIV element si apa osi:
- Ti o ko ba ni iwọn ti a ti ṣalaye tẹlẹ, ti o ni ṣiṣan ti o fẹlẹfẹlẹ, yoo gba bi aaye ti o wa ni aaye pipo ti a beere ati ti o wa, laisi iru iṣan omi. Akiyesi: diẹ ninu awọn aṣàwákiri gbìyànjú lati gbe awọn eroja lẹgbẹẹ awọn ohun elo ti o ṣafo nigba ti a ko ṣe iwọn ijuwe-ni fifunni fifunye ti kii-ṣafo nikan ni aaye kekere kan. Nitorina o yẹ ki o maa ṣọkasi iwọn kan lori awọn eroja ti omi.
- Ti o ba jẹ ẹka ti o gba eiyan HTML, eleyii DIV yoo joko lori apa osi ti oju-iwe naa.
- Ti o ba jẹ pe nkan ti o wa ni nkan ti o wa pẹlu nkan miiran, awọn DIV ti o ṣiṣan yoo joko lori apa osi ti apo eiyan naa.
- O le ṣe itẹ-ẹiyẹ awọn ohun elo ti a fi omi ṣan, ati pe o le mu ki awọn ọkọ oju omi dopin ni ibi ti o yanilenu. Fun apẹẹrẹ, ọkọ oju omi yii jẹ oju-omi DIV ti o wa ni isalẹ ni DIV kan ti o ni ẹtọ.
- Awọn eroja ti o ṣan yoo joko lẹgbẹẹ ara ẹni ti o ba wa ni yara ninu apo. Fun apẹẹrẹ, egungun yii ni awọn ohun elo DIV 100px ti o wa ni ibẹrẹ 400px.
O le lo awọn ọkọ oju omi lati ṣẹda ifilelẹ aworan aworan. O fi awọn eekanna atanpako kọọkan (ti o ṣiṣẹ julọ nigbati gbogbo wọn ba ni iwọn kanna) ni DIV pẹlu akọle ati fifa awọn ohun elo DIV ninu apo.
Laibikita bii oju iboju window jẹ, awọn aworan kekeke yoo wa ni iṣọkan.
Titan Paapa
Lọgan ti o ba mọ bi o ṣe le ni ipinnu lati ṣan omi, o ṣe pataki lati mọ bi o ṣe le pa ọya naa kuro. O pa awọn ọkọ oju omi pẹlu ohun ini CSS. O le ṣatunṣe awọn ọkọ oju omi ti osi, awọn ọkọ oju omi ti o tọ tabi awọn mejeeji:
ko o: osi;
ko o: ọtun;
ko o: mejeeji;
Eyikeyi eleyi ti o ṣeto ohun elo ti o kedere fun yoo han ni isalẹ ohun ti o wa ni itọsọna naa. Fun apẹrẹ, ninu apẹẹrẹ yi awọn paragika meji akọkọ ti ko ni pe, ṣugbọn kẹta jẹ.
Mu ṣiṣẹ pẹlu iye ti o rọrun fun awọn eroja oriṣiriṣi ninu awọn iwe rẹ lati gba awọn ipa ti o yatọ.
Ọkan ninu awọn ipaleti ti o ṣafihan julọ julọ julọ jẹ lẹsẹsẹ awọn aworan si apa ọtun tabi osi ti o tẹle si awọn ìpínrọ ọrọ. Paapa ti ọrọ naa ko ba to gun lati yi lọ si aworan naa, o le lo imọlẹ lori gbogbo awọn aworan lati rii daju pe wọn han ni iwe-kọnti ju ti o tẹle si aworan ti tẹlẹ.
Awọn HTML (tun yi paragile):
Ti o ba ti wa ni akoko ti o ti wa ni tun ṣe afẹyinti akoko akoko ti o wa ni afẹyinti ni akoko afẹfẹ. Ko jẹ aṣalẹ kan ti kii ṣe aṣoju, ṣiṣẹ ati ki o ṣe eyikeyi miiran.
CSS (lati ṣan awọn aworan si apa osi):
img.float {float: osi;
ko o: osi;
ala: 5px;
}
Ati si apa otun:
img.float {float: ọtun;
ko o: ọtun;
ala: 5px;
}
Lilo Floats fun Ifilọlẹ
Lọgan ti o ba ni oye bawo ni ohun elo ti n ṣatunfo, o le bẹrẹ lilo rẹ lati gbe oju-iwe ayelujara rẹ jade. Awọn wọnyi ni awọn igbesẹ ti Mo gba lati ṣẹda oju-iwe ayelujara ti o ṣafo:
- Ṣẹda ifilelẹ naa (lori iwe tabi ni ẹya aworan tabi ni ori mi).
- Mọ ibi ti awọn ipin ti yoo wa.
- Mọ awọn iwọn ti awọn apoti ti o yatọ ati awọn eroja laarin wọn.
- Fipashi ohun gbogbo. Paapa awọn nkan ti o wa loke ti wa ni ṣiṣan si apa osi ki emi ki o mọ ibi ti yoo wa ni ibatan si ibudo wiwo oju ẹrọ.
Niwọn igba ti o ba mọ awọn iwọn (awọn ipin-ogorun ni o dara) ti awọn apakan ifilelẹ rẹ, o le lo ohun elo ti o fẹlẹfẹlẹ lati fi wọn si ibi ti wọn wa lori oju-iwe naa. Ati ohun ti o wuyi ni, o ko ni lati ṣàníyàn nipa ohun ti awoṣe apoti jẹ yatọ si fun Internet Explorer tabi Akata bi Ina.