Concurență pentru cea mai bună înregistrare a săptămânii!
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
#side
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.
Pentru început, ar fi bine să eliminați toate crestăturile din corp, astfel încât să nu existe distanța între marginile ecranului și elementele (corpul). 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 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:
#side
# pagină-c
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ă o lățime mai mică decât elementul care nu poate fi și scrieți-l astfel: # page-c. 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.
9. Adăugări și recomandări (recomandate pentru citire)
Dacă există mai multe întrebări.
Înainte de a le întrebați, faceți acest lucru:
Utilizați căutarea în textele manualului meu (ctrl + F), tastați cuvântul care vă interesează și vedeți toate informațiile pe care le puteți găsi. Citiți cu atenție.
Utilizați căutarea în comunitatea diarycss.diary.ru. Introduceți o pereche de cuvinte interesante și tot ce doriți să știți va fi afișat în posturile găsite.
Crede-mă - ca să găsești absolut totul dintr-o dată și să nu aștepți până nu ți se spune "du-te la acest link". Tu poți găsi perfect acest link.
Urmați eticheta comunității care vă interesează și toate mesajele de pe acest subiect vor fi afișate.
Dacă încă nu ajută și problema are loc, adresați-o comunității o întrebare, în timp ce:
- păstrați blogul deschis
- scrieți codul
- explicați clar ceea ce doriți să vedeți.
Voi încerca să includ toate întrebările caracteristice din acest ghid, astfel încât acesta să fie actualizat.
Proiecte realizate.
Vizitați jurnalele altor persoane - în desenele lor veți găsi multe achiziții utile. Mai ales vă sfătuiesc să priviți aici - diary-design.diary.ru
Iată designul propus de la tex - tex.diary.ru/p30948279.htm# cu codul. Meniul caracteristic, lățimea fixă, aspectul solid.
Iată creația mea - diary-design.diary.ru/p49766406.htm# cu codul. Aici este implementată lățimea dinamică, precum și fundalul din jurul posturilor și combinația fundalurilor diferitelor elemente într-un singur colaj.
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. Roldo.
Trimiteți-le prietenilor: