În ultimul articol am făcut-o cadru al nostru șablon HTML, care este gata pentru completare și înregistrare. Astăzi vă spun cum să faci un antet frumos pentru site-ul web(partea de sus) și un meniu simplu. Astăzi vom face și câteva modificări în stilurile altor blocuri.
Deci la ce avem acest moment? Acum avem aceste stiluri:
Am stabilit o lățime fixă - lățimea blocului, 1024 pixeli în dimensiune, a aliniat blocul în sine la centru și textul din el la stânga folosind text-align: left. Putem alinia blocul la centru folosind stilul marginii, setând marginile de sus și de jos la 0 și lățimea la automat. Din păcate, acest lucru nu funcționează întotdeauna Internet Explorer 6, deci în corp am scris text-align: center; și de aceea a trebuit să aliniez textul în blocul de împachetare și subsol la stânga. De asemenea, am specificat margin:0 în corp, setând astfel marginile de la margini la 0 pixeli. Ca rezultat, Body a ajuns să aibă următoarele stiluri:
Html, corp ( înălțime: 100%; culoare: #000; fundal: #FFFFFF; împachetare cuvânt: break-word; dimensiune font: 12px; familie font: Verdana, Arial, Sans-Serif; margine: 0; text -Aliniere la centru; )
Totul aici este similar cu blocul wrapper: setați lățimea la 1024px, aliniați blocul în centru și aliniați textul la stânga. Am adăugat și margin-top la container: margin-top: 20px; și a eliminat lățimea minimă, deoarece avem o lățime fixă a anvelopei.
Ei bine, am pregătit șablonul, este timpul să trecem la antetul site-ului. Stilurile vor fi astfel:
Înălțimea blocului este de 140 de pixeli, fundalul este alb, iar marginea de la marginea de sus este de 40 de pixeli. Acestea sunt toate modificările aduse stilurilor de antet. Ce? Asta este tot? Și există un articol întreg numit după asta? Desigur că nu. Antetul site-ului va fi format din alte elemente: un logo și un meniu, care vor fi concepute separat.
Să ne înregistrăm Cod șablon HTMLÎn interiorul blocului antet există această linie: Acesta este în esență un link către pagina principala fără text, dar i se atribuie clasa class="logo". Acum trebuie să-l stilați în stiluri CSS.
Am făcut blocul de elemente, i-am dat lățime și înălțime și am făcut și o imagine de logo pe fundal, pe care am pus-o în directorul de imagini. Toate imaginile șablon vor fi localizate în acest director. Dimensiunea imaginii este de 388*100 pixeli, așa că de ce dimensiunea blocului este ușor diferită? Am făcut înălțimea de 104 pixeli, astfel încât să existe un spațiu din imaginea logo-ului în partea de jos între meniul viitor și logo și am luat lățimea cu doi pixeli în plus pentru orice eventualitate, deoarece am întâlnit de câteva ori că Mozilla a determinat incorect dimensiunea imaginii și tăiați-o puțin. Gata, am terminat cu sigla. Meniu în
De la autor: Bun venit pe blogul nostru despre crearea site-ului web. Orice site are ceva care de obicei îl face memorabil și iese în evidență de restul. De obicei, acesta este antetul site-ului. CSS vă permite să o faceți așa cum doriți.
Antetul site-ului - cum este
Este uimitor cât de mult poate depinde astăzi doar de designul unei resurse web. Dar ce separă în mod special o resursă web de altele? De regulă, acesta este antetul site-ului cu un logo corporativ și un design unic. De obicei, așa își amintesc oamenii un fel de proiect pe Internet. Acest lucru este foarte bine amintit în memoria oamenilor.
De exemplu, dacă vedeți o literă albă „B” pe un fundal albastru, probabil că veți concluziona imediat că aceasta este o pictogramă rețea socială In contact cu. Și toată lumea asociază imediat imaginea unui porumbel voiaj cu Twitter. Toate acestea au devenit posibile deoarece aceste site-uri aveau tocmai astfel de imagini în anteturi și oamenii și-au amintit foarte bine de ele.
Bine, a fost un pic de gând, acum să trecem direct la partea tehnică.
Cum poți crea antetul unui site web în CSS?
În general, pălăriile sunt diferite. În funcție de lățimea lor, acestea pot fi împărțite în două grupe: cele aliniate la centru și cele care se întind pe întreaga lățime a paginii web.
Anterior, antetul a fost făcut la fel ca orice alt bloc - a fost dat eticheta div obișnuită identificatorul necesar, după care au căzut în ea toate conținuturile necesare, iar apoi totul a fost oficializat. Astăzi este deja obișnuit să tipăriți într-un mod diferit. A apărut special pentru crearea unui antet de site în HTML5 etichetă asociată- antet Utilizarea sa este încurajată, permite browserelor să înțeleagă ce este această parte a șablonului și ce face. Apropo, dacă vrei să înveți elementele de bază ale HTML5, atunci ai o cale directă către a noastră, unde poți urmări lecții despre această tehnologie.
Prin urmare, pentru a crea un antet simplu, trebuie doar să scrieți următorul cod în html:
<
header
>
<
/
header
>
Desigur, încă nu va apărea nimic pe pagină - mai trebuie să adăugăm conținut la ea și să-l proiectăm. Dar să facem, de exemplu, un bloc care se întinde pe toată lățimea ecranului și, de asemenea, să-l decorăm puțin.
În general, dacă totul este făcut corect, atunci blocului ar trebui să i se dea un fel de clasă sau chiar un identificator (deoarece acesta este un element important al paginii web), dar deocamdată ne vom referi pur și simplu la elementul prin etichetă.
Lățimea: proprietatea 100% face ca blocul nostru să se întindă la toată lățimea, indiferent de dimensiunea ecranului. Dacă, totuși, dimensiunile trebuie limitate cumva, utilizați proprietatea suplimentară max-width, unde dimensiunea absolută este scrisă în pixeli, la atingerea căreia containerul nu se va mai extinde.
Acum avem doar o bandă în fața noastră, pictată în culoarea selectată. De obicei, înălțimea nu este specificată - se determină automat pe baza elementelor care vor fi în antet.
<
div
id
=
"wrap"
>
<
header
>
<
/
header
>
<
/
div
>
Astfel, topul nostru al site-ului va fi situat exact în centru. Tot ce rămâne este să-l umplem.
Orez. 1. Deocamdată, acesta este doar un recipient care va conține tot conținutul.
Ce este de obicei conținut într-o pălărie?
De obicei, acolo sunt inserate un logo, un nume și o descriere a site-ului. Pot fi și unele Informații de contact, navigare pe pagină sau chiar publicitate.
Logo-ul este de obicei inserat ca imagine de fundal. Să punem, de exemplu, asta:
Pentru a face acest lucru, trebuie doar să adăugați câteva reguli în fundal:
fundal: #D8E3AB url(logo.png) no-repeat 5% 50%;
fundal: #D8E3AB url(logo.png) no-repeat 5% 50%;
Adică, pe lângă culoarea solidă, dăm și o imagine de fundal (în cazul nostru logo.png) și o pun mai întâi în același folder cu fișierul de stil. Interzicem repetarea logo-ului și stabilim poziția acestuia în bloc - deplasați-l ușor la stânga și vertical în centru.
Să adăugăm ceva conținut la antet. De exemplu, antet și meniu.
Proiectarea elementelor antetului site-ului cu stiluri CSS
Buna draga vizitatoare!
Astăzi, folosind stilurile CSS, vom proiecta elementele de antet existente: favicon, numele site-ului, fraza cheie și astfel, vom prezenta aspect anteturile site-ului web în conformitate cu aspectul designului.
Având în vedere că scopul Stiluri CSS ar trebui să se bazeze pe un aspect de design, atunci se va acorda o atenție deosebită obținerii datelor necesare folosind un editor grafic.
În conformitate cu aspectul paginii web, antetul este împărțit în două părți principale. Prima este zona în care se află favicon-ul, titlul numelui site-ului și fraza cheie, care sunt combinate de element
cu clasa "titlu hdr". A doua parte este meniul format din element
