Sveiki! Toliau įsisavinkime pagrindus HTML kalba. Pažiūrėkime, ką reikia parašyti, kad tekstas būtų sulygiuotas su centru, plotiu ar kraštais.

Pradėdami darbą, pažiūrėkime, kaip centruoti tekstą į tris dalis Skirtingi keliai. Paskutiniai du yra tiesiogiai susieti su stiliaus lapu. Tai gali būti CSS failas, jungiantis prie svetainės puslapių ir apibrėžiantis jų išvaizdą.

1 būdas – tiesioginis darbas su HTML

Iš tikrųjų tai gana paprasta. Žiūrėkite pavyzdį žemiau.

Sulygiuokite pastraipą centre.

Jei teksto fragmentus reikia perkelti kitu būdu, vietoj parametro „centras“ įveskite šias reikšmes:

• Justify – lygiuoti tekstą pagal puslapio plotį;
• dešinėje – dešiniajame krašte;
• kairėn - į kairę.

Pagal analogiją galite perkelti turinį, esantį antraštėse (h1, h2) ir konteineryje (div).

2 ir 3 metodas – stilių naudojimas

Aukščiau pateiktas dizainas gali būti šiek tiek pakeistas. Poveikis bus toks pat. Norėdami tai padaryti, turite parašyti kodą žemiau.

Teksto blokas.

Šioje formoje kodas įrašomas tiesiai į HTML, kad būtų sutelktas teksto turinys.

Yra dar vienas alternatyvus būdas pasiekti rezultatų. Jums reikės atlikti keletą žingsnių.

1 veiksmas. Pagrindiniame kode parašykite

Tekstinė medžiaga.

2 veiksmas. Į įtrauktą CSS failą įveskite šį kodą:

Rovno (teksto lygiavimas: centre;)

Atkreipiu dėmesį, kad žodis „rovno“ yra tik klasės, kurią galima pavadinti skirtingai, pavadinimas. Tai paliekama programuotojo nuožiūrai.

Pagal analogiją HTML galite lengvai padaryti tekstą centre, išlyginti ir sulygiuoti su dešiniuoju arba kairiuoju puslapio kraštu. Kaip matote, yra kur kas daugiau nei viena galimybė pasiekti savo tikslą.

Tik keli klausimai:

• Ar vykdote informacinį ne pelno projektą?
• Ar norite, kad jūsų svetainė veiktų gerai? paieškos sistemos?
• Ar norite užsidirbti pajamų internetu?

Jei visi atsakymai teigiami, tiesiog pažvelkite į integruotą požiūrį į svetainės kūrimą. Informacija bus ypač naudinga, jei jis dirba TVS WordPress.

Noriu atkreipti dėmesį, kad Jūsų pačių sukurtos internetinės svetainės yra tik vienas iš daugelio galimybių gauti pasyvias ar aktyvias pajamas internete. Mano tinklaraštis skirtas finansinėms galimybėms internete.

Ar kada nors dirbote eismo arbitražo, tekstų rašymo ir kitose veiklos srityse, kurios generuoja pirmines ar papildomas pajamas per nuotolinį bendradarbiavimą? Apie tai ir dar daugiau galite sužinoti dabar mano tinklaraščio puslapiuose.

Ateityje paskelbsiu dar keletą Naudinga informacija. Palaikykite ryšį. Jei pageidaujate, galite užsiprenumeruoti Workip atnaujinimus el. Prenumeratos forma yra žemiau.

Elementus galima išlyginti horizontaliai ir vertikaliai Skirtingi keliai. Metodo pasirinkimas priklauso nuo elemento tipo (bloko ar eilutinio), jo padėties tipo, dydžio ir kt.

1. Horizontalus sulygiavimas su bloko/puslapio centru 1.1. Jei bloko plotis: div ( plotis: 300 taškų; paraštė: 0 automatinis; /*centre elementą horizontaliai pirminiame bloke*/ )

Jei norite lygiuoti įterptinį elementą tokiu būdu, jį reikia nustatyti taip, kad būtų rodomas: blokas;

