Հետաքրքիր գծեր ստեղծելով վեբ էջերում HR tags- ով
Եթե Ձեզ անհրաժեշտ է ավելացնել հորիզոնական, անջատիչ ոճի տողեր, ձեր մի քանի տարբերակ ունեք: Դուք կարող եք ավելացնել այդ գծերի փաստացի պատկերային ֆայլերը ձեր էջում, բայց դա պահանջում է ձեր բրաուզերը ստանալու եւ բեռնելու այն ֆայլերը, որոնք կարող են բացասական ազդեցություն ունենալ կայքի կատարման վրա:
Դուք կարող եք օգտագործել CSS սահմանի գույքը, սահմաններ ավելացնելով, որոնք գործում են որպես գծեր կամ տարրերի վերեւում կամ ներքեւում, արդյունավետ կերպով ստեղծելով ձեր անջատիչ գծը:
Վերջապես, դուք կարող եք օգտագործել HTML տարրը հորիզոնական կանոնի համար
Հորիզոնական կարգի տարրը
Եթե դուք երբեւէ տարր եք տեղադրել վեբ էջում, դուք հավանաբար հայտնաբերել եք, որ այս գծերի ցուցադրման լռելյայն ձեւը իդեալական չէ: Սա նշանակում է, որ դուք պետք է դիմեք CSS, որպեսզի այս տարրերի տեսողական տեսքը հարմարեցնեք, թե ինչպես եք ուզում ձեր կայքը դիտել:
Հիմնական HR tag- ը ցուցադրվում է այնպես, որ բրաուզերը ցանկանում է ցուցադրել այն: Ժամանակակից բրաուզերները սովորաբար ցուցադրում են անծայրածող HR պիտակներ 100% լայնությամբ, 2 պիքսել բարձրությամբ եւ սեւ ծածկույթով 3D սահմանագիծ ստեղծելու համար:
Ահա մի ստանդարտ HR բաղադրիչի օրինակ կամ դուք կարող եք տեսնել այս պատկերում, թե ինչպես է անծայրածիրը դիտում ժամանակակից բրաուզերների մեջ:
Լայնությունը եւ բարձրությունը հետեւողական են բրաուզերների համար
Միակ ոճերը, որոնք համապատասխանում են վեբ բրաուզերներին, լայնությունն ու ոճերը: Սրանք սահմանում են, թե որքան մեծ է գիծը: Եթե դուք չեք սահմանում լայնությունը եւ բարձրությունը, լռելյայն լայնությունը 100% է, իսկ լռելյայն բարձրությունը `2px:
Այս օրինակում լայնությունը ծնողի տարրի 50% -ն է (նշեք այս օրինակները ստորեւ ներառում են ներկառուցված ոճերը: Արտադրության տարածքում, այս ոճերը, ըստ էության, գրված են արտաքին ոճի թերթիկում, ձեր բոլոր էջերի ընթացքում կառավարման հեշտության համար):
style = "width: 50%;">
Եվ այս օրինակում բարձրությունը 2 է:
style = "height: 2em;">
Սահմանների փոփոխությունը կարող է դժվար լինել
Ժամանակակից բրաուզերում զննարկիչը կառուցում է սահմանը `սահմանելով սահմանը: Այսպիսով, եթե սահմանը հանել գույքի ոճով, էջը կվերանա էջում: Ինչպես տեսնում եք (լավ, դուք ոչինչ չեք տեսնում, քանի որ տողերը անտեսանելի կլինեն) այս օրինակում.
style = "border: none;">
Սահմանի չափը, գույնը եւ ոճը կարգավորելը գիծը տարբերվում եւ տարբերվում է բոլոր ժամանակակից բրաուզերում: Օրինակ, այս ցուցադրությունում սահմանը կարմիր, ճեղքված եւ ընդհանրապես ընդարձակ է:
style = "border: 1px dashed # 000;">
Բայց եթե դուք փոխեք սահմանը եւ բարձրությունը, ոճերը միանգամայն տարբերվում են շատ հնացած բրաուզերներում, քան նրանք ժամանակակից բրաուզերում են: Ինչպես տեսնում եք այս օրինակում, եթե դիտեք այն IE7- ում եւ ստորեւ (դիտարկիչ, որն աննպաստորեն հնացած է եւ այլեւս Microsoft- ի կողմից չի աջակցում) կա բծավորված ներքին գիծ, որը չի ցուցադրվում մյուս բրաուզերում (ներառյալ IE8 եւ up) :
style = "height: 1.5em; լայնությունը` 25em; border: 1px solid # 000; ">
Այդ հնացած բրաուզերները այսօր իսկապես մտահոգիչ չեն վեբ դիզայնի մեջ, քանի որ դրանք մեծապես փոխարինվել են ավելի ժամանակակից տարբերակներով:
Կատարել դեկորատիվ գիծ, ֆոնի պատկերով
Գույնի փոխարեն, դուք կարող եք սահմանել ֆոնային պատկեր Ձեր HR- ում այնպես, որ այն նայում է այնպես, ինչպես ցանկանում եք, բայց դեռ ցուցադրաբար սիմվոլ է ցուցադրում:
Այս օրինակում մենք օգտագործում էինք պատկեր, որը երեք ալիքային տողերից է: Ստեղծելով այն որպես ֆոնային պատկեր , առանց կրկնելու, այն ստեղծում է ընդմիջում այն բովանդակության մեջ, որը գրեթե տեսնում եք գրքերում:
style = "height: 20px; background: #fff url (aa010307.gif) no- կրկնվող ոլորման կենտրոն, սահման: none;">
Մարդկային տարրերի փոխակերպում
CSS3- ով դուք կարող եք նաեւ ձեր գծերը ավելի հետաքրքիր դարձնել: HRի տարրը ավանդաբար հորիզոնական գիծ է, սակայն CSS- ի գույքը վերափոխելու դեպքում դուք կարող եք փոխել, թե ինչպես են դրանք նայում: Մարդկային բաղադրիչի սիրված տրանսֆորմացիան ռոտացիան փոխելն է:
Դուք կարող եք պտտել ձեր HR բաղադրիչը, այնպես որ դա ընդամենը մի փոքր անկյունագիծ է.
hr {
-մոզ-փոխակերպում. պտտել (10 դեգ);
-վեբիտ-տրանսֆորմ: պտտել (10deg);
-o-transform: պտտել (10deg);
-ms-transform: rotate (10deg);
փոխակերպում. պտտել (10deg);
}
Կամ կարող եք պտտել այն, որ այն ամբողջովին ուղղահայաց է.
hr {
-մոզ-փոխակերպում. պտտել (90deg);
-վեբիտ-վերափոխում. պտտել (90deg);
-o-transform: rotate (90deg);
-ms-transform: rotate (90deg);
փոխակերպում. պտտել (90deg);
}
Հիշեք, որ սա պտտվում է HR- ի հիման վրա փաստաթղթի ներկա դիրքի վրա, այնպես որ դուք կարող եք հարմարեցնել դիրքորոշումը `այն ստանալու համար, որտեղ ցանկանում եք: Խորհուրդ չէ օգտագործել այն դիզայնի ուղղահայաց գծեր ավելացնելու համար, սակայն դա հետաքրքիր արդյունք ստանալու եղանակ է:
Ձեր էջերում գծեր ստանալու մեկ այլ եղանակ
Մի բան, որ որոշ մարդիկ անելու են HR- ի տարրը օգտագործելու փոխարեն `հենվել այլ տարրերի սահմաններին: Բայց երբեմն HR- ը շատ ավելի հարմար է եւ ավելի հեշտ է օգտագործել, քան փորձել սահմաններ սահմանել: Որոշ բրաուզերների արկղերի մոդելային հարցերը կարող են նույնիսկ սահմանային սահմանել: