Изработка на интересни изглед линии на веб-страници со хумани ресурси тагови
Ако треба да додадете хоризонтални линии во вашиот стил во вашиот веб-сајт, имате неколку опции. Можете да додадете вистински сликовни датотеки од тие линии на вашата страница, но тоа ќе бара вашиот прелистувач да ги превземе и да ги вчита тие датотеки, што би можело да има негативно влијание врз перформансите на сајтот.
Можете да ја користите границата на CSS за да додадете граници кои дејствуваат како линии или на врвот или на дното на елементот, ефикасно креирајќи ја вашата линија на одделување.
Конечно, можете да го користите елементот HTML за хоризонталното правило - на
Хоризонталниот елемент на правилата
Ако некогаш сте ставиле елемент на веб-страница, најверојатно сте откриле дека стандардниот начин на кој овие линии се прикажани не се идеални. Ова значи дека треба да се свртиме кон CSS за да го прилагодите визуелниот изглед на овие елементи за да биде во согласност со тоа како сакате вашиот сајт да изгледа.
Основна HR таг е прикажана на начинот на кој пребарувачот сака да го прикаже. Современите прелистувачи обично покажуваат непостоечки HR-ознаки со ширина од 100%, висина од 2px и 3D граница во црно за да ја создадат линијата.
Еве еден пример за стандарден елемент со хумани ресурси или можете да видите на оваа слика како невидлив HR изгледа во модерните прелистувачи.
Ширина и висина се конзистентни помеѓу прелистувачите
Единствените стилови кои се конзистентни низ веб прелистувачи се ширината и стиловите. Тие дефинираат колку голема ќе биде линијата. Ако не ја дефинирате ширината и висината, стандардната ширина е 100%, а основната висина е 2px.
Во овој пример, ширината е 50% од родителскиот елемент (забележете дека овие примери подолу ги вклучуваат вградените стилови). Во производна поставка, овие стилови всушност би биле напишани во надворешен стилски лист за полесно управување во сите ваши страници):
стил = "ширина: 50%;">
И во овој пример висината е 2em:
style = "height: 2em;">
Промената на границите може да биде предизвик
Во современите прелистувачи, прелистувачот ја гради линијата со прилагодување на границата. Значи, ако ја отстраните границата со својството на стилот, линијата ќе исчезне на страната. Како што можете да видите (добро, нема да видите ништо, бидејќи линиите ќе бидат невидливи) во овој пример:
style = "border: none;">
Прилагодувањето на големината, бојата и стилот на границата ќе ја направат линијата поинаква и има ист ефект во сите современи прелистувачи. На пример, во оваа демонстрација границата е црвена, попарена и 1px широк:
style = "border: 1px dashed # 000;">
Но, ако ја промените границата и височината, стилите изгледаат малку поинакви во многу застарени прелистувачи отколку во модерните прелистувачи. Како што можете да видите во овој пример, ако го гледате во IE7 и подолу (прелистувач кој е многу застарен и веќе не е поддржан од Microsoft), постои вкоренета внатрешна линија која не се прикажува во другите прелистувачи (вклучувајќи IE8 и нагоре) :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Оние антикризни прелистувачи денес навистина не се многу загрижени во веб-дизајнот, бидејќи тие во голема мера беа заменети со помодерни опции.
Направете декоративна линија со слика со позадина
Наместо боја, можете да дефинирате позадина за вашиот HR, така што ќе изгледа токму онака како што сакате, но сепак прикажува семантички во вашиот селектирај.
Во овој пример ние користевме слика со три брановидни линии. Со поставување како позадинска слика без повторување, создава пауза во содржината која изгледа речиси како што гледате во книгите:
стил = "висина: 20px; позадина: #fff url (aa010307.gif) центар за превртување без повторување; граница: нема;">
Трансформирање на HR елементи
Со CSS3, исто така можете да ги направите вашите линии поинтересни. Елементот за човечки ресурси традиционално е хоризонтална линија, но со CSS трансформира сопственост, можете да промените како изгледаат. Омилена трансформација на HR елементот е да се промени ротацијата.
Можете да го ротирате вашиот HR елемент, така што тоа е само малку дијагонално:
hr {
-моз-трансформирај: ротирај (10deg);
-webkit-трансформирај: ротирај (10deg);
-о-трансформирај: ротирај (10deg);
-ms-трансформирај: ротирај (10deg);
трансформирај: ротирај (10deg);
}
Или можете да го ротирате така што е целосно вертикално:
hr {
-моз-трансформирај: ротирај (90deg);
-webkit-трансформирај: ротирај (90deg);
-о-трансформирај: ротирај (90deg);
-ms-трансформирај: ротирај (90deg);
трансформирај: ротирај (90deg);
}
Запомнете дека ова го ротира ВР врз основа на моменталната локација во документот, па можеби ќе треба да го прилагодите позиционирањето за да го добиете онаму каде што сакате. Не е препорачливо да го користите ова за да додадете вертикални линии на дизајнот, но тоа е начин да се добие интересен ефект.
Друг начин да се добијат линии на вашите страници
Едно нешто што некои луѓе го прават наместо да го користат елементот со хумани ресурси е да се потпре на границите на другите елементи. Но, понекогаш на човечки ресурси е многу поудобно и полесно да се користи отколку да се обидува да воспостави граници. Прашањата на моделот на кутиите на некои прелистувачи можат да ја направат границата дури и построга.