Tervitused kõigile lugejatele. Aeg-ajalt seisavad meistrid silmitsi probleemiga, kuidas teha HTML-i või CSS-i abil horisontaalset või vertikaalset joont. Sellest ma teile täna räägingi.
read CSS-is
Joone tegemiseks on mitu võimalust. Üks selline viis on CSS-i kasutamine. Täpsemalt Borderi abiga. Vaatame näidet.
Ja siin on tulemus.
Horisontaalne ja vertikaalne joon css-iga.
CSS-is saab jooni tõmmata piirioperaatori abil. Kui soovite lihtsalt fikseeritud äärislaiusega ristkülikut, saate lihtsalt kasutada seda operaatorit ja anda sellele väärtuse. Näiteks border:5px solid #000000; tähendab, et kasti äärised on musta värviga 5 pikslit laiad.
Kui aga pole vaja seada mitte kõiki piire, vaid ainult mõned, siis tuleb täpselt määrata, milliseid piire vaja on ja milline väärtus neist igaühel on. Need on operaatorid:
- border-top – määrab ülemise äärise väärtuse
- border-bottom – määrab alumise piiri väärtuse
- border-left – määrab vasaku äärise väärtuse
- border-right – määrab parempoolse äärise väärtuse.
Vertikaalne ja horisontaalne joon HTML-is
Samuti saate luua ridu HTML-is endas. Selleks saate kasutada märgendit hr.
Sel juhul tõmmatakse ühe piksli kõrguse ja täislaiusega horisontaaljoon.
Kuid see silt saate määrata teatud väärtused.
- Laius– määrab joone laiuse väärtuse.
- värvi- määrab joone värvi.
- Joonda- määrab vasakule, keskele, paremale joonduse
- suurus– määrab joone paksuse väärtuse pikslites.
Märgendi hr abil saate määrata ka vertikaalse joone. Kuid sel juhul peate uuesti stiilide poole pöörduma.
Sel juhul tõmmatakse vertikaalne joon saja piksli kõrgusele, ühe piksli paksusele ja viie piksli pikkune taane.
Järeldus.
Noh, nüüd teate, kuidas saate määrata vertikaalse ja horisontaalse joone. Ridasid saab määrata nii tavalistel HTML-i kasutavatel saitidel kui ka CMS-i kasutaval saidil, näiteks WordPressis, kuid sel juhul peate lülituma HTML-režiimi.
Noh, kui teil on veel küsimusi, küsige neid kommentaarides.
Tere, minu koolitussaidi lojaalsed tellijad ja ajaveebi külalised. Kas olete kunagi märganud veebiressursside lehtedel, kus vertikaalne joon html-is eraldab osa teabest? Seega on see väga lihtne, kuid tõhus viis juhtida lugeja tähelepanu õigele sisule.
Seetõttu tahan selle väljaande pühendada vertikaalsete joonte seadmise tööriistade ja siltide uurimisele ning öelda, kus veel saate seda tehnikat kasutada. Ja nüüd alustame!
Milleks kasutatakse teksti vertikaalset eraldamist?
Arendajad ja veebidisainerid püüavad luua ainulaadset saiti, millel on mugav ja intuitiivne kasutajaliides. Kõik see saavutatakse erinevate tööriistade ja lähenemisviiside ning css stiililehtede abil.
Kõige sagedamini asetatakse rõhumärgid lehtede tekstisisu. Selleks kasutatakse:
- spetsiaalsed sildid nagu < tugev>, < i>, < suur> ja teised;
- teksti jagamine lõikudeks ja erineva tasemega pealkirjade sisestamine;
- objektide valik kasutades erinevaid ;
- fontide stiili muutmine;
- raamimisraamide sissetoomine sisusse jne.
Vaatame viimast punkti.
Raamistik- See on levinud mehhanism teatud objektide hulgi eraldamiseks, veebisisu esiletõstmiseks ja lihtsalt kaunistamiseks. Need luuakse vara abil piir.
See css-keele element on väga paindlik ja võib määrata raami nii valitud objekti kõikidele külgedele kui ka ainult ühele küljele. Sisestasin olulised omadused tabelisse.
Kõik ülaltoodud omadused võivad juhtida joone paksust, värvi ja esitlusstiili.
Tahan märkida, et piirid võivad välja näha mitte ainult sirgjoontena. Need võivad ilmuda ka:
- punkt(punktidega)
- täpiline(kriips)
- lineaarne(tahke)
- kahekordne(kahekordne)
- mahuline(soon, sisestus, harja ja esiosa) raam
- või korrake esivanema stiilisätteid, kasutades pärimismärksõna.
Mõnikord kohtan selliseid küsimusi nagu: "Kas piiri saab kujutada kujutisena ja kuidas seda teha?". Vastus on, et saate. Ja seda tehakse väga lihtsalt.
Selleks pakkusid css-i loojad elemendi ääris-pilt, milles peate määrama pildi tee ja kirjeldama äärise mõlema külje paksust.
Praktiline osa
Ma arvan, et on aeg teooria praktikasse viia. Teie ülesandeks on kirjutada tekstilõuend ja eraldada põhipunktid või tsitaadid vertikaalsete joontega. Näidiskood on näidatud allpool:
| 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 |
See tekstilõik on väga oluline.
|
Esimene lõik. Vasaku äärise kasutamine
Esimeses lõigus tõstame vasakpoolse topeltlilla joonega esile teksti võtmepunkti.
Teine lõik. Piiripildi kasutamine
Teises lõigus tõstame teksti võtmepunkti esile vasakul asuva vertikaalse joonega pildi kujul.
Nagu ise näete, on materjal väga kerge, kuid sellest võib kasu olla väga erinevate ülesannete lahendamisel. Sellega jätan teiega hüvasti. Ärge unustage tellida ja kutsuda oma sõpru meie sõbralikku meeskonda. Headaega!
Lugupidamisega Roman Tšueshov
Piltidel on mitmeid huvitavaid omadusi, mida saab tuletada otsese teisenduse (18) rakendamisel lihtsates füüsilistes olukordades. Meie praeguse eesmärgi jaoks ei vaja me valemi (18) täielikku üldistust; efekti, mida soovime näidata, saab näidata isegi siis, kui kõik kaamera asendit iseloomustavad parameetrid on nulliga, välja arvatud üks kaldenurk . Vastavalt sellele võtame ja teisendame avaldise (18) lihtsamale kujule:
Uurime vertikaalse joone kujutise omadusi. Objekti vertikaaljoont tõmbab objekti punkt
kus on selle punkti koordinaadid, kus sirge lõikub põranda tasapinnaga, ja z on vaba parameeter, mille väärtus võetakse kõigi reaalarvude hulgast. Kui asendame valemiga (27) v ja jätame kahest võrrandist välja vaba parameetri z, saame kujutise tasapinna sirgjoone võrrandi
Selle lihtsa võrrandi analüüs annab hulga huvitavaid tähelepanekuid. Kõige tähtsam on see, et lõikepunkt Z-teljega on sõltumatu vertikaaljoone enda asendist; see sõltub ainult sellest, kas joon on tegelikult vertikaalne. Seega läbivad antud kaamera geomeetria puhul kõigi vertikaalsete joonte kujutised vertikaalse löögi ühte punkti, mille koordinaadid pildil on võrdsed .
Riis. 10.4. Kaduvad punktid.
Riis. Joonis 10.4 illustreerib seda efekti üksiku risttahuka kujutisel, mis on tehtud kaameraga, mis on väga kallutatud allapoole Lugeja saab kontrollida võrrandi (28) muid intuitsiooniga kooskõlas olevaid omadusi. Näiteks kui seda suurendada nullist 90°-ni, liigub vertikaalne kadumispunkt kujutise tasapinna keskele ja joone kalle muutub laugemaks. Samamoodi muutub see efekt iga kaamera nurga puhul märgatavamaks, kui objekti vertikaalsed jooned liiguvad vaatevälja perifeeria poole (st kui
Muutub suureks võrreldes ). Seega saab vertikaalset kadumispunkti määrata ainult kaamera parameetrite järgi ja see seab vertikaaljoonte piltidele lihtsa vajaliku tingimuse.
10.5.4. HORISONTAALSED JOOND JA HÕJUPUNKTID
Viimase näitena perspektiivteisenduste kasutamisest vaatleme mõnda horisontaaljoone kujutise omadust. Lihtsuse huvides käsitleme globaalse koordinaatsüsteemi põrandatasandil asuva objekti joone kujutist. Igal sellisel joonel asuva objekti punktil on vastavalt koht ja b - joone kalle ja selle joonega lõigatud lõigu pikkus Y-koordinaatide teljel Kuna tahame jäädvustada pilti objektist, mis asub põrandal on parem, kui kaamera tõstab põrandast kõrgemale ja võib olla suunatud alla. Vastavalt sellele võtame kaamera geomeetrilised parameetrid kujul ja laseme väärtusel olla positiivne ja - negatiivne. Nende parameetrite puhul on otseteisendus (18) lihtsustatud järgmiselt:
Pärast valemitesse (29) asendamist ja vaba parameetri x väljajätmist kahest võrrandist, saame kujutise tasapinna sirgjoone võrrandi
Ei selle graafilise sirge kalde ega selle koordinaattelgedega lõikumispunktide eriti lihtsaid omadusi pole; arvestage siiski selle kujutise joone ja selle pildi horisondi joonega. Mis tahes kujutise horisondijoon on määratletud kui kujutise tasandi ja põrandaga paralleelse läätse keskpunkti läbiva tasapinna ristumiskoht. Nagu on näidatud joonisel fig. 10.5 on horisondijoone võrrand (kujutise koordinaatides) kujul Ilmselgelt määratakse kujutise sirge (30) ja horisondijoone lõikepunkti X-koordinaat avaldise (30) võrdsustamise teel väärtusega - . Saadud võrrandi lahendamine
horisondi lõikepunkti koordinaadi suhtes leiame, et
Selle tulemuse võib saada ka asendades avaldise (29) esimese võrrandiga ja minnes piirini, kuna x kaldub lõpmatuseni. Seetõttu nimetatakse horisondiga ristumispunkti täiesti vääriliselt horisontaalseks kadumispunktiks või kadumise punktiks antud sirge kujutise horisondiga; see on piir, milleni pildi punkt kaldub, samal ajal kui objekti punkt liigub mööda sirgjoont lõpmatusse
Riis. 10.5. Horisondijoone arvutamise juurde.
Väljendi kohta saame teha mitmeid huvitavaid märkusi (31). Esiteks pange tähele, et kadumispunkt ei sõltu kaamera kõrgusest objekti joont sisaldava tasapinna kohal. Teiseks, kadumispunkt ei sõltu objektirea võrrandis olevast ülekandeparameetrist b. Seetõttu võime teha olulise järelduse, et kahel põrandatasandiga paralleelsel sirgel on sama kadumispunkt siis ja ainult siis, kui nad on üksteisega paralleelsed. Lõpuks oletame, et meil on kaks risti asetsevat objektijoont, mis asuvad põrandaga paralleelsel tasapinnal. Olgu nende nõlvadel ja nende kaduvatel punktidel koos horisondiga koordinaadid; ja Kuna need jooned on ortogonaalsed, . Seetõttu saame otse valemist (31).
Neid kahte kadumispunkti nimetatakse mõnikord konjugeeritud kadumispunktideks. Kuna nende korrutis on negatiivne, asuvad need alati kujutise keskjoone vastaskülgedel, nagu on näidatud joonisel fig. 10.4. Konjugeeritud kadumispunktid on näide sellest, kuidas antud objektipiirangu (nimelt ortogonaalsuse) saab teisendada lihtsaks pildipiiranguks.
horisontaalsed jooned on moodustatud paaritu (sulgevat silti pole vaja) sildi abil
ja võivad olla üsna ainulaadsed kujunduselemendid. Horisontaalsete HTML-joontega tekstipaigutus annab lehele teatud tekstiesitluse loogika, samuti hõlbustab lugejal järjestikust uurimist vajavate teabeplokkide esiletõstmist. Tag
võib moodustada erineva värvi, paksuse ja pikkusega horisontaalseid jooni. Ja seda teha on üsna lihtne, nagu on näidatud allolevates näidetes.
Muide, saate kasutada ka plokkide stiili omadusi A vertikaalsed jooned moodustatakse tegelikult samades plokkides Siin on näide vasakul olevast punasest vertikaalsest joonest. Siin on näide paremal asuvast punasest vertikaalsest joonest. Siin on näide punasest horisontaalsest joonest ülaosas. Siin on näide punasest horisontaalsest joonest allosas. Siin on näide horisontaalsetest ja vertikaalsetest joontest. pane tähele stiiliatribuuti Märgendi loodud suhtlusring Siin on näide vasakul olevast punasest vertikaalsest joonest. Siin on näide paremal asuvast punasest vertikaalsest joonest. Siin on näide punasest horisontaalsest joonest allosas. Siin on näide horisontaalsetest ja vertikaalsetest joontest. Ja kui neid näiteid analüüsida, saame teha üsna lihtsa järelduse, et vertikaalseid jooni saab kõige paremini moodustada kasutades ja vahepealseid reavalikuid saab teha tag Tere kõigile! Täna räägin teile, kuidas html-i abil horisontaalset joont teha. Tegelikult tekib horisontaalse joone tegemise vajadus üsna sageli, näiteks siis, kui on vaja eraldada üks tekstiosa teisest. Seda saab teha css-iga. Selleks panen vajaliku tekstiosa plokki kasutades div märgendit ja seejärel faili style.css või otse html-koodi kirjutame selle ploki atribuudid ülemise või alumise äärise jaoks kasutades border-top. ja ääris-alumine. Siin on näide:
Sel juhul kujundasin selle css-iga otse html-koodist ja tegin ülemise äärise pideva ja alumise punktiirjoone. Siin näeb see lehel välja: Horisontaalne joon css-iga. Sellel meetodil on oma eelised: Puuduste hulka kuulub koodi suhteline mahukus. Kuid nagu selgus, saate html-i abil teksti sisestada horisontaalse joone. Samas pole vaja isegi css-i ronida. Selleks kasutatakse silti. Selle sildi esimene omadus on see, et sellel ei ole seotud lõpumärgendit. Seda saab kasutada kõikjal HTML-koodis siltide vahel Sellel sildil on järgmised atribuudid: Siin on html-koodi näide: Ja see näeb välja selline: Nagu näete, on sellel meetodil oma puudused: Kuid see viis on palju lihtsam. Nüüd teate täpselt, kuidas oma saidil vertikaalseid ja horisontaalseid jooni teha. Saate oma küsimusi esitada kommentaarides. Ja ärge unustage tellida
Ja
teatud kohas. Tõsi, see valik ei pruugi alati mugav olla, näiteks värvimine ei õigusta end mõnikord alati, kuid paljudel juhtudel on niimoodi võimalik probleeme lahendada. Näiteks moodustatud joone sees tag
ärge sisestage teksti. Ja plokkide sees - see on võimalik ja seda pidevalt harjutatakse. Seega peate valima oma valiku sõltuvalt disaininõuetest.
Vertikaalsed jooned HTML-is.
Ja
Ainus ebamugavus on see, et silt pole kõigis brauserites saadaval.
töötab samamoodi, kuid siin peate proovima
ja kohandage lehte või kasutage värskendatud brausereid.
Horisontaalsete joonte moodustamine:
Tag
lisab lehele horisontaalse joone ja sellel on järgmised atribuudid:Sildi süntaks
:HTML-i horisontaalsete joonte näited:
HTML-i vertikaalsete joonte näited:
HTML-i vertikaalsete ja horisontaalsete joonte näidete süntaks on:
piir- vasak(-parem): 4px solid #FF0000;:
Kuid kõik sõltub kujutlusvõimest ja soovidest. Nii et vali ja kujunda.horisontaalsed ja vertikaalsed jooned css-iga
. horisontaalne joon html-sildiga
.
Soovitatav
Erinevad arvutiprogrammid geoloogilisteks uuringuteks ja modelleerimiseks
