Lai uzsvērtu dažus īpaši svarīgus vietnes elementus, nenāktu par ļaunu izmantot visus šim paredzētos CSS stilus un rekvizītus. Protams, jums nav pārāk jāuztraucas par tekstu un tas ir jāizceļ, piemēram, treknrakstā vai slīprakstā, jāmaina fons vai jāveido rāmis ap tekstu. Bet viena no piedāvātajām metodēm ne vienmēr ir piemērota. Pieņemsim, ka jums ir teksts, kas ir jāsadala tā semantiskās slodzes specifikas dēļ. Šeit palīgā nāk HTML un CSS rekvizīti.

Kā izveidot rindiņu tekstā, izmantojot CSS

Lai īstenotu savus plānus, mums būs jāsazinās style.css failu, ierakstot tajā atbilstošo rekvizītu robeža. Tādējādi virs, zem vai noteiktā teksta pusē parādīsies rindiņa. Savukārt par līnijas parādīšanu ir atbildīgi vairāki rekvizīti, proti:

- robeža-top– horizontāla līnija, kas atrodas virs teksta;

- robeža-labā– vertikāla līnija, kas atrodas pa labi no teksta;

- robeža-apakša– horizontāla līnija, kas atrodas zem teksta;

- robeža-kreisais– vertikāla līnija, kas atrodas kreisajā pusē.

Kā izveidot rindiņu html

Izmantojot CSS īpašības jūs varat ievadīt visas nepieciešamās vērtības, rediģējot HTML kodu. Lai to izdarītu, jums jāiet uz vietnes administratīvo daļu. Izvēlieties kādu no publicētajiem materiāliem, pārslēdzieties teksta redaktors HTML koda rediģēšanas režīmā un pievienojiet CSS rekvizītus. Paraugu var redzēt zemāk.

Īss komandu apraksts

- platums- līnijas garums;

- ciets- nepārtraukta līnija;

- punktēts- punktētā līnija.

Lai dziļāk izprastu stilus, iesaku izlasīt šo.

Ir jāsaprot, ka vietnes koda izmaiņu veikšanas procesā īpašības, kas nosaka līnijas veidu, tās biezumu un krāsu, tiek uzskaitītas, atdalot tās ar atstarpi.

Šai metodei ir vairākas priekšrocības:

Plašas iespējas, ar kurām jūs varat izgatavot gandrīz jebkuru līniju.

Vienkārša visu nepieciešamo izmaiņu veikšana tieši HTML kodā. Tas ievērojami vienkāršo uzdevumu nepieredzējušiem vietņu veidotājiem.

Kā izveidot taisnu horizontālu līniju, izmantojot HTML tagu

---

Pirmā lieta, uz ko vēlos vērst jūsu uzmanību, ir tas, ka šim tagam, neskatoties uz visiem html smalkumiem un principiem, nav noslēguma taga. To var izmantot jebkur html kods, starp tagiem Un

.

Atzīmju atribūti

---

- platums– atbild par līnijas garumu. Var norādīt procentos vai pikseļos.

- Izmērs- līnijas biezums. Norādīts pikseļos.

- krāsa– nosaka līnijas krāsu.

- izlīdzināt– atribūts, kas atbild par līniju izlīdzināšanu. Savukārt komanda ir saistīta ar viņu.

Sveiki visiem! Šodien es jums pastāstīšu, kā izveidot horizontālu līniju, izmantojot html.

Patiesībā nepieciešamība izveidot horizontālu līniju rodas diezgan bieži, piemēram, ja ir jāatdala viena teksta daļa no citas.

Horizontālās un vertikālās līnijas, izmantojot css

To var izdarīt, izmantojot css. Lai to izdarītu, es ievietoju vajadzīgo teksta sadaļu blokā, izmantojot tagu div, un pēc tam failā style.css vai tieši html kodā mēs ierakstām šī bloka rekvizītus augšējai vai apakšējai robežai, izmantojot border-top un apmale-apakša. Šeit ir piemērs:

Šajā gadījumā es iestatīju stilu, izmantojot css tieši no html koda, un izveidoju augšējo apmali viengabalainu un apakšējo apmali punktētu.

Lūk, kā tas izskatīsies lapā:

Horizontāla līnija, izmantojot css.

Šai metodei ir savas priekšrocības:

• Plašs iestatījumu klāsts, kas ļauj iestatīt gandrīz jebkura veida līnijas;
• Varat izveidot gan horizontālas, gan vertikālas līnijas. Lai izveidotu vertikālas līnijas, jums jāmaina apmale-augšējā uz apmali-kreiso un apmale-apakšā uz apmale-right.

Trūkumi ietver koda relatīvo apgrūtinājumu.

Tomēr, kā izrādījās, jūs varat ievietot tekstā horizontālu līniju, izmantojot html. Tajā pašā laikā jums pat nav jāiedziļinās css. Šim nolūkam tiek izmantots tags

Horizontāla līnija, izmantojot html tagu

---

Šī taga pirmā iezīme ir tāda, ka tai nav pārī savienota noslēguma taga. To var izmantot jebkur html kodā starp tagiem Un

.

Šim tagam ir šādi atribūti:

• Platums– nosaka mūsu horizontālās līnijas garumu pikseļos vai procentos;
• Krāsa– nosaka līnijas krāsu;
• Izlīdzināt– nosaka līnijas izlīdzinājumu uz labo malu – pa labi, uz kreiso malu – pa kreisi, centrā – uz centru;
• Izmērs– līnijas biezums pikseļos.

Šeit html piemērs- kods.

Šķiet, kāpēc varētu būt vajadzīgas četras metodes? Galu galā gandrīz katrs cilvēks izmanto vienu metodi, pie kuras viņš ir pieradis. Piemēram, es vairākas reizes nospiedu Shift un domuzīmes taustiņu, un tā es ieguvu horizontālu līniju.

Bet ko darīt, ja rezultātā veidojas punktēta līnija, bet jums ir nepieciešama viengabalaina līnija?
- Visticamāk, tastatūras taustiņš Shift ir bojāts. Šeit palīgā nāks citas metodes.

3.
4.
5.

Iespējams, visizplatītākais veids, kā programmā Word izveidot rindiņu, ir izmantot pāris tastatūras taustiņus.

I Plāna, bieza, dubultā, punktēta līnija, izmantojot tastatūru

Zemāk ir tastatūras attēls ar angļu valodas izkārtojumu, bet bez krievu valodas izkārtojuma, taču tam nav nozīmes, jo mūs interesē tikai trīs taustiņi: Shift, domuzīme un Enter.

Rīsi. 1. Trīs tastatūras taustiņi: Shift, domuzīme un Enter, lai programmā Word būtu nepārtraukta horizontāla līnija

Izmantojot šos trīs taustiņus, programmā Word varat novilkt nepārtrauktu horizontālu līniju: punktētu vai viengabalainu, plānu vai biezu, garu vai īsu.

1) Nospiežot taustiņu “-” (domuzīme) vairākas reizes Vārdu redaktors mēs iegūstam jebkura garuma punktētu līniju.

Darīt tievs gara līnija visā lapas platumā:

• Tastatūrā atrodam taustiņu “domuzīme” (pa labi no taustiņa “nulle”, zaļajā rāmī 1. attēlā).
• No jaunas (!) Word rindas nospiediet šo taustiņu vairākas reizes: -
• Un pēc tam nospiediet taustiņu “Enter” (). Dažas iespiestas domuzīmes pēkšņi pārtaps nepārtrauktā horizontālā plānā līnijā visā lapas platumā.

2) Vienlaicīgi nospiežot taustiņu Shift un “-” (domuzīmi), tiek drukāta NEVIS domuzīme, bet gan pasvītra _________. Tādā veidā jebkurā dokumentā varat izveidot patvaļīga garuma nepārtrauktu līniju.

Rīsi. 2. Tieva un bieza horizontāla līnija programmā Word

Tagad drukāsim tauki horizontāla līnija visā lapas platumā:

• Atkal atrodam to pašu “domuzīmes” taustiņu, kā arī taustiņu Shift (kreisajā vai labajā pusē, kā vēlaties). Nospiediet Shift, turiet un neatlaidiet.
• Un tagad no jaunas (!) rindas noklikšķiniet uz domuzīmes vairākas reizes (piemēram, 3–4 reizes) (neatlaižot taustiņu Shift): ___. Atlaidiet Shift.
• Tagad nospiediet taustiņu Enter. Jūs redzēsit biezu horizontālu nepārtrauktu līniju.

Apkoposim dažus rezultātus tabulas veidā:

(Noklikšķiniet, lai palielinātu) Līnijas programmā Word, izmantojot tastatūru

­­­­­­­­­­­­­­­­­­­­­

II rinda programmā Word, izmantojot tabulu

Horizontālu līniju var iegūt, izmantojot vienas šūnas tabulu (1x1), kurā ir iekrāsota tikai augšējā vai apakšējā apmale (būs redzama), bet pārējās trīs tabulas malas ir ar nenokrāsotas apmales (tās būs neredzamas) .

Novietojiet kursoru vietā, kur jāatrodas līnijai. Word augšējā izvēlnē noklikšķiniet uz:

• Ievietot (1 3. attēlā),
• Tabula (2 3. attēlā),
• Viena šūna (3 3. attēlā).

Rīsi. 3. Kā programmā Word ievietot 1x1 tabulu (no vienas šūnas).

Rezultāts būs viena tabula liels būris(1x1):

Atliek tikai noņemt apmales no trim pusēm tabulā 1x1. Priekš šī

• dodieties uz cilni "Sākums" (1 4. attēlā),
• tad blakus “Fonts” atrodam “Paragraph” un apmales (2 4. attēlā),
• noņemiet visas apmales, noklikšķinot uz “Bez robežām” (3 4. attēlā),
• atlasiet “Augšējā robeža” vai “Apakšējā robeža” (4 4. attēlā).

Rīsi. 4. Kā noņemt apmales atlasi no Word tabulas (padarīt apmales neredzamas)

Es to skaidri parādu videoklipā (raksta beigās).

Starp citu, attēlā. 3 ir skaidrs, ka ir vieglāks veids. Programmā Word varat novietot kursoru rindas sākumā un noklikšķināt uz “Horizontālā līnija” (5 4. attēlā):

III rinda programmā Word, izmantojot zīmējumu

Ievietot (1 zīm. 5) - Formas (2 zīm. 5) - tas ir vēl viens veids, kā iegūt horizontālu līniju programmā Word.

Lai līnija būtu stingri horizontāla, turiet nospiestu taustiņu Shift un vienlaikus zīmējiet līniju.

Rīsi. 5. Kā programmā Word novilkt līniju

IV rinda programmā Word, izmantojot ekrāna tastatūru

Lai atrastu ekrāna tastatūru, meklēšanā ievadiet frāzi “ekrāna tastatūra”, lai iegūtu papildinformāciju operētājsistēmai Windows 7 un Windows 8.

Operētājsistēmā Windows 10 ekrāna tastatūru var atrast arī meklēšanas joslā ierakstot “on-screen keyboard”.

Rīsi. 6. Ekrāna tastatūra

Mēs izveidosim horizontālu līniju tāpat kā pirmajā variantā ar parastā tastatūra. Ekrāna tastatūrā būs nepieciešamas trīs pogas: domuzīme, Shift un Enter.

1 Desh un Enter

AR jauna līnija programmā Word vairākas reizes noklikšķiniet uz domuzīmes (6. attēlā 1) un nospiediet taustiņu Enter. Jūs iegūsit plānu horizontālu līniju.

2 Shift, domuzīme un Enter

Programmā Word jaunā rindiņā vispirms noklikšķiniet uz Shift (6. attēlā 2), pēc tam — uz Dash (6. att. 1). Jūs saņemsiet pasvītrojumu. Mēs to atkārtosim vēl 2 reizes un pēc tam nospiediet taustiņu Enter. Rezultātā mēs redzēsim biezu horizontālu līniju.

Sveiciens visiem lasītājiem. Laiku pa laikam amatnieki saskaras ar problēmu, kā izveidot horizontālu vai vertikālu līniju ar izmantojot HTML vai ar izmantojot CSS. Par to es jums šodien pastāstīšu.

