Elementele de bază ale CSS-ului pentru începători și avansate

6. Elementele de proiectare a jurnalului.

.stânga - când meniul este situat în stânga posturilor
.dreapta - meniul spre dreapta.
.journal_list
.block_design - dacă designul este blocat.

Elemente de meniu (#side). De fapt, toate link-urile, dar pentru fiecare element puteți scrie proprietăți individuale. O listă a acestor elemente a fost colectată de Tex. Zolotzzze =) și alții, o voi pune în totalitate separat.







Deci, au fost introduse aproape toate elementele și clasele paginii, acum puteți seta proprietățile fiecăruia în CSS.
Experiment - închideți jurnalul pentru o vreme și schimbați proprietățile diferitelor elemente și clase, apoi salvați și vedeți ce se întâmplă în cele din urmă. Așa că vă imaginați în detaliu imaginea amplasării blocurilor de jurnal și înțelegeți cum să acționați mai bine în ceea ce privește modificarea designului.

7. Metode de bază ale muncii.


În acest capitol vorbim despre acele tehnici care sunt folosite de obicei pentru a edita proiectarea jurnalului în CSS. De asemenea, ia în considerare principalele principii de lucru cu design-ul, folosind CSS.

Cel mai important, lățimea, înălțimea, grosimea și alte dimensiuni asociate măsurătorilor sunt măsurate în pixeli, iar după fiecare valoare trebuie să scrieți pixeli, de exemplu

Dacă doriți să specificați valorile într-un procent, scrieți%

În al doilea rând - un curs scurt în limba engleză.
Sus - Sus
Bottom - bottom
Stânga - stânga
Dreapta - dreapta.
Centrul este centrul.

A treia - indentare. Există două tipuri de proprietăți - margini și zăbrele. Asigurați-vă că ați citit în detaliu aici - htmlbook.ru/css/margin.html htmlbook.ru/css/padding.html
Marginea specifică o indentare între marginea elementului părinte și cea curentă.
Plăcuirea este o căptușeală interioară între marginea elementului curent și conținutul acestuia.
Cele mai multe probleme cu afișarea incorectă a aranjamentului comun al elementelor este că aceste obiecte sunt indentate. Setați marja: 0 și umplutura: 0. pentru a evita astfel de probleme.
În primul rând, ar fi bine să eliminați toate crestăturile din corp, astfel încât să nu existe o distanță între marginile ecranului și elementele. acest lucru va evita unele inconsecvențe în afișarea în diferite browsere! Apoi puteți întoarce liniuțele dacă aveți nevoie de ele.

A patra este importanța. Eticheta importantă indică faptul că proprietatea are o importanță deosebită și ar trebui executată exact așa cum ți-a fost prescrisă în CSS. Este scris numai în acest fel, dar nu altfel: - după proprietate, un spațiu și! Important și NUMAI atunci o punct și virgulă.
Totul despre această etichetă este citit pe htmlbook.ru/css/!important.html

a - folosit pentru a descrie link-urile. : hover - arată că în momentul în care cursorul mouse-ului este peste elementul este descris.

Cum fac un element invizibil? Proprietatea "display: none" vă va ajuta. Utilizarea unui astfel de design elimină un element din document, astfel că spațiul pentru acesta nu este rezervat, rețineți acest lucru.

Proprietatea de afișare acceptă, de asemenea, alte valori, de exemplu blocul - utilizat adesea în codul jurnalului. Citiți despre utilizarea aici - htmlbook.ru/css/display.html și acordați atenție browserelor de sprijin.

Context. Fundalul poate fi aplicat oricărui bloc, iată cum se face:
Imaginea pentru fundal este luată DOAR din biblioteca de imagini. Descărcați imaginea de acolo, dar rețineți - "greutatea" în kilobyte - cheia pentru confortul utilizării jurnalului dvs. Cu cât greutatea este mai mică, cu atât este mai bine pentru cititor, deci încercați să aduceți la minimum numărul de kilobyte de imagini.
Dacă aveți Photoshop, atunci trebuie să existe ImageReady - pachetul este la fel pentru optimizarea imaginii. După deschiderea imaginii în Photoshop, selectați în loc de "Salvare ca" elementul "Salvați pentru web", situat imediat după. Se deschide o fereastră în care puteți seta parametrii imaginii optimizate. Există mai multe setări standard (Presetare) care au deja selectați parametrii de optimizare, de exemplu GIF cu un număr diferit de culori sau Jpeg în trei calități. Calitatea cea mai scăzută înseamnă cea mai mică dimensiune, previzualizarea vă ajută să vedeți o imagine optimizată, în funcție de care puteți seta culisorul de calitate așa cum doriți. Și sub imagine este mărimea acesteia într-o formă optimizată (în kilobyte), care se schimbă automat când se schimbă calitatea - urmăriți-o. Să spunem doar - o imagine în jpeg cu dimensiunea de 1000x200 ar trebui să cântărească în medie Kilobyte 50 - să se bazeze pe această cifră. Dacă în imagine nu este suficientă culoare și nu este o fotografie, setați tipul de compresie GIF cu culori diferite, aceasta va reduce complet imaginea. Imaginile foarte mici sunt, de asemenea, mai bine făcut în gif.






Dacă nu aveți deloc Photoshop, descărcați optimizatorul de imagine Ashampoo Photo Optimizer. Înțelegeți modul în care funcționează și reduceți imaginile din acesta.
Puteți descărca programul de lucru introductiv aici:
rapidshare.com/files/72805523/Ashampoo.Photo.Op.
Parola pentru arhivare - netzor.org
Deci, înapoi la oile noastre:
Dacă încărcați o imagine în bibliotecă, veți vedea un link către aceasta - adresa URL. Copiați linkul și îl utilizați în următorul cod:

Proiectați o lățime fixă ​​în centru, la stânga și la dreapta.
Aceasta este schema de proiectare a jurnalului standard pe care mulți o folosesc și care este convenabilă și bună. Aici Tex toate descrise în detaliu - tex.diary.ru/p41771510.htm
Nu uitați de rezoluția diferită a ecranului pentru utilizatori - dacă faceți blocurile foarte înguste, atunci persoanele cu un ecran lat vor ocupa 30% din pagină și nu vor arăta foarte bine.

Imagini în partea de sus și de jos a ecranului. Această tehnică este caracteristică și convenabilă pentru proiectarea unei lățimi fixe, descrisă în ultimul paragraf. Totul se face simplu - trebuie să setați lățimea și înălțimea pentru #extratop și #extrabottom și să plasați fotografiile acolo ca fundal. Pentru un design fix, lățimea obiectelor este setată la fel ca lățimea blocului de împachetare, nu mai mult. Înălțimea este egală cu înălțimea imaginii, în timp ce imaginea însăși trebuie ajustată la lățimea blocului principal.
Iată un exemplu:


Dacă #extrabottom nu este afișat corect. Există două probleme principale cu afișarea acestuia: între el și blocul de înregistrări un spațiu, și este afișat imediat după meniu sau după #extratop.
Prima problemă este legată de proprietățile clasei bloc bloc. Anume - cu indentări în ele. Îndepărtați margini cu margini și umpluturi:
- eliminați liniuța inferioară pentru câmpul de descriere a claselor posturilor și meniurilor.
Același lucru poate fi scris pentru # pagina-c.

A doua problemă este legată de poziționare. Dacă ați schimbat ceva în blocuri, este posibil să fi încălcat "imaginea de ansamblu" a codului paginii. Dar există o cale de ieșire -
Proprietatea float: stânga; pentru #extrabottom arată că elementul este aliniat la stânga, iar celelalte elemente trebuie să se înfășoară în jurul acestuia în partea dreaptă. În unele cazuri acest lucru funcționează, încercați să îl adăugați la proprietățile blocului.
Proprietatea clară: ambele. pentru #extrabottom, dimpotrivă, împiedică elementul să curgă pe ambele părți. Lucrări pentru alte cazuri. În general, dacă există probleme de acest tip, încercați una dintre aceste soluții și, dacă nu funcționează, scrieți la comunitate diarycss.diary.ru

Modificarea dinamică a dimensiunii blocului, design dinamic.
Lățimea fixă ​​nu este întotdeauna bună și interesantă, deci utilizați funcțiile CSS pentru a crea obiecte care își schimbă proprietățile atunci când modificați rezoluția ecranului sau dimensiunea paginii.
Acest lucru va ajuta procentul, și anume lățimea blocului (procentaj). Cu această descriere, lățimea obiectului va fi setată relativ la celelalte elemente ale paginii, iar dacă își schimbă proprietățile, atunci obiectul curent se va schimba după ele. De exemplu,
#wrapper va determina blocul principal să ocupe întotdeauna 80% din ecran și #page-t va arăta că câmpul cu posturi va ocupa 90% din lățimea blocului page-c (părinte). Desigur, puteți obține acest efect cu indentare, dar lățimea elementului părinte este mai bine stabilită de procente.
Principala modalitate de a organiza designul dinamic este după cum urmează:
Setați lățimea #wrapper-ului în procente, cel mai ușor este de 100% (din lățimea ecranului).
Lățimea blocului # page-c se face ca procent, deoarece este mai convenabil și, în funcție de lățimea ambalajului, va varia, de asemenea, în funcție de lățimea ecranului.
Procedând astfel, trebuie să vă asigurați întotdeauna că meniul #side (în funcție de #wrapper) nu ocupă mai mult decât spațiul rămas, altfel nu va fi afișat acolo unde este necesar. Puteți verifica acest lucru prin stabilirea unei rezoluții mai mici a monitorului, de exemplu 1024 * 768 și a vizualizării paginii dvs. Această permisiune are o mulțime de utilizatori, astfel încât să se concentreze pe ele primul.
Setați lățimea fixă ​​pentru #side. Că meniul nu a "plecat", este necesar ca # page-c să fie ocupată, vom recunoaște (1024 a minus a width_menu) pixeli. Mai mult - puteți.
Pentru meniul #side în acest caz, poziția liniilor: absolută; clar: stânga; - ele poziționează absolut meniul "din cod" și arată că alte elemente ar trebui să curgă în jurul meniului din partea dreaptă.
În plus, poziția #page-c nu trebuie să înlocuiască elementul din meniu. Asigurați-vă că limita #side este la același nivel cu limita blocului înregistrărilor sau există o distanță între ele (vedeți poziționarea și liniuțele).
În codul meu, am rezolvat problema în felul următor:

O indentare de 150 pixeli ajută conținutul paginii-c să se afle întotdeauna în afara acțiunii din zona de meniu, în afară de aceasta, meniul în sine arată că trebuie să fie înfășurat în dreapta.

Proprietatea min-lățime ajută, de asemenea. Această proprietate arată lățimea, mai puțin din care elementul nu poate fi, și o prescrie așa. Apoi, dacă pagina este redusă în lățime, elementul nu va fi mai mic decât valoarea specificată, în schimb va apărea o bară de derulare. Încă mai există o lățime maximă. în cazul în care pentru a citi despre el, trebuie să vă amintiți deja.

8. Tehnici de design mai complexe și mai complicate.

Un element deasupra celuilalt. Este posibil să se facă un element să pară mai aproape de utilizator decât ceilalți și dacă elementele sunt suprapuse unul câte unul pe poziție, atunci acest element va părea a fi "mai mare".
Proprietatea z-index este utilizată. Totul este descris în detaliu aici - htmlbook.ru/css/z-index.html

Modificați stilul benzilor orizontale dintre posturi. Discuție aici - diarycss.diary.ru/p23118546.htm

Dacă doriți să setați o dimensiune fixă ​​pentru un element, dar conținutul său nu "se usucă" în această dimensiune. puteți utiliza bara de derulare - diarycss.diary.ru/p41016364.htm#
Am citit despre supraîncărcare aici - htmlbook.ru/css/overflow.html

Dacă nu ați înțeles încă cum să eliminați unele elemente (și le-am scris), atunci diarycss.diary.ru/p25244058.htm
Meniu, ca în Tex. Dacă vă place acest meniu, ascundeți pentru o vreme legături inutile, apoi ați discutat aici - diarycss.diary.ru/p40633222.htm

Dacă legăturile trebuie să fie plasate într-o singură linie. și ele apar în mod persistent în două sau mai multe, apoi setați proprietatea lățime pentru ei! Aceasta va face ca lățimea lor să fie independentă de lățimea obiectului părinte.

Sper sincer că ați citit acest manual și că ați primit cel puțin câteva informații utile pentru dvs. Vă mulțumesc pentru atenție.







Articole similare

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: