Gwneud llinellau edrych diddorol ar dudalennau gwe gyda tagiau AD
Os oes angen i chi ychwanegu llinellau llorweddol, steil-arddull i'ch gwefannau, mae gennych rai opsiynau. Gallech ychwanegu ffeiliau delwedd gwirioneddol o'r llinellau hynny i'ch tudalen, ond byddai hynny'n golygu bod angen i'ch porwr adfer a llwytho'r ffeiliau hynny, a allai gael effaith negyddol ar berfformiad y safle.
Gallech ddefnyddio eiddo ffin CSS i ychwanegu ffiniau sy'n gweithredu fel llinellau naill ai ar y brig neu ar waelod elfen, gan greu eich llinell wahanu yn effeithiol.
Yn olaf, gallwch ddefnyddio'r elfen HTML ar gyfer y rheol llorweddol - y
Elfen y Rheol Llorweddol
Os ydych chi erioed wedi rhoi elfen ar dudalen we, mae'n debyg y gwelwch nad yw'r ffordd ddiffygiol y mae'r llinellau hyn yn cael eu harddangos yn ddelfrydol. Mae hyn yn golygu bod angen ichi droi at CSS i addasu ymddangosiad gweledol yr elfennau hyn i gyd-fynd â sut rydych chi'n dymuno i'ch gwefan edrych.
Dangosir tag AD sylfaenol y ffordd y mae'r porwr eisiau ei arddangos. Yn nodweddiadol, mae porwyr modern yn arddangos tagiau AD heb eu stychu gyda lled o 100%, uchder 2px, a ffin 3D mewn du i greu'r llinell.
Dyma enghraifft o elfen AD safonol neu gallwch weld yn y ddelwedd hon sut mae AD dynodedig yn edrych mewn porwyr modern.
Mae Lled a Uchder yn gyson ar draws y Porwyr
Yr unig arddulliau sy'n gyson ar draws porwyr gwe yw'r lled a'r arddulliau. Mae'r rhain yn diffinio pa mor fawr fydd y llinell. Os nad ydych chi'n diffinio'r lled a'r uchder, mae'r lled rhagosodedig yn 100% ac mae'r uchder diofyn yn 2px.
Yn yr enghraifft hon, mae'r lled yn 50% o'r elfen rhiant (nodwch yr enghreifftiau isod isod i gyd yn cynnwys arddulliau mewnol. Mewn lleoliad cynhyrchu, byddai'r arddulliau hyn mewn gwirionedd yn cael eu hysgrifennu mewn dalen arddull allanol ar gyfer rhwyddineb rheoli trwy gydol eich tudalennau):
arddull = "lled: 50%;">
Ac yn yr enghraifft hon mae'r uchder yn 2em:
arddull = "uchder: 2em;">
Gall Newid y Gororau fod yn heriol
Mewn porwyr modern, mae'r porwr yn adeiladu'r llinell trwy addasu'r ffin. Felly, os byddwch yn tynnu'r ffin â'r eiddo arddull, bydd y llinell yn diflannu ar y dudalen. Fel y gwelwch (wel, ni welwch unrhyw beth, gan y bydd y llinellau yn anweledig) yn yr enghraifft hon:
arddull = "border: none;">
Bydd addasu maint y ffin, y lliw a'r arddull yn golygu bod y llinell yn edrych yn wahanol ac yn cael yr un effaith ym mhob porwr modern. Er enghraifft, yn yr arddangosiad hwn mae'r ffin yn goch, wedi'i dasgu, ac 1px o led:
arddull = "border: 1px dashed # 000;">
Ond os ydych chi'n newid y ffin a'r uchder, mae'r arddulliau'n edrych ychydig yn wahanol mewn porwyr hen iawn nag a wnânt mewn porwyr modern. Fel y gwelwch yn yr enghraifft hon, os ydych chi'n ei weld yn IE7 ac isod (porwr sydd wedi bod yn hen ofnadwy ac na chefnogir Microsoft mwyach) mae yna linell fewnol beveled nad yw'n ymddangos yn y porwyr eraill (gan gynnwys IE8 ac i fyny) :
arddull = "uchder: 1.5em; lled: 25em; ffin: 1px solid # 000;">
Mewn gwirionedd, nid yw'r rhai pori hynafol yn llawer o bryder mewn dylunio gwe heddiw, gan eu bod wedi cael eu disodli i raddau helaeth gyda dewisiadau mwy modern.
Gwneud Llinell Addurnol gyda Delwedd Cefndirol
Yn hytrach na lliw, gallwch ddiffinio delwedd gefndir ar gyfer eich AD fel ei bod yn edrych yn union ag y dymunwch, ond mae'n dal i ddangos yn fanwl yn eich marciad.
Yn yr enghraifft hon, defnyddiasom ddelwedd sydd o dair llinell linellog. Drwy ei osod fel delwedd gefndir heb ei ailadrodd, mae'n creu seibiant yn y cynnwys sy'n edrych bron fel y gwelwch mewn llyfrau:
arddull = "uchder: 20px; cefndir: #fff url (aa010307.gif) canolfan sgrolio heb ei hailadrodd; ffin: none;">
Trawsnewid Elfennau AD
Gyda CSS3, gallwch hefyd wneud eich llinellau yn fwy diddorol. Yn draddodiadol, mae'r elfen AD yn linell lorweddol , ond gyda'r CSS yn trawsnewid eiddo, gallwch newid sut maent yn edrych. Trawsnewidiad hoff ar yr elfen AD yw newid y cylchdro.
Gallwch gylchdroi'ch elfen Adnoddau Dynol fel ei fod ychydig yn groeslin:
hr {
-moz-transform: cylchdroi (10deg);
-webkit-transform: cylchdroi (10deg);
-o-drawsnewid: cylchdroi (10deg);
-ms-transform: cylchdroi (10deg);
trawsnewid: cylchdroi (10deg);
}
Neu gallwch ei gylchdroi fel ei fod yn gwbl fertigol:
hr {
-moz-transform: cylchdroi (90deg);
-webkit-transform: cylchdroi (90deg);
-o-drawsnewid: cylchdroi (90deg);
-ms-transform: cylchdroi (90deg);
trawsnewid: cylchdroi (90deg);
}
Cofiwch fod hyn yn cylchdroi'r AD yn seiliedig ar ei leoliad presennol yn y ddogfen, felly efallai y bydd angen i chi addasu'r sefyllfa i gael lle rydych chi am ei gael. Nid yw'n argymell defnyddio hyn i ychwanegu llinellau fertigol at ddyluniad, ond mae'n ffordd o gael effaith ddiddorol.
Ffordd arall i gael llinellau ar eich tudalennau
Un peth y mae rhai pobl yn ei wneud yn hytrach na defnyddio'r elfen AD yw dibynnu ar ffiniau elfennau eraill. Ond weithiau mae HR yn llawer mwy cyfleus ac yn haws i'w ddefnyddio na cheisio sefydlu ffiniau. Gall materion model bocs rhai porwyr greu ffin hyd yn oed yn fwy anodd.