1.2. Jei blokas yra įdėtas į kitą bloką ir jo plotis nenurodytas: .wrapper (teksto lygiavimas: centre;) 1.3. Jei bloko plotis yra nustatytas ir jį reikia pataisyti pirminio bloko centre: .wrapper (pozicija: santykinė; /* nustatykite santykinę pagrindinio bloko padėtį, kad galėtume visiškai išdėstyti bloką jame * /) .box ( plotis: 400 pikselių; padėtis: absoliutus ; kairė: 50 %; paraštė-kairė: -200 pikselių; /*bloką perkelkite į kairę atstumu, lygiu pusei jo pločio*/ ) 1.4. Jei blokų plotis nenurodytas, galite juos centruoti naudodami pirminį įvyniojimo bloką: .wrapper (teksto lygiavimas: centre; /*centruoti bloko turinį*/) .box ( ekranas: inline-block; / *išdėstyti blokus iš eilės horizontaliai*/ paraštė-dešinė: -0.25em;/*pašalinti dešinę paraštę tarp blokų*/ ) 2. Vertikalus lygiavimas 2.1. Jei tekstas užima vieną eilutę, pavyzdžiui, mygtukams ir meniu elementams: .button (aukštis: 50px; eilutės aukštis: 50px; ) 2.2. Norėdami išlygiuoti bloką vertikaliai pirminio bloko viduje: .wrapper (pozicija: santykinė;) .box (aukštis: 100 pikselių; padėtis: absoliutus; viršuje: 50 %; paraštė: -50 pikselių 0 0 0; ) 2.3. Vertikalus lygiavimas pagal lentelės tipą: .wrapper ( ekranas: lentelė; plotis: 100 %; ) .box ( ekranas: lentelės langelis; aukštis: 100 pikselių; teksto lygiavimas: centre; vertikaliai lygiuoti: vidurys; ) 2.4. Jei dėžutės plotis ir aukštis turi būti nukreipta į pirminį langelį: .wrapper ( padėtis: santykinė; ) .box ( aukštis: 100 tšk.; plotis: 100 pikselių; padėtis: absoliutus; viršuje: 0; dešinėje: 0; apačioje : 0; kairėje: 0; paraštė: automatinis; perpildymas: automatinis; /*kad turinys nesiskirstytų*/ ) 2.5. Absoliutus padėties nustatymas puslapio / bloko centre naudojant CSS3 transformaciją:

jei elementui nurodyti matmenys

div ( plotis: 300 piks.; /*nustatykite bloko plotį*/ aukštį: 100 pikselių; /*nustatykite bloko aukštį*/ transformuokite: translate (-50%, -50%); pozicija: absoliuti; viršuje: 50 %; liko: 50 %;)

jei elementas neturi matmenų ir nėra tuščias

Šiek tiek teksto čia h1 ( paraštė: 0; transformuoti: išversti (-50%, -50%); padėtis: absoliuti; viršuje: 50%; kairėje: 50%; )

2.5. Absoliutus bloko pozicionavimas

puslapio centre

div ( plotis: 500 pikselių; aukštis: 100 pikselių; /* jei aukštis nenustatytas aiškiai, jis bus 100 % */ padėtis: absoliutus; viršuje: 0; apačioje: 0; kairėje: 0; dešinėje: 0; paraštė: automatinis ;)

bloko centre

.wrapper ( padėtis: absoliuti; ) .box ( plotis: 100 pikselių; aukštis: 100 pikselių; /* jei aukštis nėra aiškiai nustatytas, jis bus 100 % */ padėtis: absoliutus; viršuje: 0; apačioje: 0; kairėje: 0; dešinė: 0; paraštė: automatinė;)

Lankytojui turėtų būti lengva puslapyje rasti reikiamą informaciją. Tam naudojamos įvairios HTML žymos, taip pat kai kurioms išraiškoms išreikšti. Šiame straipsnyje bus aptariami darbo su lentelėmis niuansai, ypač jų derinimas.

Pagrindinės subtilybės

Visų pirma reikia pažymėti, kad š grafinę formą Duomenų pateikimas leidžia struktūrizuoti informaciją, o tai labai palengvina jos įsisavinimą. Beveik bet koks turinys gali būti lentelės langeliuose: nuo teksto iki vaizdo įrašo. Svarbu atsižvelgti ne tik į dydį, bet ir į jo vietą.

Kaip centruoti patį stalą

Dažniausiai lentelę reikia išdėstyti puslapio centre, nors iš pradžių ji spaudžiama kairėje puslapio pusėje. Norėdami sulygiuoti jį su centru, turite nustatyti jo paraštės ypatybę į automatinį.

...

Dėl to lentelės įtrauka apskaičiuojama automatiškai. Po to lentelė bus puslapio centre.

Lygiavimas centre ląstelėse

Taip pat dažnai reikia suderinti duomenis su langelio centru. Yra trys būdai tai padaryti: horizontalus, vertikalus ir absoliutus. Iš jų pavadinimo aišku, išilgai kurios ašies vyks centravimas. Bet kuriuo atveju žyma naudojama , atsakingas už konkrečią ląstelę iš eilės. Tada turite priskirti jo valign (vertikaliai) ir (arba) lygiavimo (horizontaliam) atributams reikšmę "centras", atsižvelgiant į jūsų užduotį:

Tekstas centruojamas langelyje