Līnijas CSS

Ir vairāki veidi, kā izveidot līnijas. Viens no šādiem veidiem ir izmantot CSS. Vai drīzāk, izmantojot robežu. Apskatīsim piemēru.

Un tā rezultātā notiks.

Horizontāla un vertikāla līnija, izmantojot css.

Līnijas var zīmēt CSS, izmantojot operatoru Border. Ja jums vienkārši nepieciešams taisnstūris ar fiksētu rāmja platumu, varat vienkārši izmantot šo operatoru un piešķirt tam vērtību. Piemēram border:5px solid #000000; nozīmē, ka bloka apmaļu platums ir vienāds ar 5 melnas krāsas pikseļiem.

Taču, ja ir jāuzstāda nevis visas robežas, bet tikai dažas, tad jānorāda, kuras robežas ir vajadzīgas un kāda vērtība katrai no tām būs. Šie ir operatori:

• border-top – iestata augšējās apmales vērtību
• border-bottom – iestata apakšējās apmales vērtību
• border-left – iestata kreisās apmales vērtību
• border-right – iestata labās apmales vērtību.

Vertikāla un horizontāla līnija HTML

Jūs varat izveidot rindiņas pašā HTML. Lai to izdarītu, varat izmantot hr tagu.

Šajā gadījumā tiks novilkta horizontāla līnija viena pikseļa augstumā un pilnā platumā.

Bet šim tagam var piešķirt arī dažas vērtības.

• Platums– iestata līnijas platuma vērtību.
• Krāsa– iestata līnijas krāsu.
• Izlīdzināt– iestata izlīdzināšanu pa kreisi, centrā, pa labi
• Izmērs– iestata līnijas biezuma vērtību pikseļos.

Izmantojot hr tagu, varat iestatīt arī vertikālu līniju. Bet šajā gadījumā jums atkal būs jāķeras pie stiliem.

Šajā gadījumā vertikāla līnija tiks novilkta simts pikseļu augstumā, viena pikseļa biezumā un piecu pikseļu atkāpē.

Secinājums.

Nu, tagad jūs zināt, kā iestatīt vertikālu un horizontālu līniju. Rindas var iestatīt gan parastajās vietnēs, izmantojot HTML, gan tās var iestatīt vietnē, kas izmanto CMS, piemēram, WordPress, taču šajā gadījumā jums būs jāpārslēdzas uz HTML režīmu.

Nu, ja jums ir vēl kādi jautājumi, uzdodiet tos komentāros.

No autora: Es jūs apsveicu. Nepieciešamība vienā rindā uzrādīt vairākus tīmekļa lapas blokus ir ļoti izplatīts uzdevums, ar ko saskaras izkārtojuma dizaineri. Tas notiek gandrīz katras veidnes izkārtojuma laikā, tāpēc jebkurā gadījumā mums visiem ir jāzina un jāpiemēro pamata veidi, kā mainīt bloku uzvedību.

Pirms mēs aplūkojam visizplatītākos paņēmienus, es vēlētos atcerēties nelielu teoriju. Tīmekļa lapas elementi ir sadalīti bloka un iekļautajos elementos. Un atšķirība starp tiem ir ļoti vienkārša – vienā rindā var likt mazos burtus, bet bloķētos nevar. Protams, atšķirības ar to nebeidzas, taču šī ir galvenā atšķirība. Blokiem jau var būt polsterējums augšā un apakšā (mazajiem burtiem nav), un tiem var piemērot vairāk rekvizītu.

Pamata veidi, kā sakārtot blokus CSS

Mēs neko nesarežģīsim, ir 3 galvenie veidi:

Pārvērst blokus par iekļautiem elementiem. Šajā gadījumā bloka īpašības tiek zaudētas, tāpēc šī opcija gandrīz nekad netiek izmantota

Izveidojiet nepieciešamos elementus bloku līniju. Šis ir īpašs veids, kurā elements saglabā savas īpašības, bet tajā pašā laikā ļauj tuvumā izvietot citus blokus.

Lieciet elementiem peldēt, izmantojot float īpašību.

