Jos haluat lisätä vaakasuoria, erotin-tyylisiä viivoja verkkosivustoihisi, yksi vaihtoehto sisältää näiden viivojen kuvatiedostojen lisäämisen sivusi, mutta se vaatii selaimesi hakemaan ja lataamaan kyseiset tiedostot, mikä voi vaikuttaa kielteisesti päällä sivuston suorituskyky. Voit käyttää myös CSS rajaomaisuus lisätä rajojen yli jotka toimivat viivoina joko elementin ylä- tai alaosassa ja luovat tehokkaasti erotinviivan.
Tai - vielä parempi - käytä HTML vaakasäännön elementti.
Vaakasääntöelementti
Vaakasääntöviivojen oletusarvo ei ole ihanteellinen. Jotta ne näyttävät mukavammilta, lisää CSS: ää säätääksesi näiden elementtien visuaalisen ilmeen vastaamaan sivustosi ulkoasua.
HR-perusmerkki näyttää tavan, jolla selain haluaa näyttää sen. Nykyaikaiset selaimet näyttävät tyypillisesti tyylittämättömät HR-tunnisteet, joiden leveys on 100 prosenttia, korkeus 2 pikseliä ja 3D-reunus mustalla viivan luomiseksi.
Leveys ja korkeus ovat johdonmukaisia selaimissa
Ainoat tyylit, jotka ovat yhdenmukaisia kaikissa selaimissa, ovat
leveys ja tyylit. Nämä määrittävät kuinka suuri viiva tulee olemaan. Jos et määritä leveyttä ja korkeutta, oletusleveys on 100 prosenttia ja oletuskorkeus on 2 pikseliä.Tässä esimerkissä leveys on 50 prosenttia pääelementistä (huomaa, että nämä alla olevat esimerkit sisältävät kaikki sisäisiä tyylejä. Tuotantotilanteessa nämä tyylit kirjoitettaisiin ulkoiseen tyylitaulukkoon hallinnan helpottamiseksi kaikilla sivuillasi):
style = "width: 50%;">
Ja tässä esimerkissä korkeus on 2em:
style = "height: 2em;">
Rajan muuttaminen voi olla haastavaa
Nykyaikaisissa selaimissa selain rakentaa linjan säätämällä reunaa. Joten jos poistat tyylin ominaisuuden reunan, viiva katoaa sivulta. Kuten näette (no, et näe mitään, koska viivat ovat näkymättömiä) tässä esimerkissä:
style = "border: none;">
Reunuksen koon, värin ja tyylin säätäminen saa viivan näyttämään erilaiselta ja sillä on sama vaikutus kaikissa moderneissa selaimissa. Esimerkiksi tässä esittelyssä raja on punainen, katkoviiva ja 1px leveä:
style = "border: 1px katkoviiva # 000;">
Tee koristeellinen viiva taustakuvalla
Määritä vaakasäännölle taustakuva värin sijaan, jotta se näyttää täsmälleen haluamallasi tavalla, mutta näkyy silti semanttisesti merkinnöissäsi. Tässä esimerkissä käytimme kuvaa, joka on kolmea aaltoviivaa. Asettamalla se taustakuva ilman toistoa se luo tauon sisällölle, joka näyttää melkein kuin kirjoissa:
style = "korkeus: 20px; tausta: #fff url (aa010307.gif) ei-toistuva vierityskeskus; reunus: ei mitään; ">
HR-elementtien muuntaminen
CSS3: n avulla voit myös tehdä linjoistasi mielenkiintoisempia. HR-elementti on perinteisesti a vaakasuorassa rivillä, mutta CSS-muunnosominaisuuden avulla voit muuttaa niiden ulkoasua. Suosikki muunnos HR-elementissä on muuttaa kiertoa.
Kierrä HR-elementtiä niin, että se on vain hieman lävistäjä:
hr
-moz-muunnos: kiertää (10 astetta);
-webkit-muunnos: kiertää (10deg);
-o-muunnos: kiertää (10 astetta);
-ms-muunnos: kiertää (10 astetta);
muunnos: kiertää (10 astetta);
}
Tai voit kiertää sitä siten, että se on täysin pystysuora:
hr
-moz-muunnos: kiertää (90 astetta);
-webkit-muunnos: kiertää (90 astetta);
-o-muunnos: kiertää (90 astetta);
-ms-muunnos: kiertää (90 astetta);
muunnos: kiertää (90 astetta);
}
Tämä tekniikka kiertää sykettä sen nykyisen sijainnin perusteella asiakirjassa, joten sinun on ehkä muutettava sijoittelua saadaksesi sen haluamaasi paikkaan. Ei ole suositeltavaa käyttää tätä pystysuorien viivojen lisäämiseen suunnitteluun, mutta se on mielenkiintoinen vaikutus.
Toinen tapa saada viivoja sivuillesi
Yksi asia, jonka jotkut ihmiset tekevät HR-elementin käyttämisen sijasta, on luottaa muiden elementtien rajoihin. Mutta joskus HR on paljon helpompaa ja helpompi käyttää kuin yrittää asettaa rajoja. Joidenkin selainten laatikkomallin ongelmat voivat tehdä reunan asettamisesta entistä hankalampaa.