HR səhifələrində web səhifələrində maraqlı görünüşlü xəttlər yaradır
Veb saytlarınıza üfüqi, ayırıcı tərzi xətləri əlavə etmək istəyirsinizsə, bir neçə variantınız var. Bu xətlərin faktiki görüntü fayllarını səhifənizə əlavə edə bilərsiniz, ancaq brauzerinizin sayt performansına mənfi təsir göstərə biləcək faylları almaq və yükləməsini tələb edəcəkdir.
CSS sərhədindən istifadə edərək, xətlərin effektiv şəkildə ayırma xəttini yaradan elementin üst və ya altındakı xətlər kimi fəaliyyət göstərmək üçün istifadə edə bilərsiniz.
Nəhayət, HTML elementini üfüqi qayda üçün istifadə edə bilərsiniz -
Horizontal Rule Elementi
Heç bir elementi bir veb səhifəsinə qoyduysanız, ehtimal ki, bu xətlərin göstərilən default yolu ideal deyildir. Bu, bu elementlərin vizual görünüşünü sitenizi nasıl görmek istediğinize uyğun olaraq ayarlamak üçün CSS'ye yönlendirmeniz gerektiği anlamına gelir.
Brauzerin onu göstərmək istədiyi əsas bir HR tag göstərilir. Müasir brauzerlər tipik olaraq unstyled HR etiketlərini 100% genişlikdə, 2px hündürlüyündə və bir xətt yaratmaq üçün qara rəngli 3D sərhəddə nümayiş etdirirlər.
Burada bir standart HR elementinin nümunəsi və ya bu görünüşdə unstyled bir HRin müasir brauzerlərdə necə göründüyünü görə bilərsiniz.
Genişlik və hündürlük brauzerlər arasında ardıcıldır
Veb brauzerlər arasında ardıcıl olan yeganə üslublar genişlik və üslublardır. Bunlar xəttin necə böyük olacağını müəyyənləşdirir. Genişliyi və hündürlüyü təyin etmirsinizsə, default width 100% və default height 2px-dir.
Bu nümunədə genişlik ana elementin 50% -nə bərabərdir (bu nümunələr aşağıda göstərilən inline üslubları daxil edin: bir istehsal qəbulu içərisində bu üslublar, həqiqətən, bütün səhifələrinizdə idarəetmə rahatlığı üçün xarici stillərdə yazılacaq):
style = "width: 50%;">
Və bu məsələnin hündürlüyü 2emdir:
stil = "yüksəklik: 2em;">
Sərhədlərin dəyişdirilməsi çətin ola bilər
Müasir brauzerlərdə brauzer sərhədi düzəltməklə xətti qurur. Beləliklə, stil mülkiyyəti ilə sərhədə çıxarsanız, xətt səhifədə yox olacaq. Gördüyünüz kimi bu nümunədə (yaxşı bir şey görməyəcəksiniz, xətləri görünməyəcək):
style = "border: none;">
Sərhəd ölçüsünü, rəngini və üslubunu düzəltmək, xəttin fərqli görünməsini və bütün müasir brauzerlərdə eyni təsir göstərməsini təmin edəcəkdir. Məsələn, bu nümayişdə sərhəd qırmızı, kəsik və 1 piksel genişdir:
style = "border: 1px dashed # 000;">
Ancaq sərhədi və hündürlüyü dəyişdirdiyiniz zaman, üslublar çox müasir brauzerlərdə olduğundan çox köhnəlmiş brauzerlərdə fərqlənir. Bu nümunədə gördüyünüz kimi, bunu IE7 və aşağıda nəzərdən keçirirsinizsə (Microsoft tərəfindən köhnəlmiş və artıq Microsoft tərəfindən dəstəklənməmiş bir brauzer) digər brauzerlərdə (IE8 və yuxarı səviyyədə daxil olmaqla) :
style = "height: 1.5em; genişlik: 25em; border: 1px solid # 000;">
Bu qədim brauzerlər həqiqətən daha çox müasir variantlarla əvəz olunduqları üçün həqiqətən bu gün veb dizaynı narahat edirlər.
Arxa şəkli ilə dekorativ bir xətt çəkin
Rəng əvəzinə HR-ləriniz üçün fon şəklini təyin edə bilərsiniz, belə ki, tam olaraq istədiyiniz kimi görünsə də, hələ də biçimlendirme şəklində semantik olaraq göstərilir.
Bu nümunədə üç dalğalı xəttdən ibarət bir görüntü istifadə etdik. Təkrarlanmayan arxa fon kimi quraraq, kitablarda gördüyünüz kimi görünən məzmunda bir fasilə yaradır:
style = "height: 20px; background: #fff url (aa010307.gif) heç bir təkrar keçid mərkəzi; border: none;">
İK elementlərinin transformasiyası
CSS3 ilə, xətləri daha maraqlı edə bilərsiniz. İK elementi ənənəvi olaraq üfüqi bir xəttdir, amma CSS xüsusiyyətini dəyişdirərək, onların necə göründüyünü dəyişə bilərsiniz. İK elementində sevimli dəyişiklik fırlanma dəyişikliyidir.
HR elementinizi yalnız bir qədər diaqonal olaraq dəyişə bilərsiniz:
hr {
-moz-transformu: döndürün (10deg);
-webkit-transform: döndürme (10deg);
-o-transform: döndürmək (10deg);
-ms-transform: döndürme (10deg);
çevirmək: döndürmək (10deg);
}
Və ya tamamilə şaquli olduğu üçün onu döndərə bilərsiniz:
hr {
-moz-transform: döndürme (90deg);
-webkit-transform: döndürme (90deg);
-o-transform: döndürme (90deg);
-ms-transform: döndürme (90deg);
çevirmək: dönüş (90deg);
}
Xatırladaq ki, bu, sənəddə mövcud yerə görə İK-nı döndərir, buna görə istədiyiniz yerə yerləşdirmək üçün yerləşdirməni tənzimləməlisiniz. Bu dizaynı şaquli xəttlər əlavə etmək üçün istifadə etmək tövsiyə edilmir, lakin bu, maraqlı bir təsir əldə etmək üçün bir yoldur.
Səhifələrinizdə xəttlər əldə etmək üçün başqa bir yol
Bəzi insanlar HR elementini yerinə yetirməkdən başqa bir şey digər elementlərin sərhədlərinə güvənməkdir. Ancaq bəzən bir HR daha sərfəli və sərhədlərin qurulmasına çalışmaqdan daha asandır. Bəzi brauzerlərin qutusu model məsələləri sərhədi hətta trickier qura bilər.