Koncentrēsimies uz šīm iespējām. Mēs neņemsim vērā Flexbox, galda displeju un citus aspektus. Tātad, pieņemsim, ka mums ir 3 apakšvirsraksti.

1. virsraksts

2. virsraksts

3. virsraksts

Protams, visi css rekvizīti ir jāieraksta atsevišķā failā (style.css), kas jāsavieno ar html dokumentu. Šajā failā es uzrakstīšu minimālu stilu, lai mūsu apakšvirsraksti būtu vienkārši redzami.

h3( fons: #EEDDCD; )

Šeit tie ir lapā:

Viņi uzvedas kā bloki. Katrs atrodas uz savas līnijas, starp tiem ir ievilkumi. Ja vēlaties, varat arī iestatīt jebkuru iekšējo polsterējumu un darīt visu, ko vēlaties.

Pārveidosim to par līnijām un uzreiz pievienosim atkāpes. Lai to izdarītu, h3 atlasītājam jāpievieno šādi rekvizīti:

displejs: iekļauts; polsterējums: 30 pikseļi;

Lietojot šo tehniku, rodas 2 galvenās problēmas. Pirmais ir minimālais ievilkums. Tas veidojas, pateicoties tam, ka kodā starp blokiem ir viena atstarpe, kas veido šo atkāpi. Ja šī problēma ir jāatrisina, ir divas galvenās iespējas:

Html valodā ievietojiet vajadzīgo bloku kodu vienā rindā bez atstarpēm

Pievienojiet negatīvu piemali labajā pusē -4 pikseļi. Tik daudz aizņem viena vieta.

Otra problēma ir tāda, ka, ja elementiem ir atšķirīgs augstums, var rasties displeja problēmas. Visā visumā, labākais variants- peldošie bloki. Displeja vietā: inline-block mēs rakstām šo:

Bloķē rindā, izmantojot ietvaru

Es uzreiz teikšu, ka, ja jūs gatavojaties izmantot jebkuru parasto CSS ietvaru (piemēram, Bootstrap), tad viss joprojām ir daudz vienkāršāk. Viss CSS kods, kas atbild par elementu sakārtošanu, jau ir uzrakstīts, un atliek tikai iestatīt pareizās klases. Lai to izdarītu, vienkārši apgūstiet režģa sistēmu, un jūs bez lielām grūtībām varēsit izveidot vairāku kolonnu atsaucīgas veidnes. Vismaz tas būs daudz vieglāk, nekā rakstīt css no nulles.

Vēl viens izaicinājums rakstīt kodu no nulles nāk tieši tad, kad tas ir nepieciešams adaptīvs dizains. Protams, jūs varat to ieviest pats, ja jums pieder multivides vaicājumi, taču tas būs daudz grūtāk, ja jums ir sarežģīta veidne.

Piemēram, kad jums ir lielie ekrāni jābūt 4 kolonnām, uz vidējām - 3 un tālāk Mobilie tālruņi— 2. Izmantojot tādus ietvarus kā Bootstrap vai, pareizāk sakot, tā režģa palīdzību, kaut kā šāda ieviešana ir tikai dažu minūšu jautājums.

Gludi tulkojot tēmu Bootstrap ietvarā, es vēlreiz atzīmēšu, ka, ja jūs saskaraties ar uzdevumu izveidot sarežģītu adaptīvu veidni, tad vienkārši ir grēks neizmantot režģi. Lai to izdarītu, jums pat nav nepieciešams izveidot savienojumu. pilna versija ietvars — varat to pielāgot un apturēt tikai to, kas jums patiešām nepieciešams.

Varat uzzināt, kā strādāt ar ietvaru, izmantojot . Tur ir izskaidrota teorija, bet galvenais, ka ir prakse. Jūs izdomājat 3 adaptīvā veidne un iegūstiet lielisku pieredzi, kas ļaus jums izveidot vietnes pēc pasūtījuma vai pašam. Un, ja vēlaties bez maksas iepazīties ar ietvara priekšrocībām un iespējām, iesaku apskatīt mūsu rakstu sēriju par Bootstrap, kā arī par izkārtojumu vienkāršs izkārtojums. Novēlu veiksmi izkārtojumā un mājaslapas veidošanā kopumā.