Lai savām vietnēm pievienotu horizontālas, atdalītāja stila līnijas, viena iespēja ietver šo līniju attēlu failu pievienošanu jūsu lapu, taču tam jūsu pārlūkprogrammai būtu jāatgūst un jāielādē šie faili, kas varētu negatīvi ietekmēt ieslēgts vietnes veiktspēja. Jūs varētu arī izmantot CSS pierobežas īpašums, ko pievienot robežas kas darbojas kā līnijas vai nu elementa augšpusē, vai apakšā, efektīvi izveidojot atdalītāja līniju.
Vai - vēl labāk - izmantojiet HTML elements horizontālajam noteikumam.
Horizontālā noteikuma elements
Horizontālo kārtulu līniju noklusējums nav ideāls. Lai padarītu tos izskatīgākus, pievienojiet CSS, lai pielāgotu šo elementu vizuālo izskatu, lai tas atbilstu jūsu vietnes izskatam.
HR pamata tags parāda veidu, kādā pārlūks vēlas to parādīt. Mūsdienu pārlūkprogrammās parasti tiek parādīti nestilēti HR tagi ar 100 procentu platumu, 2 pikseļu augstumu un 3D apmali melnā krāsā, lai izveidotu līniju.
Pārlūkprogrammās platums un augstums ir konsekventi
Vienīgie stili, kas tīmekļa pārlūkos ir konsekventi, ir
platums un stili. Tie nosaka, cik liela būs līnija. Ja jūs nenosaka platumu un augstumu, noklusējuma platums ir 100 procenti un noklusējuma augstums ir 2 pikseļi.Šajā piemērā platums ir 50 procenti no pamatelementa (ņemiet vērā, ka šie piemēri zemāk ietver ietvertos stilus. Produkcijas vidē šie stili faktiski tiks ierakstīti ārējā stila lapā, lai ērti pārvaldītu visas jūsu lapas):
style = "width: 50%;">
Šajā piemērā augstums ir 2em:
style = "height: 2em;">
Robežu maiņa var būt izaicinoša
Mūsdienu pārlūkprogrammās pārlūks izveido līniju, pielāgojot robežu. Tātad, ja noņemsit robežu ar stila rekvizītu, līnija lapā pazudīs. Kā redzat (labi, jūs neko neredzēsiet, jo līnijas būs neredzamas) šajā piemērā:
style = "border: none;">
Pielāgojot apmales lielumu, krāsu un stilu, līnija izskatās citādi un tai ir tāda pati ietekme visās mūsdienu pārlūkprogrammās. Piemēram, šajā demonstrācijā robeža ir sarkana, svītrota un 1 pikseļu plata:
style = "border: 1px dashed # 000;">
Izveidojiet dekoratīvu līniju ar fona attēlu
Krāsas vietā horizontālajai kārtulai definējiet fona attēlu tā, lai tas izskatās tieši tā, kā vēlaties, bet tomēr iezīmējumā tiek parādīts semantiski. Šajā piemērā mēs izmantojām attēlu, kas sastāv no trim viļņainām līnijām. Nosakot to kā fona attēls bez atkārtojuma tas rada satura pārtraukumu, kas izskatās gandrīz tāds pats kā jūs redzat grāmatās:
style = "augstums: 20 pikseļi; fons: #fff url (aa010307.gif) bez atkārtojuma ritināšanas centrs; apmale: nav; ">
HR elementu pārveidošana
Izmantojot CSS3, jūs varat arī padarīt savas līnijas interesantākas. HR elements tradicionāli ir a horizontāli līniju, bet, izmantojot CSS transformācijas īpašumu, varat mainīt to izskatu. Iecienītākā HR elementa pārveidošana ir rotācijas maiņa.
Pagrieziet HR elementu tā, lai tas būtu tikai nedaudz pa diagonāli:
hr
-moz-pārveidot: pagriezt (10deg);
-webkit-transformēt: pagriezt (10deg);
-o-pārveidot: pagriezt (10deg);
-ms-pārveidot: pagriezt (10deg);
pārveidot: pagriezt (10deg);
}
Vai arī varat to pagriezt tā, lai tas būtu pilnīgi vertikāls:
hr
-moz-pārveidot: pagriezt (90deg);
-webkit-pārveidot: pagriezt (90deg);
-o-pārveidot: pagriezt (90deg);
-ms-pārveidot: pagriezt (90deg);
pārveidot: pagriezt (90deg);
}
Šis paņēmiens pagriež HR, pamatojoties uz tā pašreizējo atrašanās vietu dokumentā, tāpēc, iespējams, būs jāpielāgo pozicionēšana, lai to iegūtu tur, kur vēlaties. Nav ieteicams to izmantot, lai dizainam pievienotu vertikālas līnijas, taču tas ir interesants efekts.
Vēl viens veids, kā iegūt līnijas savās lapās
Viena lieta, ko daži cilvēki dara, nevis izmanto HR elementu, ir paļauties uz citu elementu robežām. Bet dažreiz HR ir daudz ērtāk un vieglāk izmantot nekā mēģināt iestatīt robežas. Dažu pārlūkprogrammu rūtiņu modeļa dēļ apmales iestatīšana var būt vēl sarežģītāka.