Tagħmel linji ta 'tħares interessanti fuq paġni tal-web b'tikketti HR
Jekk teħtieġ li żżid linji orizzontali, stil separator għal websajts tiegħek, għandek ftit għażliet. Tista 'żżid fajls ta' immaġni attwali ta 'dawk il-linji mal-paġna tiegħek, iżda dan ikun jeħtieġ li l-browser tiegħek jirkupra u jgħabbi dawk il-fajls, li jista' jkollhom impatt negattiv fuq il-prestazzjoni tas-sit.
Tista 'tuża l-proprjetà tal-fruntiera tas - CSS biex iżżid il- fruntieri li jaġixxu bħala linji jew fil-parti ta' fuq jew fil-qiegħ ta 'element, u b'hekk toħloq il-linja separatriċi tiegħek.
Fl-aħħarnett, tista 'tuża l-element HTML għar-regola orizzontali - il-
L-Element ta 'Regola Orizzontali
Jekk qatt stajt xi element fuq paġna web, x'aktarx skoprejt li l-mod awtomatiku li dawn il-linji huma murija mhumiex ideali. Dan ifisser li għandek bżonn tibdel lejn CSS biex taġġusta d-dehra viżiva ta 'dawn l-elementi biex tkun konformi ma' kif trid is-sit tiegħek tħares.
Tag tal-HR bażiku jintwera kif il-browser irid jurih. Browsers moderni tipikament juru tikketti HR mhux immarkati b'wisa 'ta' 100%, għoli ta '2px, u fruntiera 3D bl-iswed biex tinħoloq il-linja.
Hawn hu eżempju ta 'element HR standard jew tista' tara f'din l-immaġni kif l-HR minghajr ma tidher fil-browsers moderni.
Il-Wisa 'u l-Għoli huma Konsistenti Madwar Browsers
L-uniċi stili li huma konsistenti madwar il-web browsers huma l- wisa ' u l-istili. Dawn jiddefinixxu kemm tkun kbira l-linja. Jekk ma tiddefinixxix il-wisa 'u l-għoli l-wisa' default huwa 100% u l-għoli default huwa 2px.
F'dan l-eżempju l-wisa 'hija 50% tal-element ġenitur (innota dawn l-eżempji ta' hawn taħt kollha jinkludu stili inline. F'ambjent ta 'produzzjoni, dawn l-istili attwalment ikunu miktuba f'folja stil esterna għal faċilità ta' ġestjoni fil-paġni kollha tiegħek):
stil = "wisa ': 50%;">
U f'dan l-eżempju l-għoli huwa 2em:
stil = "għoli: 2em;">
Nibdlu l-Fruntieri Nistgħu nkunu Challenging
Fil-browsers moderni, il-browser jibni l-linja billi jaġġusta l-fruntiera. Mela jekk inti tneħħi l-fruntiera bil-proprjetà stil, il-linja se tisparixxi fuq il-paġna. Kif tistgħu taraw (ukoll, ma tara xejn, minħabba li l-linji se jkunu inviżibbli) f'dan l-eżempju:
stil = "fruntiera: ħadd;">
L-aġġustament tad-daqs, il-kulur u l-istil tal-fruntiera jagħmel il-linja differenti u għandu l-istess effett fil-browsers moderni kollha. Per eżempju, f'din id-dimostrazzjoni l-fruntiera hija ħamra, miksija u 1px wiesgħa:
stil = "fruntiera: 1px miksura # 000;">
Imma jekk tibdel il-fruntiera u l-għoli, l-istili jħarsu kemmxejn differenti f'bastaturi skaduti ħafna milli jagħmlu f'basters moderni. Kif tistgħu taraw f'dan l-eżempju, jekk tarah f'IE7 u hawn taħt (browser li sfortunatament għadu skadut u li m'għadux appoġġjat minn Microsoft) hemm linja ta 'ġewwa bis-saqajn li ma tidherx fil-brawżers l-oħra (inkluż IE8 u up) :
stil = "għoli: 1.5em; wisa ': 25em; fruntiera: 1px solidu # 000;">
Dawk il-browsers antikwati huma verament mhux ta 'tħassib kbir fid-disinn tal-web illum, peress li dawn ġew sostitwiti l-aktar b'għażliet aktar moderni.
Agħmel linja dekorattiva b'immaġni ta 'sfond
Minflok kulur, tista 'tiddefinixxi immaġni ta' sfond għar-RGħ tiegħek sabiex jidher eżattament kif tixtieqha, iżda xorta tidher b'mod semantiku fil-markup tiegħek.
F'dan l-eżempju użajna immaġni li hija ta 'tliet linji immewġin. Billi tpoġġiha bħala l- immaġni tal-isfond mingħajr ripetizzjoni, toħloq waqfa fil-kontenut li tidher kważi bħalma tara fil-kotba:
stil = "għoli: 20px; sfond: #fff url (aa010307.gif) ċentru ta 'scroll mingħajr ripetizzjoni; fruntiera: ħadd;">
It-trasformazzjoni tal-Elementi tar-RGħ
Bil-CSS3, tista 'wkoll tagħmel il-linji aktar interessanti. L-element HR huwa tradizzjonalment linja orizzontali , iżda bil-proprjetà tas-CSS tittrasforma, tista 'tbiddel kif tħares. Trasformazzjoni favorita fuq l-element HR hija li tinbidel ir-rotazzjoni.
Tista 'ddawwar l-element HR tiegħek sabiex tkun kemmxejn djagonali:
hr {
-moz-transform: dawwar (10deg);
-webkit-transform: dawwar (10deg);
-o-transform: dawwar (10deg);
-ms-trasformat: dawwar (10deg);
tittrasforma: iddawwar (10deg);
}
Jew tista 'dawwarha sabiex tkun kompletament vertikali:
hr {
-moz-transform: dawwar (90deg);
-webkit-transform: dawwar (90deg);
-o-transform: dawwar (90deg);
-ms-trasformat: dawwar (90deg);
tittrasforma: iddawwar (90deg);
}
Ftakar li dan idur ir-RGħ ibbażat fuq il-pożizzjoni attwali tiegħu fid-dokument, għalhekk jista 'jkollok bżonn taġġusta l-pożizzjoni biex tiksbu fejn tridha. Mhuwiex irrakkomandat li tuża dan biex iżżid linji vertikali ma 'disinn, iżda huwa mod li jinkiseb effett interessanti.
Mod ieħor biex Tikseb Linji fuq il-Paġni tiegħek
Ħaġa waħda li xi nies jagħmlu minflok tuża l-element HR hija li tiddependi fuq il-fruntieri ta 'elementi oħra. Imma xi drabi l-HR huwa ħafna aktar konvenjenti u eħfef biex jintuża milli jippruvaw jistabbilixxu fruntieri. Il-kwistjonijiet tal-mudell tal-kaxxa ta 'xi browsers jistgħu jagħmlu t-twaqqif ta' fruntiera saħansitra aktar diffiċli.