Ja savām vietnēm jums jāpievieno horizontālās, atdalošās stila rindiņas, parasti ir jāievieto šo lapu līnijas attēlu faili, 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 vietni sniegums. Varat arī izmantot CSS robežas īpašumu, lai pievienotu robežas, kas darbojas kā līnijas elementa augšdaļā vai apakšdaļā, efektīvi izveidojot atdalītāju līniju.
Vai arī - vēl labāk - horizontālā noteikuma HTML elementu izmantojiet.
Horizontālais noteikuma elements
Horizontālo likumu līniju noklusējuma izskats nav ideāls. Lai tie izskatās jaukāk, pievienojiet 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 parādītas nepareizas HR atzīmes ar platumu 100 procenti, augstums ir 2 pikseļi, bet melnā krāsa - trīsdaļīga, lai izveidotu līniju.
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 procenti, un noklusējuma augstums ir 2 pikseļi.
Šajā piemērā platums ir 50 procenti no vecāka elementa (ņemiet vērā šos piemērus, kas visi ir iekļauti inline stili. Ražošanas iestatījumos šos stilus faktiski raksta ā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;"> 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. Krāsas vietā jūs varat noteikt fona attēlu savam horizontālajam stāvoklim tā, lai tas izskatās tieši tā, kā tas nepieciešams, taču semantiski joprojām tiek parā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;"> Izmantojot CSS3, jūs varat arī padarīt savas līnijas interesantākas. HR elements tradicionāli ir a horizontāli line, bet ar CSS pārveidošanas īpašumu jūs 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 šī metode 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. 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. Robežu maiņa var būt izaicinājums
Izveidojiet dekoratīvu līniju ar fona attēlu
Pārveidot HR elementus
Vēl viens veids, kā iegūt līnijas jūsu lapās
