Terveisiä kaikille lukijoille. Ajoittain käsityöläiset kohtaavat ongelman, kuinka tehdä vaaka- tai pystysuora viiva HTML:n tai CSS:n avulla. Tästä kerron teille tänään.
Rivit CSS:ssä
On olemassa useita tapoja tehdä viivoja. Yksi tällainen tapa on käyttää CSS:ää. Tai pikemminkin käyttämällä Borderia. Katsotaanpa esimerkkiä.
Ja näin tulee tapahtumaan seurauksena.
Vaaka- ja pystyviiva css:llä.
Viivat voidaan piirtää CSS:ssä Border-operaattorilla. Jos tarvitset vain suorakulmion, jolla on kiinteä kehysleveys, voit käyttää tätä operaattoria ja antaa sille arvon. Esimerkiksi border:5px solid #000000; tarkoittaa, että lohkon reunojen leveys on yhtä suuri kuin 5 pikseliä mustaa väriä.
Jos sinun ei kuitenkaan tarvitse asettaa kaikkia rajoja, vaan vain joitain, sinun on määritettävä, mitä rajoja tarvitaan ja mikä arvo kullakin niistä on. Nämä ovat operaattorit:
- border-top – määrittää yläreunuksen arvon
- border-bottom – määrittää alareunan arvon
- border-left – määrittää vasemman reunan arvon
- border-right – määrittää oikean reunan arvon.
Pysty- ja vaakaviiva HTML:ssä
Voit luoda rivejä itse HTML:ään. Voit tehdä tämän käyttämällä tunnistetta hr.
Tässä tapauksessa piirretään vaakasuora viiva, yhden pikselin korkea ja täysi leveys.
Mutta tälle tunnisteelle voidaan antaa myös joitain arvoja.
- Leveys– asettaa viivan leveyden arvon.
- Väri– määrittää viivan värin.
- Kohdista– asettaa kohdistuksen vasemmalle, keskelle, oikealle
- Koko– asettaa viivan paksuuden arvon pikseleinä.
hr-tunnisteen avulla voit asettaa myös pystyviivan. Mutta tässä tapauksessa sinun on turvauduttava tyyleihin uudelleen.
Tässä tapauksessa pystysuora viiva piirretään sata pikseliä korkea, yhden pikselin paksuinen ja viisi pikseliä sisennettynä.
Johtopäätös.
No, nyt tiedät kuinka voit asettaa pysty- ja vaakaviivan. Rivit voidaan asettaa sekä tavallisilla sivustoilla HTML:llä että ne voidaan asettaa CMS:ää käyttävillä sivustoilla, esimerkiksi WordPress, mutta tässä tapauksessa sinun on vaihdettava HTML-tilaan.
No, jos sinulla on lisää kysymyksiä, kysy ne kommenteissa.
Hei, harjoitussivustoni uskolliset tilaajat sekä blogin vieraat. Oletko koskaan huomannut web-resurssisivuilla, että pystysuora viiva html-koodissa erottaa osan tiedoista? Tämä on siis hyvin yksinkertainen, mutta tehokas tapa kiinnittää lukijan huomio haluttuun osaan sisältöä.
Siksi haluan omistaa tämän julkaisun pystysuorien viivojen asettamiseen tarkoitettujen työkalujen ja tunnisteiden tutkimiseen ja kertoa myös missä muualla tätä tekniikkaa voidaan käyttää. Nyt aloitetaan!
Mihin tekstin pystyerottelua käytetään?
Kehittäjät ja web-suunnittelijat yrittävät luoda ainutlaatuisen verkkosivuston, jolla on kätevä ja intuitiivinen käyttöliittymä. Kaikki tämä saavutetaan erilaisilla työkaluilla ja lähestymistavoilla sekä CSS-tyylisivuilla.
Useimmiten aksentit sijoitetaan sivujen tekstisisältöön. Tätä varten käytämme:
- erikoistunnisteet, esim. < vahva>, < i>, < iso> ja muut;
- tekstin jakaminen kappaleisiin ja eritasoisten otsikoiden syöttäminen;
- objektien valinta erilaisilla ;
- kirjasintyylin muuttaminen;
- kehystyskehysten lisääminen sisältöön jne.
Harkitse viimeistä kohtaa.
puitteet on yleinen mekanismi tiettyjen objektien erottamiseen massasta, korostamiseen ja yksinkertaiseen verkkosisällön suunnitteluun. Ne luodaan ominaisuuden avulla rajaa.
Tämä CSS-kielielementti on erittäin joustava ja voi asettaa kehyksen valitun objektin kaikille tai vain yhdelle puolelle. Olen listannut tärkeät ominaisuudet taulukkoon.
Kaikki yllä olevat ominaisuudet voivat ohjata viivan paksuutta, väriä ja esitystyyliä.
Haluaisin huomauttaa, että rajat voivat näyttää enemmän kuin suorilta viivoilta. Ne voivat myös näkyä:
- kohta(pisteviiva)
- pilkullinen(katkoviiva)
- lineaarinen(kiinteä)
- kaksinkertainen(kaksinkertainen)
- tilavuus(ura, upotettu, harja ja lähtö) runko
- tai toista esivanhemman tyyliasetukset käyttämällä inherit-avainsanaa.
Joskus törmään kysymyksiin, kuten: "Voiko rajaa esittää kuvana ja miten se tehdään?" Vastaus on kyllä. Ja tämä tehdään hyvin yksinkertaisesti.
Tätä varten CSS:n luojat toimittivat elementin raja-kuva, jossa sinun on ilmoitettava polku kuvaan ja kuvattava reunuksen kummankin puolen paksuus.
Käytännön osa
Mielestäni on aika laittaa teoria koetukselle. Sinun tehtäväsi on kirjoittaa tekstiosa ja erottaa avainkohdat tai lainausmerkit pystysuorilla viivoilla. Esimerkkikoodi on esitetty alla:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
Tämä teksti on erittäin tärkeä.
|
Ensimmäinen kappale. Käytä vasenta reunaa
Korosta ensimmäisessä kappaleessa tekstin avainkohta vasemmalla kaksoisviolettiviivalla.
Toinen kappale. Reunuskuvan käyttö
Toisessa kappaleessa korostamme tekstin avainkohtaa pystyviivalla vasemmalla kuvan muodossa.
Kuten olet ehkä huomannut, materiaali on erittäin kevyttä, mutta siitä voi olla hyötyä monien erilaisten ongelmien ratkaisemisessa. Tällä sanon hyvästit sinulle. Muista tilata ja kutsua ystäväsi ystävälliseen tiimiimme. Hei hei!
Ystävällisin terveisin, Roman Chueshov
Kuvissa on useita mielenkiintoisia ominaisuuksia, jotka voidaan päätellä soveltamalla suoraa muunnosta (18) yksinkertaisissa fysikaalisissa tilanteissa. Nykyiseen tarkoitukseemme emme tarvitse kaavan (18) täydellistä yleisyyttä; haluttu vaikutus voidaan osoittaa, vaikka kaikki kameran asentoa kuvaavat parametrit olisivat yhtä suuret kuin nolla, yhtä kallistuskulmaa lukuun ottamatta. Vastaavasti otamme ja muunnamme lausekkeen (18) yksinkertaisempaan muotoon:
Tutkitaan pystysuoran viivan kuvan ominaisuuksia. Objektin pystysuora viiva piirretään kohdepisteellä
missä sen pisteen koordinaatit, jossa suora leikkaa pohjatason, ja z on vapaa parametri, jonka arvo otetaan kaikkien reaalilukujen joukosta. Jos korvaamme v:n kaavaan (27) ja poistamme vapaan parametrin z kahdesta yhtälöstä, saamme kuvatason suoran yhtälön
Tämän yksinkertaisen yhtälön analyysi tuottaa useita mielenkiintoisia havaintoja. Tärkeintä on, että Z-leikkaus on riippumaton itse pystyviivan asennosta; se riippuu vain siitä, onko viiva todella pystysuora. Näin ollen tietyllä kameran geometrialla kaikkien pystysuorien viivojen kuvat kulkevat pystysuoran schofin yhden pisteen kautta, jonka koordinaatit kuvassa ovat yhtä suuria kuin .
Riisi. 10.4 Poistopisteet.
Riisi. Kuva 10.4 havainnollistaa tätä vaikutusta yksittäisen kuution kuvassa, joka on otettu kameralla voimakkaasti alaspäin. Lukija voi tarkistaa yhtälön (28) muut ominaisuudet, jotka ovat yhdenmukaisia intuition kanssa. Jos esimerkiksi lisäät nollasta 90°:een, pystysuora katoamispiste siirtyy kohti kuvatason keskustaa ja viivan kaltevuus pienenee. Vastaavasti millä tahansa kamerakulmalla tämä vaikutus tulee näkyvämmäksi, kun kohteen pystysuorat viivat siirtyvät kohti näkökentän reunaa (eli kun
Tulee suureksi verrattuna ). Pystysuuntainen katoamispiste voidaan siis määrittää vain kameran parametreistä, ja se asettaa pystysuorien viivojen kuville yksinkertaisen välttämättömän ehdon.
10.5.4. VAAKAAT VIIVOT JA VAAKAPISTEET
Viimeisenä esimerkkinä perspektiivimuunnosten käytöstä tarkastellaan joitain vaakasuuntaisen viivan kuvan ominaisuuksia. Yksinkertaisuuden vuoksi tarkastelemme kuvaa kohdelinjasta, joka sijaitsee globaalin koordinaattijärjestelmän pohjatasolla. Missä tahansa tällaisella suoralla olevan kohteen pisteessä ja b ovat vastaavasti suoran kaltevuus ja tämän suoran katkaiseman janan pituus Y-koordinaattiakselilla, koska haluamme ottaa kuvan kohteesta lattialla, on parempi, että kamera on nostettu lattian yläpuolelle ja mahdollisesti suunnattu alaspäin. Tämän mukaisesti otamme kameran geometriset parametrit muotoon ja annamme arvon olla positiivinen ja negatiivinen. Näille parametreille suora muunnos (18) on yksinkertaistettu seuraavasti:
Kun on korvattu kaavoilla (29) ja eliminoitu vapaa parametri x kahdesta yhtälöstä, saadaan kuvatason suoran yhtälö.
Tämän kuvaviivan kulmakertoimella tai sen ja koordinaattiakselien leikkauspisteillä ei ole erityisen yksinkertaisia ominaisuuksia; Harkitse kuitenkin tämän kuvaviivan leikkauskohtaa tämän kuvan horisonttiviivan kanssa. Minkä tahansa kuvan horisonttiviiva määritellään kuvatason leikkauspisteeksi linssin keskustan läpi kulkevan tason kanssa lattian suuntaisesti. Kuten kuvan 1 sivukuvasta näkyy. 10.5, horisonttiviivan yhtälö (kuvakoordinaateissa) on muotoa Ilmeisesti kuvaviivan (30) ja horisonttiviivan leikkauspisteen X-koordinaatti määritetään rinnastamalla lauseke (30) arvoon - . Kun tuloksena oleva yhtälö on ratkaistu
suhteessa horisontin leikkauspisteen koordinaattiin, huomaamme, että
Tämä tulos voidaan saada myös korvaamalla lauseke (29) ensimmäiseen yhtälöön ja siirtymällä rajaan, koska x pyrkii äärettömään. Tästä syystä horisontin leikkauspistettä kutsutaan aivan ansaitusti vaakasuuntaiseksi katoamispisteeksi tai katoamispisteeksi tietyn viivan kuvan horisontin kanssa; tämä on raja, johon kuvapiste pyrkii, kun kohdepiste siirtyy suoraa pitkin äärettömään
Riisi. 10.5. Kohti horisonttiviivan laskemista.
Voimme tehdä useita mielenkiintoisia huomioita ilmaisusta (31). Huomaa ensin, että katoamispiste on riippumaton kameran korkeudesta kohdeviivan sisältävän tason yläpuolella. Toiseksi katoamispiste ei riipu olioviivayhtälön käännösparametrista b. Tästä syystä voimme tehdä tärkeän johtopäätöksen, että millä tahansa kahdella lattiatason suuntaisella suoralla on sama katoamispiste silloin ja vain, jos ne ovat yhdensuuntaisia keskenään. Lopuksi oletetaan, että meillä on kaksi kohtisuoraa linjaa esineestä, jotka sijaitsevat lattian suuntaisella tasolla. Olkoon niiden kaltevuus ja niiden katoamispisteillä horisontin kanssa koordinaatit; ja Koska nämä viivat ovat ortogonaalisia, . Siksi saamme suoraan kaavasta (31).
Näitä kahta katoamispistettä kutsutaan joskus konjugoituneeksi katoamispisteeksi, koska niiden tulo on negatiivinen, ne sijaitsevat aina kuvan keskiviivan vastakkaisilla puolilla, kuten kuvassa 10 on esitetty. 10.4 Konjugoidut katoamispisteet ovat esimerkki siitä, kuinka tietty objektien rajoitus (eli ortogonaalisuus) voidaan muuntaa yksinkertaiseksi kuvien rajoitukseksi.
Vaakasuuntaiset linjat muodostaa pariton (ei tarvita sulkevaa tunnistetta).
ja ne voivat olla varsin ainutlaatuisia sisustuselementtejä. Tekstin muotoilu lisäämällä vaakasuuntaisia HTML-rivejä antaa sivulle tietyn logiikan tekstin esittämiselle ja helpottaa myös lukijan korostamaan tietolohkoja, joita on tutkittava peräkkäin. Tag
voi muodostaa erivärisiä, paksuisia ja pituisia vaakaviivoja. Ja tämä on melko yksinkertainen tehdä, kuten alla olevissa esimerkeissä näkyy.
Muuten, voit käyttää myös lohkotyyliominaisuuksia A pystysuorat viivat muodostuvat itse asiassa samoihin lohkoihin Tässä on esimerkki punaisesta pystyviivasta vasemmalla. Tässä on esimerkki punaisesta pystyviivasta oikealla. Tässä on esimerkki vaakasuuntaisesta punaisesta viivasta yläreunassa. Alla on esimerkki punaisesta vaakaviivasta. Tässä on esimerkki vaaka- ja pystysuorista viivoista. kiinnitä huomiota tyylimääritteeseen Ympyrä muodostettu tunnisteella Tässä on esimerkki punaisesta pystyviivasta vasemmalla. Tässä on esimerkki punaisesta pystyviivasta oikealla. Alla on esimerkki punaisesta vaakaviivasta. Tässä on esimerkki vaaka- ja pystysuorista viivoista. Ja jos analysoimme näitä esimerkkejä, voimme tehdä melko yksinkertaisen johtopäätöksen, että pystyviivat muodostuvat parhaiten käyttämällä ja väliviivavaihtoehtoja voidaan tehdä käyttämällä tag Hei kaikki! Tänään kerron sinulle kuinka tehdä vaakasuora viiva html:n avulla. Itse asiassa tarve tehdä vaakasuora viiva syntyy melko usein esimerkiksi silloin, kun sinun on erotettava tekstin osa toisesta. Tämä voidaan tehdä css:llä. Tätä varten liitän tarvittavan tekstiosan lohkoon div-tunnisteen avulla ja sitten style.css-tiedostoon tai suoraan html-koodiin kirjoitamme tämän lohkon ominaisuudet ylä- tai alareunaan käyttämällä border-top ja raja-ala. Tässä on esimerkki:
Tässä tapauksessa asetin tyylin css:llä suoraan html-koodista ja tein yläreunuksen kiinteäksi ja alareunukseksi pilkuksi. Tältä se näyttää sivulla: Vaakaviiva käyttäen css. Tällä menetelmällä on etunsa: Haittoja ovat koodin suhteellinen kömpelyys. Kuitenkin, kuten kävi ilmi, voit lisätä vaakaviivan tekstiin html:llä. Samaan aikaan sinun ei tarvitse edes mennä css: ään. Tunnistetta käytetään tähän Tämän tunnisteen ensimmäinen ominaisuus on, että siinä ei ole paria sulkevaa tunnistetta. Sitä voidaan käyttää missä tahansa html-koodissa tunnisteiden välissä Tällä tunnisteella on seuraavat attribuutit: Tässä on esimerkki html-koodista: Ja tältä se tulee näyttämään: Kuten näet, tällä menetelmällä on haittoja: Mutta tämä menetelmä on paljon yksinkertaisempi. Nyt tiedät tarkalleen, kuinka voit luoda pysty- ja vaakaviivoja verkkosivustollesi. Voit esittää kysymyksiä kommenteissa. Ja älä unohda tilata
Ja
tietyssä paikassa. Totta, tämä vaihtoehto ei välttämättä aina ole kätevä, esimerkiksi maalaus ei aina kannata, mutta monissa tapauksissa on mahdollista ratkaista ongelmia tällä tavalla. Esimerkiksi muodostetun viivan sisällä tag
et voi lisätä tekstiä. Mutta lohkojen sisällä tämä on mahdollista ja sitä harjoitetaan jatkuvasti. Joten sinun on valittava vaihtoehto suunnitteluvaatimusten mukaan.
Pystyviivat HTML:ssä.
Ja
Ainoa haitta on, että tunniste ei ole käytettävissä kaikissa selaimissa.
toimii samoin, mutta sinun on yritettävä
ja säädä sivua tai käytä päivitettyjä selaimia.
Vaakasuuntaisten viivojen muodostuminen:
Tag
lisää sivulle vaakasuuntaisen viivan ja sillä on seuraavat attribuutit:Tunnisteen syntaksi
:Esimerkkejä vaakasuuntaisista viivoista HTML:ssä:
Esimerkkejä pystysuorista viivoista HTML:ssä:
Syntaksi esimerkkien pysty- ja vaakasuuntaisista viivoista HTML:ssä:
raja- vasen (-oikea): 4px kiinteä #FF0000;:
Mutta kaikki riippuu mielikuvituksesta ja pyynnöistä. Joten valitse ja muotoile.Vaaka- ja pystysuorat viivat css:llä
. Vaakaviiva html-tunnisteen avulla
.
Suosittelemme
HTTP-suoratoisto: parhaat reseptit
