Interesējošu meklējamo līniju veidošana tīmekļa lapās ar HR tagiem
Ja jums ir jāpievieno horizontālās, atdalošās stila līnijas savām vietnēm, jums ir dažas iespējas. Varat pievienot savai lapai faktiskos attēlu rindiņus no šīm rindiņām, taču to pārlūks prasīs, lai tos ielādētu un ielādētu, un tas varētu negatīvi ietekmēt vietnes veiktspēju.
Jūs varētu izmantot CSS robežas īpašumu, lai pievienotu rindas, kas darbojas kā līnijas elementa augšdaļā vai apakšā, efektīvi izveidojot atdalītāju līniju.
Visbeidzot, varat izmantot HTML elementu horizontālajam noteikumam -
Horizontālais noteikuma elements
Ja esat kādreiz ievietojis elementu kādā tīmekļa lapā, jūs, iespējams, atklājāt, ka šo līniju parādīšanas noklusējuma veids nav ideāls. Tas nozīmē, ka jums jāpāriet pie CSS, lai pielāgotu šo elementu vizuālo izskatu, lai tas atbilstu jūsu vietnes izskatu.
Pamatā HR tag parādās tā, kā pārlūks to vēlas. Mūsdienu pārlūkprogrammās parasti tiek rādīti nepiestiprināti HR tagi ar platumu 100%, augstums - 2 pikseļi un melnā krāsa - 3D, lai izveidotu līniju.
Šeit ir standarta HR elementa piemērs vai šajā attēlā redzams, kā nepieradinātās personīgās personības izskatās mūsdienu pārlūkprogrammās.
Platums un augstums ir vienādi visā pārlūkprogrammā
Vienīgie tīmekļa pārlūkprogrammu stilu veidi ir platums un stili. Tie nosaka, cik liela līnija būs. Ja platums un augstums nav definēts, noklusējuma platums ir 100% un noklusējuma augstums ir 2 pikseļi.
Šajā piemērā platums ir 50% no vecāka elementa (ņemiet vērā šos piemērus, kas visi ir ietverti inline stili. Ražošanas iestatījumā šie stili faktiski tiek rakstīti ārējā stila lapā, lai atvieglotu pārvaldību visās jūsu lapās):
style = "platums: 50%;">
Un šajā piemērā augstums ir 2em:
style = "augstums: 2em;">
Robežu maiņa var būt izaicinājums
Mūsdienu pārlūkprogrammās pārlūks izveido līniju, koriģējot robežu. Tātad, ja jūs noņemat robežu ar stila īpašumu, līnija pazudīs lapā. Kā jūs varat redzēt (labi, jūs neredzat neko, jo līnijas būs neredzamas) šajā piemērā:
style = "robeža: nav;">
Pielāgojot malu izmēru, krāsu un stilu, līnija izskatīsies citādi, un tam būs tāds pats efekts visās mūsdienu pārlūkprogrammās. Piemēram, šajā demonstrācijā robeža ir sarkana, pārtraukta un 1 pikseļu platums:
style = "border: 1px dotted # 000;">
Bet, ja maināt robežu un augstumu, stils izskatās nedaudz atšķirīgs ļoti novecojušās pārlūkprogrammās, nekā mūsdienu pārlūkprogrammās. Kā jūs varat redzēt šajā piemērā, ja to aplūkojat IE7 vai zemāk (pārlūks, kas ir nožēlojami novecojis un Microsoft vairs neatbalsta), ir izliekta iekšējā rindiņa, kas netiek rādīta citās pārlūkprogrammās (tostarp IE8 un augšup) :
style = "augstums: 1.5em; platums: 25em; robeža: 1px cietais # 000;">
Šiem novecojušajiem pārlūkiem mūsdienās patiešām nav lielas bažas par web dizainu, jo tās lielākoties ir aizstātas ar mūsdienīgākām iespējām.
Izveidojiet dekoratīvu līniju ar fona attēlu
Tā vietā, lai krāsu, jūs varat noteikt fona attēlu jūsu personālajam personālam, lai tas izskatās tieši tāpat kā jūs vēlaties, bet semantiskā veidā joprojām tiek rādīts jūsu atzīmēšanā.
Šajā piemērā mēs izmantojām attēlu, kurā ir trīs viļņotas līnijas. Nosakot to kā fona attēlu bez atkārtojuma, tas rada pārtraukumu saturs, kas izskatās gandrīz tāpat kā jūs redzat grāmatās:
style = "height: 20px; background: #fff url (aa010307.gif) no-repeat scroll center; border: none;">
Pārveidot HR elementus
Izmantojot CSS3, jūs varat arī padarīt savas līnijas interesantākas. HR elements tradicionāli ir horizontāla līnija, bet ar CSS pārveidošanas īpašību varat mainīt to izskatu. Mīļākā transformācija uz HR elementu ir mainīt rotāciju.
Jūs varat pagriezt savu HR elementu tā, lai tas būtu nedaudz diagonāli:
hr {
-moz-transform: pagriezt (10deg);
-webkit-transform: pagriezt (10deg);
-o-pārveidot: pagriezt (10deg);
-ms-transformēt: pagriezt (10deg);
pārveidot: pagriezt (10deg);
}
Vai arī jūs varat pagriezt to tā, lai tas būtu pilnīgi vertikāls:
hr {
-moz-transformēt: pagriezt (90deg);
-webkit-transform: pagriezt (90deg);
-o-transformēt: pagriezt (90deg);
-ms-transformēt: pagriezt (90deg);
pārveidot: pagriezt (90deg);
}
Atcerieties, ka šis pagriež HR, ņemot vērā tā pašreizējo atrašanās vietu dokumentā, tāpēc jums, iespējams, būs jāpielāgo pozicionēšana, lai to iegūtu, kur jūs to vēlaties. Nav ieteicams to izmantot, lai pievienotu dizainam vertikālas līnijas, bet tas ir veids, kā iegūt interesantu efektu.
Vēl viens veids, kā iegūt līnijas jūsu lapās
Viena lieta, ko daži cilvēki dara, nevis izmantojot HR elementu, ir balstīties uz citu elementu robežām. Bet dažreiz HR ir daudz ērtāk un vieglāk izmantot nekā mēģinot izveidot robežas. Dažu pārlūkprogrammu lodziņu modeļu problēmas var padarīt robežu pat sarežģītāku.