Ადამიანური რესურსების ჰორიზონტალური წესი

ვებ-გვერდებზე HR tags- ზე საინტერესო ეძებს ხაზებს

თუ თქვენ უნდა დაამატოთ ჰორიზონტალური, გამყოფი ხაზები თქვენს ვებსაიტებზე, გაქვთ რამდენიმე ვარიანტი. თქვენ შეგიძლიათ დაამატოთ ფაილების რეალური ფაილები თქვენს გვერდზე, მაგრამ ეს მოითხოვს თქვენს ბრაუზერს იმ ფაილების შესანახად და ჩატვირთვას, რაც შეიძლება უარყოფითი გავლენა იქონიოს საიტის შესრულებაზე.

თქვენ შეგიძლიათ გამოიყენოთ CSS სასაზღვრო ობიექტი, რათა დაამატოთ საზღვრები, რომლებიც მოქმედებს როგორც ხაზების ან ზედა ნაწილში, ეფექტურად ქმნის თქვენს გამყოფი ხაზს.

საბოლოოდ, თქვენ შეგიძლიათ გამოიყენოთ HTML ელემენტის ჰორიზონტალური წესით -

ჰორიზონტალური წესის ელემენტი

თუ ვებ-გვერდის ელემენტზე დააყენა ელემენტი, თქვენ სავარაუდოდ აღმოაჩენთ, რომ ამ ხაზების ჩვენება არ არის იდეალური. ეს იმას ნიშნავს, რომ თქვენ უნდა ჩართოთ CSS რათა შეცვალოს ვიზუალური გამოჩენა ამ ელემენტების იყოს შეესაბამება თუ როგორ გსურთ თქვენი საიტი თვალი.

ძირითადი HR tag არის ნაჩვენები გზა ბრაუზერის სურს ცარიელია. თანამედროვე ბრაუზერები, როგორც ჩანს, unstyled HR tags ერთად სიგანე 100%, სიმაღლე 2px და 3D საზღვრის შავი შექმნას ხაზი.

აქ არის მაგალითი სტანდარტული HR ელემენტის ან შეგიძლიათ ნახოთ ამ სურათზე როგორ unstyled HR გამოიყურება თანამედროვე ბრაუზერები.

სიგანე და სიმაღლე არის თანმიმდევრული აჭარის ბრაუზერები

ერთადერთი სტილის, რომელიც შეესაბამება მასშტაბით ვებ ბრაუზერები არის სიგანე და სტილის. ეს განსაზღვრავს, თუ რამდენად დიდი ხაზი იქნება. თუ სიგანე და სიმაღლე არ განსაზღვრავს სიგანეს 100% და ნაგულისხმევი სიმაღლე 2px.

ამ მაგალითში სიგანე არის მშობლის ელემენტის 50% (შენიშვნა ქვემოთ მოყვანილი მაგალითები მოიცავს ყველა სტილის ჩათვლით, წარმოების პარამეტრით, ეს სტილები რეალურად ჩაიწერება გარე სტილის ფურცლის მართვაში მთელი გვერდების მართვაში)

სტილი = "სიგანე: 50%;">

ამ მაგალითში სიმაღლე 2-ს შეადგენს:

სტილი = "სიმაღლე: 2 ე;">

საზღვრების შეცვლა შეიძლება რთული იყოს

თანამედროვე ბრაუზერებში, ბრაუზერი აშენებს ხაზს საზღვრის მორევის გზით. ასე რომ, თუ თქვენ წაშალეთ საზღვარი სტილის საკუთრებაში, ხაზი გაქრება გვერდზე. როგორც ხედავთ (კარგად, თქვენ ვერ ვხედავ არაფერს, რადგან ხაზები უხილავი იქნება) ამ მაგალითში:

სტილი = "საზღვარი: არცერთი;">

სასაზღვრო ზოლის, ფერისა და სტილის მომართვა ხაზს უსვამს ხაზს და აქვს იგივე ეფექტი ყველა თანამედროვე ბრაუზერში. მაგალითად, ამ დემონსტრაციაში საზღვარი წითელი, დატეხილი და 1px ფართოა:

სტილი = "საზღვარი: 1px dashed # 000;">

