Od autora:Želim vam dobrodošlicu nazad na stranice našeg bloga. U današnjem članku želio bih govoriti o različitim tehnikama poravnanja koje se mogu primijeniti na blokove i njihov sadržaj. Konkretno, kako poravnati blokove u css-u, kao i poravnanje teksta.

Poravnajte blokove prema sredini

Lako je centrirati blok u css-u. Ovo je mnogima najpoznatija tehnika, ali o njoj bih prije svega htio govoriti upravo sada. Ovo treba da bude centrirano horizontalno u odnosu na roditeljski element. Kako se to provodi? Recimo da imamo kontejner i naš ispitanik je u njemu:

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Pretpostavimo da je ovo zaglavlje stranice. Ne pokriva cijelu širinu prozora i moramo ga centrirati. Pišemo ovako:

#header( širina / max - širina : 800px ; margina : 0 auto ;

Moramo navesti tačnu ili maksimalnu širinu, a zatim napisati svojstvo ključa - margin: 0 auto. Postavlja margine za naše zaglavlje, prva vrijednost određuje margine odozgo i odozdo, a druga - desno i lijevo. Automatska vrijednost nalaže pretraživaču da automatski izračuna padding na obje strane, tako da element bude tačno centriran na roditeljskom elementu. Povoljno!

Poravnanje teksta

Ovo je takođe vrlo jednostavan trik. Da biste poravnali sve inline elemente, možete koristiti svojstvo text-align i njegove vrijednosti: lijevo, desno, centar. Potonji centrira tekst, što je ono što želimo. Čak se i slika može poravnati na isti način, jer je i ona po defaultu ugrađeni element.

Poravnajte tekst okomito

Ali ovo je već teže. Podrazumevano, ne postoji tako jednostavno dobro poznato svojstvo koje bi lako centriralo tekst u blok kontejneru okomito. Međutim, postoji nekoliko trikova do kojih su dizajneri izgleda došli tijekom godina.

Postavite visinu bloka koristeći padding. Način je da ne postavite eksplicitnu visinu sa visinom, već je kreirate umjetno s gornjim i donjim paddingima, koji bi trebali biti isti. Kreirajmo bilo koji blok i napišimo mu sljedeća svojstva:

div(pozadina: #ccc; padding: 30px 0; )

div ( pozadina : #ccc; padding : 30px 0 ;

Pozadina je samo da se vizuelno vide ivice, kao i padding. Sada se visina bloka sastoji od ova dva uvlaka i same linije, a sve to izgleda ovako:

Definirajte visinu linije za blok. Čini mi se da je ovo ispravniji način ako treba poravnati jedan red teksta. Pomoću njega možete snimiti normalnu visinu koristeći svojstvo visine. Nakon toga, također treba podesiti visinu linije, istu kao i visina bloka u cjelini.

div(visina: 60px; visina linije: 60px; )

div ( visina: 60px visina linije: 60px;

Rezultat će biti sličan gornjoj slici. Sve će raditi čak i ako dodate padding. Međutim, samo za jednu liniju. Ako vam treba više teksta u elementu, onda ova metoda neće raditi.

Pretvorite blok u ćeliju tabele. Suština ove metode je da svojstvo vertical-align: middle djeluje na ćeliju tabele, koja centrira element okomito. Shodno tome, u ovom slučaju, blok mora biti postavljen na sljedeće:

div (prikaz: ćelija-tabela; okomito-poravnanje: sredina; )

div ( displej: tabela - ćelija; vertikalno - poravnati : sredina ;

Ova metoda je dobra jer možete poravnati koliko god želite teksta u sredini. Ali bolje je postaviti display: table na blok u koji je naš div ugniježđen, inače možda neće raditi.

Pa, dolazimo do posljednjeg trika za danas - ovo je poravnavanje samih blokova okomito. Moramo reći da opet ne postoji nekretnina koja je namijenjena posebno za ovo, ali postoji nekoliko trikova kojih biste trebali biti svjesni.

Postavite pomake u procentima. Ako znate visinu nadređenog elementa i postavite drugi element na nivou bloka unutar njega, možete ga centrirati koristeći procentualni padding. Na primjer, roditelj ima visinu od 600px. U njega stavljate blok koji ima visinu od 300px. Koliko vam je potrebno napraviti sigurnosnu kopiju odozgo i odozdo da biste ga centrirali? 150 piksela svaki, što je 25% visine roditelja.

Ova metoda vam omogućava da izvršite centriranje samo kada vam dimenzije dozvoljavaju proračune. A ako imate roditelj 887 piksela u visinu, onda nećete moći ništa tačno napisati, ovo je već jasno.

Umetnite element u ćeliju tabele. Opet, ako pretvorimo roditeljski element u ćeliju tabele, tada će blok umetnut u nju automatski biti centriran okomito. Da bi to uradio, roditelj samo treba da postavi vertikalno poravnanje: sredinu.

A ako, pored ovoga, napišemo i marginu: 0 auto, tada će element biti centriran horizontalno!

Windows: Internet Explorer 3.0+, Firefox 1.0+, Google Chrome, Opera 3.51 - 6.xx i 9.0+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ] .

linux: Firefox 1.0+, Chromium, Opera 5.0 - 6.xx i 9.0+, SeaMonkey 1.0+ [ 2 ] .

Poravnavanje sadržaja stranice sa središtem u vidljivoj oblasti prozora pretraživača pomoću HTML-a - bez CSS-a. Kontejner u kojem će se nalaziti sadržaj web stranice je centriran - po širini i visini: [ Otvori oglednu stranicu ].

Takođe u Netscapeu 2.02 - 4.80 i Offbyone. U Netscapeu 2.02 - 4.80, postoji određeno pomicanje sadržaja stranice u gornji lijevi ugao vidljivog područja prozora pretraživača zbog činjenice da ovi programi rezerviraju prostor za trake za pomicanje.

Takođe u Netscapeu 2.02 - 4.80. U Netscapeu 2.02 - 4.80, postoji određeno pomicanje sadržaja stranice u gornji lijevi ugao vidljivog područja prozora pretraživača zbog činjenice da ovi programi rezerviraju prostor za trake za pomicanje.

Aliosque subditos et thema

Da biste napravili snimke ekrana u DOS-u, postoji nekoliko programa. Na primjer, SNARF. Uz korištenje ove aplikacije bilo je moguće napraviti snimke ekrana u najvećem broju slučajeva. Takođe, kvalitet screenshotova (.BMP fajlova) koje je napravio SNARF je najbolji među testiranim programima: ScreenThief, VideoThief, FLIP, GRABBER, SNARF. Korišćenje SNARF-a sa podrazumevanim postavkama je jednostavno, ali postoji nedostatak - SNARF uvek sprema snimak ekrana u fasciklu u kojoj se korisnik trenutno nalazi. Što može biti nezgodno ili neprihvatljivo. I ne postoji očigledan način da se to promijeni. Međutim, postoji rješenje. Originalna ideja je pronađena na ovom linku. Na osnovu onoga što se dogodilo: 1. SNARF [ Preuzmi ] 2. Koristeći uređivač teksta, otvorite datoteku SNARF.EXE u tekstualnom modu, pronađite snarf000.bmp i promijenite je u s: scn000.bin 3. Kreirajte batch fajl, na primjer S.BAT, u kojem će, pored linije za pokretanje SNARF.EXE, biti naredba za kreiranje ramdisk S: za putanju do foldera u koji će se snimati snimci ekrana kada se SNARF pokrene. Folder i put do njega mogu biti bilo koji: C:\SOFT\SNARF.EXE SUBST S: C:\SCREENS\ 4. Pokrenite SNARF: S [ili S.BAT] 5. Da napravite snimak ekrana: Alt + S Biće dva zvučna signala. Prvi na početku, a drugi kao znak uspješnog završetka procesa. Nakon snimanja snimaka ekrana, potrebno je da odete u fasciklu u kojoj su sačuvani i promenite ekstenziju datoteke sa .BIN u .BMP SNARF - Freeware.

CSS vertikalno poravnanje blok elementa koji sadrži tekst i slike. Radi za različite kombinacije blok i inline elemenata. Primjer: CSS vertikalno poravnanje CSS vertikalno poravnanje HTML / XHTML. kod:

CSS. Kod: .parent (položaj: relativan; lijevo: 0px; vrh: 0px; visina: 200px; prikaz: stol;) .child (položaj: relativan; lijevo: 0px; vrh: 0px; prikaz: ćelija-tabela; vertikalno-poravnanje : Middle;) .childcontent (pozicija: relativna; lijevo: 0px; vrh: 0px;) Napomena: .parent i .childcontent mogu biti poravnati lijevo ("float: lijevo;") ili neusklađeni, ali na taj način okomito. CSS poravnanje je radilo, .child bi trebao biti bez "float: left;". [ 1 ] Također u Netscapeu 6.01+, Mozilla 0.6+. [ 2 ] Takođe u Netscapeu 6.01+, Mozilla 0.6+.

Za odabir željenih ulaznih elemenata sa tipom "checkbox", možete koristiti selektor ':checkbox'. primjer:

gdje rukovalac- rukovalac koji se poziva kada dođe do događaja promjene

Rad sa jQuery objektom povratnih poziva: korištenje liste povratnih poziva

Callbacks objekat u jQueryju vam omogućava da kreirate nešto poput liste povratnih poziva koji će se izvršiti kada se pozove uslužni metod fire(). U ovom slučaju, prilikom pozivanja fire() metode, moguće je prenijeti neki argument koji će koristiti svaka funkcija povratnog poziva. Kako to funkcionira, analizirat ćemo sada na nekoliko primjera.

Hvatamo gubitak fokusa. blur() metoda u jQueryju

Metoda blur() u jQueryju vam omogućava da dodijelite rukovalac određenom elementu na stranici, koji će biti pozvan čim se fokus izgubi iz ovog elementa. U početku, ovaj događaj se uglavnom odnosio na elemente forme - ulazne oznake, međutim, novije verzije pretraživača su u stanju da obrađuju ovaj događaj za gotovo sve vrste DOM elemenata.

Umetnite sadržaj ispred sadržaja odabranog objekta. before() metoda u jQueryju

Metoda before() u jQueryju omogućava vam da umetnete određeni sadržaj ili objekte prije sadržaja svakog od skupa navedenih objekata.
Sintaksa metode je jednostavna:

1	.before (sadržaj, )

Druga varijanta:

1	.before (funkcija)

jQuery. attr() metoda. Kako dobiti ili dodati atribut elementu

jQuery olakšava pristup atributima željenog elementa, bilo preuzimanjem njegove vrijednosti ili, obrnuto, postavljanjem i modifikacijom. Za takve manipulacije koristi se metoda attr().

Metoda .appendTo() u jQueryju. Dodavanje sadržaja na kraj elemenata

Metoda appendTo() u suštini obavlja isti zadatak kao i metoda append(). Razlika je, uglavnom, samo u sintaksi. Ako za append() navedemo željeni selektor dodavanjem ove metode, gdje u zagradama naznačimo šta tačno treba dodati na kraj sadržaja navedenog objekta, onda za appendTo() ono što treba dodati je ne više u zagradama kao parametar metode, već neposredno prije same metode kao objekta na kojem se poziva appendTo(). Razlika će se bolje razumjeti na sljedećem primjeru.

jQuery .animate() Metoda: animirajte slike, tekst i bilo šta

Metoda .animate() vam omogućava da kreirate efekte animacije koristeći css svojstva samih objekata. Metoda ima dvije varijacije sa različitim brojem proslijeđenih parametara

Video konverzija uz Movavi

Odnedavno, kako bih dobro iskoristio vrijeme koje je potrebno za put do posla i s posla, pokušavam unaprijed postaviti više korisnih videa na svoj telefon. Telefon je na Androidu, a nedavno se suočio sa problemom kada je pametni telefon iz nekog razloga odbio da reprodukuje video u AVI formatu. Da li je plejer slab, ili specifičnosti operativnog sistema - ne znam. Međutim, problem se nije morao dugo rješavati: na mreži sam pronašao prilično funkcionalan video konverter koji može ne samo da ga konvertuje iz jednog formata u drugi, već i da pripremi datoteku uzimajući u obzir karakteristike vašeg uređaja. Evo kratkog opisa kako koristiti ovaj divan program.

Poravnanje teksta određuje njegov izgled i orijentaciju ivica pasusa, a može biti lijevo, desno, centrirano ili poravnato. U tabeli. 1 prikazuje opcije poravnanja blokova teksta.

Tab. 1. Načini poravnanja teksta

Lijevo poravnanje	Desno poravnanje	Centralno poravnanje	Opravdajte
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Najčešća opcija je poravnato lijevo, kada je lijevi tekst pomaknut do ivice, dok desni ostaje nazubljen. Desno i centralno poravnanje se uglavnom koristi u naslovima i podnaslovima. Treba imati na umu da se prilikom upotrebe opravdanja u tekstu mogu pojaviti veliki razmaci između riječi, što nije baš lijepo.

Oznaka pasusa se obično koristi za postavljanje poravnanja teksta.

Sa atributom align, koji specificira metodu poravnanja. Također je dozvoljeno poravnati blok teksta pomoću oznake

Top Related Articles