Vienuma izvietošana tīmekļa vietnē ir būtiska tā kopējam dizainam. Lai gan ir arī citi veidi, kā ietekmēt izkārtojumu, piemēram, izmantot tabulas ( kuras mēs neiesakām ), vislabāk ir izmantot CSS .
Zemāk mēs apskatīsim, kā izmantot vienkāršu CSS stila in-line īpašumu, lai pielāgotu attēlus, tabulas, punktus un citus.
Piezīme: šīs pašas metodes var izmantot arī ārējo stilu lapās, taču, tā kā tās attiecas uz atsevišķām vienībām un, iespējams, ir jāpaliek šādā veidā, vislabāk ir izmantot in-line stilu, piemēram, to, kas ir minēts tālāk.
Līdzināt teksta punktus
Paragrāfa tags ir pirmā vieta, kur sākt veidot savu tīmekļa lapu. Tās atvēršanas un aizvēršanas birkas izskatās šādi:
Rakstā teksta noklusējuma izlīdzināšana ir lapas kreisajā pusē, bet jūs varat arī saskaņot savus punktus pa labi un centrā.
Izmantojot peldošās īpašības, jūs varat izlīdzināt punktus no mātes elementa labās vai kreisās puses. Apmēram peldēto elementu apritēs visi citi elementa elementi.
Lai panāktu vislabāko efektu ar rindkopu, vislabāk ir noteikt platumu rindkopā, kas ir mazāks par konteinera (vecāku) elementu.
Saskaņojiet tekstu iekšpusē
Iespējams, ka vispiemērotākais punkts teksts ir "attaisnojums", kas liek pārlūkam parādīt tekstu, kas pēc būtības ir izlīdzināts gan loga labajā, gan kreisajā pusē.
Lai pamatotu rindkopas tekstu, izmantotu teksta izlīdzināšanas īpašību.
Jūs varat pielāgot visu tekstu rindkopā labajā vai kreisajā pusē (pēc noklusējuma), izmantojot teksta pielāgošanas īpašību.
Teksta izlīdzināšanas īpašība saskaņo tekstu elementā. Tehniski tas nav paredzēts, lai izlīdzinātu attēlus, kas ir ietverti rindkopā vai citā elementā, taču lielākā daļa pārlūkprogrammu pret šo objektu uzskata attēlus kā inline.
Attēlu saskaņošana
Izmantojot pludiņa īpašumu attēla tagā, varat definēt attēlu izvietojumu lapā un to, kā teksts aptins tos.
Līdzīgi kā iepriekš minētie punkti, pludiņa stila īpašums attēla tagā novieto jūsu attēlu lapā un informē pārlūku par to, kā tekstu un citus elementus ap to attēlu.
Teksts, kas seko iepriekšminētajam attēla tagam, plūsmu ap attēlu uz labo pusi, kā attēls parādās ekrāna kreisajā pusē.
Ja es vēlos, lai teksts pārtraucu iesaiņošanu pa attēlu, es izmantoju skaidru īpašību:
Saskaņot vairāk par punktiem
Tomēr, ko jūs vēlaties, lai saskaņotu vairāk nekā tikai punkts vai attēls? Katrā rindiņā jūs varat vienkārši ievietot stila īpašumu, taču tajā var izmantot efektīvāku tagu:
Vienkārši ieskaujiet tekstu un attēlus (ieskaitot HTML tagus ) ar tagu un stila īpašību (peldošu vai teksta izlīdzināšanu), un viss šajā sadalījumā tiks izlīdzināts tā, kā vēlaties.
Paturiet prātā, ka sadaļās vai attēlos pievienotie izlīdzinājumi tiks izpildīti, ignorējot atzīmi.