șablon fix cu o singură coloană, lecții gratuite și aspect css

șablon fix cu o singură coloană, lecții gratuite și aspect css

In aceasta si in următoarele trei lecții vom crea template-uri formate din una, două și trei coloane. În primul rând, exemple pentru a face aspect fix.

Creează un dosar separat pe desktop pentru un aspect fix cu o singură coloană, nume îl fix1.

Creați acest dosar sunt două fișiere: index.html și style.css.

Fișierul index.html, scrie următorul cod:

Aici, un identificator de unitate de folie va servi ca un container pentru capace, partea de conținut și un subsol. Să Completați blocuri:

Acum, în fiecare bloc, puteți adăuga un text pentru a face clar în cazul în care un bloc este în fereastra de browser:

Ne întoarcem la fișierul stiluri. Mai întâi restabiliți toate marjele:

Acum vom scrie proprietatile pentru blocul cu o folie de identificare:

proprietate marja cu o valoare de la 0 auto necesare pentru a se asigura că unitatea a fost localizat în centrul paginii web. Această caracteristică funcționează numai în cazul în care blocul conține lățime.

Pentru antet și subsol specifica înălțimea:

Pentru a selecta culoarea fiecărui bloc, să adăugați proprietăți culoare de fundal pentru următoarele selecții:

Salvați modificările și deschideți fișierul index.html în browser.

Nu este suficient de umplutură în interiorul unităților. Conținutul de blocuri de fișier index.html închise între tag-uri

cu clasa de conținut. Un exemplu pentru capace:

Fișierul cu stiluri pentru această clasă pentru a adăuga umplutură folosind proprietățile umplutură:

Cum să bată subsol în partea de jos a paginii?

Foarte des clienții cer ca subsol a fost bătut în cuie în partea de jos a paginii. Acest lucru poate fi realizat prin scris câteva proprietăți pentru următoarele unități:

  1. Selectoare pentru HTML și corp trebuie să specificați o înălțime egală cu 100%.
  2. Pentru a stabili un selector înălțime minimă #wrap min-height: 100%;. precum și poziționarea relativă a poziției: relative;.
  3. La subsol pentru a instala poziția de poziționare absolută: absolută;. bottom bottom margin: 0;. și lățimea lățimii blocului: 100%;.

Acum, subsol va fi bătut în cuie la partea de jos a paginii. Salvați modificările și actualizați pagina în browser.

Dacă reduceți înălțimea ferestrei browser-ului, veți observa că în pivniță se execută conținutul blocului cu identificatorul

. Pentru a evita acest lucru, se adaugă la ultima marginea de jos egală cu înălțimea de subsol, și anume, 50px:

Șablonul este gata. Rezultatul browser-ul poate fi vizualizat aici. CSS pentru șablonul prezentat aici.