მაგრამ თუ თქვენ შეცვლით საზღვარი და სიმაღლე, სტილის გამოიყურება ოდნავ განსხვავდება ძალიან მოძველებული ბრაუზერები, ვიდრე ისინი თანამედროვე ბრაუზერები. თუ თქვენ ხედავთ ამ მაგალითში, თუ თქვენ იხილავთ IE7- ზე და ქვემოთ (ბრაუზერი, რომელიც woefully მოძველებულია და აღარ არის მხარდაჭერილი Microsoft- ის მიერ), არსებობს სხვა სახის ბრაუზერში (მათ შორის, IE8 და up) :

სტილი = "სიმაღლე: 1.5 სმ; სიგანე: 25; საზღვარი: 1px მყარი # 000;">

ამ ანტიკვარული ბრაუზერები ნამდვილად არ არიან შეშფოთება ვებ-დიზაინში დღეს, რადგან ისინი მეტწილად შეიცვალა უფრო თანამედროვე ვარიანტებით.

გააკეთეთ დეკორატიული ხაზი ფონის სურათის გამოყენებით

ნაცვლად ფერი, შეგიძლიათ განსაზღვრავთ ფონის სურათს თქვენი HR ისე, რომ იგი გამოიყურება ზუსტად ისე, როგორც თქვენ გინდათ, მაგრამ მაინც აჩვენებს სემანტიკურად თქვენს მარკირებას.

ამ მაგალითში ჩვენ ვიყენეთ გამოსახულება, რომელიც სამი ცალი ხაზისგან შედგება. შექმნის მას, როგორც ფონის სურათს არ განმეორებით, ის ქმნის შესვენების შინაარსი, რომელიც გამოიყურება თითქმის როგორც ხედავთ წიგნებში:

სტილი = "სიმაღლე: 20px; background: #ff url (aa010307.gif) არ განმეორებითი გადახვევა ცენტრი; საზღვარი: არა;">

ტრანსფორმირება HR ელემენტები

ერთად CSS3, ასევე შეგიძლიათ გააკეთოთ თქვენი ხაზები უფრო საინტერესო. HR ელემენტი ტრადიციულად ჰორიზონტალური ხაზია, მაგრამ CSS სატრანსფორმატორო თვისებით შეგიძლიათ შეიცვალოს, როგორ გამოიყურება ისინი. ადამიანური ელემენტის ფავორიტი ტრანსფორმაცია არის როტაციის შეცვლა.

თქვენ შეგიძლიათ როტაცია თქვენი HR ელემენტი ისე, რომ ეს მხოლოდ ოდნავ დიაგონალი:

hr {
-მოზოლი-გარდაქმნის: როტაცია (10deg);
-ვებბით-გარდაქმნა: როტაცია (10deg);
-ოქ-ტრანსფორმირება: როტაცია (10deg);
-ms- ტრანსფორმირება: როტაცია (10deg);
გარდაქმნას: როტაცია (10deg);
}

ან შეგიძლიათ როტაცია ისე, რომ ის სრულიად ვერტიკალურია:

hr {
-მოზომი-გარდაქმნა: როტაცია (90deg);
-ვებბით-გარდაქმნა: როტაცია (90 დგ);
-ოქ-გარდაქმნა: როტაცია (90 დგ);
-ms- ტრანსფორმირება: როტაცია (90deg);
გარდაქმნას: როტაცია (90deg);
}

გახსოვდეთ, რომ ეს გადაინაცვლებს ადამიანს, რომელიც დაფუძნებულია მის ამჟამინდელ ადგილას დოკუმენტში, ასე რომ თქვენ შეიძლება დაგჭირდეთ შეცვალონ პოზიცია, რომ მიიღოთ ის, სადაც გსურთ. ეს არ არის რეკომენდირებული, რომ გამოიყენოთ ვერტიკალური ხაზების პროექტირება, მაგრამ ეს არის საინტერესო ეფექტი.

კიდევ ერთი გზა მიიღოთ ხაზები თქვენს გვერდებზე

ერთი რამ, რომ ზოგიერთი ადამიანი აკეთებს ნაცვლად ადამიანის ელემენტს არის დამოკიდებული საზღვრების სხვა ელემენტები. მაგრამ ხანდახან HR უფრო ბევრად უფრო მოსახერხებელია და უფრო ადვილია, ვიდრე საზღვრების შექმნის მცდელობა. ზოგიერთი ბრაუზერის ყუთში მოქმედი საკითხები საზღვრის შექმნასაც კი შეუძლია.