Jei norite, kad šis formatavimas būtų standartinis visai svetainei ar puslapiui (kad nereikėtų perrašyti kiekvienos lentelės), tuomet turėtumėte naudoti CSS stilius. Norėdami tai padaryti, įtraukite šį kodą į žymą:

lentelė (teksto lygiavimas: centre; // Lentelės turinį lygiuoti horizontaliai centre vertikaliai lygiuoti: viduryje; // Lentelės turinį išlygiuoti vertikaliai centre )

Naudodami šį metodą taip pat galite nustatyti konkretaus langelio, stulpelio, eilutės arba visos lentelės lygiavimą. Kaip matote, bet kuris iš būdų yra labai paprastas.

Jei įsipjausite į bet kurią svetainę, sukurtą html pagrindu, pamatysite tam tikrą sluoksniuotą struktūrą. Be to, su savo išvaizda jis bus panašus į Sluoksniuotas pyragas. Jei taip manote, greičiausiai ilgą laiką nevalgėte. Taigi pirmiausia numalšinkite savo alkį, o tada mes jums pasakysime, kaip įcentruoti „div“ sluoksnį svetainėje:

Išdėstymo naudojant žymą privalumai

Yra du pagrindiniai svetainės struktūros tipai:

• Lentelinis;
• Blokuoti.

Lentelių išdėstymas vyravo net interneto aušroje. Jo pranašumai yra nurodytos padėties nustatymo tikslumas. Tačiau, nepaisant to, jis turi akivaizdžių trūkumų. Pagrindiniai yra kodo apimtis ir mažas greitis atsisiuntimai.

Naudojant lentelės išdėstymą, tinklalapis nebus rodomas, kol jis nebus visiškai įkeltas. Naudojant div blokus, elementai rodomi iš karto.

Be didelio įkėlimo greičio, svetainės blokavimas leidžia kelis kartus sumažinti html kodo kiekį. Įskaitant naudojant CSS klases.

Tačiau norint struktūrizuoti duomenų pateikimą puslapyje, turėtų būti naudojamas lentelės išdėstymas. Klasikinis jo naudojimo pavyzdys yra lentelių rodymas.

Blokų konstravimas pagal žymas dar vadinamas sluoksniu po sluoksnio, o patys blokai – sluoksniais. Taip yra todėl, kad kai naudojamos tam tikros nuosavybės reikšmės, jos gali būti sukrautos viena ant kitos, panašiai kaip „Photoshop“ sluoksniai.

Pagalbinės padėties nustatymo priemonės

Blokų išdėstyme sluoksnius geriau išdėstyti naudojant kaskadinius stiliaus lapus. Pagrindinė CSS nuosavybė, atsakinga už išdėstymą, yra float.
Nuosavybės sintaksė:
plūdė: kairė | dešinėje | jokio | paveldėti
Kur:

• į kairę – sulygiuokite elementą prie kairiojo ekrano krašto. Srautas aplink likusius elementus vyksta dešinėje;
• dešinėje – išlygiavimas dešinėje, srautas aplink kitus elementus – kairėje;
• nėra – vynioti negalima;
• inherit – paveldi pirminio elemento reikšmę.

Pažvelkime į lengvą pozicionavimo div pavyzdį naudojant šią savybę:

#left (plotis: 200px; aukštis: 100px; plūduriuoti: kairėje; fonas: rgb(255,51,102); ) #right (plotis: 200px; aukštis: 100px; slankioji: dešinėje; fonas: rgb(0,255,153); ) Kairysis blokas Dešinysis blokas

Dabar mes bandysime naudoti tą pačią ypatybę, kad puslapio centre būtų išdėstytas trečiasis div. Deja, plūdė neturi centrinės vertės. O kai naujam blokui suteikiate lygiavimo reikšmę į dešinę arba į kairę, jis pasislenka nurodyta kryptimi. Todėl belieka nustatyti plūdę: paliko visus tris blokus:

Tačiau tai taip pat nėra geriausias pasirinkimas. Sumažinus langą, visi sluoksniai išrikiuojami vienoje eilėje vertikaliai, o padidinus – prilimpa prie kairiojo lango krašto. Taigi mums reikia geresnio būdo centruoti div.

Centravimo sluoksniai

Kitame pavyzdyje naudosime konteinerio sluoksnį, kuriame įdėsime likusius elementus. Tai išsprendžia blokų judėjimo vienas kito atžvilgiu problemą, kai keičiamas lango dydis. Indelis centruojamas viduryje, paraščių ypatybes nustatant į nulį paraštėms nuo viršutinio krašto ir automatiškai šonuose (paraštė: 0 automatinis):

#container (plotis: 600px; paraštė: 0 automatinis; ) #left (plotis: 200px; aukštis: 100px; float: left; fonas: rgb(255,51,102); ) #right (plotis: 200px; aukštis: 100px; float : kairėje; fonas: rgb(0,255,153); ) #center (plotis: 200px; aukštis: 100px; float: left; background: rgb(255,0,0); ) Kairysis blokas Centrinis blokas Dešinysis blokas

Tame pačiame pavyzdyje parodyta, kaip galite centruoti div horizontaliai. Ir jei šiek tiek redaguosite aukščiau pateiktą kodą, galite pasiekti vertikalus lygiavimas blokai. Norėdami tai padaryti, tereikia pakeisti konteinerio sluoksnio ilgį (sumažinti). Tai yra, po redagavimo css klasė turėtų atrodyti taip:

Po pakeitimo visi blokai išsirikiuos griežtai iš eilės viduryje. Ir jų padėtis nepasikeis, nepaisant naršyklės lango dydžio. Štai kaip atrodo vertikalus „div“ centravimas:

Šiame pavyzdyje panaudojome keletą naujų css ypatybių, kad centruotų sluoksnius konteinerio viduje:

#container (plotis: 450 pikselių; aukštis: 150 pikselių; paraštė: 0 automatinė; fono spalva: #66CCFF; ) #left (plotis: 100 pikselių; aukštis: 100 pikselių; fonas: rgb (255,51,102); ekranas: inline-block; vertikalus lygiavimas: viduryje; paraštė kairėje: 35 tšk.; ) #dešinė (plotis: 100 pikselių; aukštis: 100 pikselių; fonas: rgb (0 255 153); ekranas: eilutinis blokas; vertikalus lygiavimas: vidurys; paraštė kairėje: 35 pikseliai; ) #centras (plotis: 100 tšk.; aukštis: 100 pikselių; fonas: rgb(255,0,0); ekranas: eilutinis blokas; vertikaliai sulygiuotas: vidurys; paraštė kairėje: 35 pikseliai; )

Trumpas css ypatybių ir jų reikšmių, kurias naudojome šiame pavyzdyje, kad sutelktume div viduje div, aprašymas:

• ekranas: inline-block – sulygiuoja bloko elementą į liniją ir užtikrina, kad jis apvyniotų kitą elementą;
• vertikalus lygiavimas: vidurys – sulygiuoja elementą viduryje, palyginti su pirminiu;
• margin-left – nustato kairiąją paraštę.

Kaip sukurti nuorodą iš sluoksnio

Kad ir kaip keistai tai skambėtų, tai įmanoma. Kartais maketavimo metu gali prireikti div bloko kaip nuorodos įvairių tipų Meniu. Pažvelkime į praktinį nuorodos sluoksnio diegimo pavyzdį:

#sluoksnis1 (plotis: 500 piks.; aukštis: 100 piks.; fonas: rgb (51 255 204); kraštinė: griovelis; ) a ( ekranas: blokas; teksto lygiavimas: centre; aukštis: 100 %; spalva: rgb (255,0,51) ;) Nuoroda į mūsų svetainę

Šiame pavyzdyje, naudodami eilutės rodymą: blokas, nustatome nuorodą į bloko elemento reikšmę. Ir kad visas div bloko aukštis taptų nuoroda, nustatykite aukštį: 100%.

Bloko elementų slėpimas ir rodymas

Blokų elementai suteikia daugiau galimybių išplėsti sąsajos funkcionalumą nei pasenęs lentelės išdėstymas. Dažnai atsitinka taip, kad svetainės dizainas yra unikalus ir atpažįstamas. Tačiau už tokį išskirtinį reikia mokėti, nes trūksta laisvos vietos.

Tai ypač pasakytina apie pagrindinį puslapį, kuriame reklamos kaina yra didžiausia. Todėl iškyla problema, kur „įkišti“ kitą reklaminis baneris. Ir čia jūs negalite išsisukti su lygiu „div“ į puslapio centrą!

Racionalesnis sprendimas yra paslėpti tam tikrą bloką. Štai paprastas tokio įgyvendinimo pavyzdys:

#layer1( display:block; width: 500px; height: 100px; background: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="nėra") ( layer1="blokas"; ) else ( layer1="nėra"; ) document.getElementById("sluoksnis1").style.display=layer1; )

Tai yra stebuklingas mygtukas. Paspaudus ant jo, paslėptas blokas bus paslėptas arba parodytas.

Šiame pavyzdyje div blokų vieta niekaip nesikeičia. Čia jis naudojamas paprasčiausia funkcija JavaScript, kuris pakeičia css rodymo ypatybės reikšmę spustelėjus mygtuką (įvykis onclick).

Pradėti