Cum să faci un antet frumos în css. Antetul paginii

30.03.2019 Windows 10

Salutare tuturor. Azi m-am uitat la statistici interogări de căutare, prin care oamenii merg pe blog și au constatat că sunt câteva care nu sunt deloc relevante. Nu, nu blogul, ci articolele.

Unul din ei cum să remediați antetul site-ului? Am decis imediat să corectez situația și să scriu un articol, deoarece subiectul este relevant și există întrebări în acest domeniu.

În general, există mai multe moduri de a derula o pagină. Puteți folosi javascript, dar nu sunt foarte puternic în acest subiect și doar îl învăț. Prin urmare, deocamdată, ne vom descurca cu CSS. Dumnezeu să ajute, remediați antetul site-ului(și nu doar o pălărie, ci orice alt element), o poți face cu „sânge mic” :)

De fapt, metoda de remediere a unui element la derularea unei pagini este foarte simplă și vei fi surprins cât de ușor se rezolvă această problemă.

Remedierea antetului la derularea paginii

Pentru a remedia antetul, va trebui să creați două blocuri. Unu - pentru a putea centra capacul. Și există un copil în el, care va fi înregistrat. Sa incepem...

Ca aceasta html simplu structura! Acum să adăugăm stiluri!

#headerMain ( lățime:920px; înălțime: 195px; margin:0px automat; z-index:0; ) #header ( lățime:920px; înălțime: 195px; fundal: url(../img/bg-header.jpg) nu -repetare: index z: 9999;

Acum antetul va fi fixat în partea de sus a ecranului și nu se va mișca la derulare.

Î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 (top parte) ș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:

Html, corp ( înălțime: 100%; culoare: #000; fundal: #FFFFFF; împachetare cuvânt: break-word; font-size: 12px; font-family: Verdana, Arial, Sans-Serif; ) #wrapper ( înălțime :auto !important; înălțime:100%; înălțime minimă:100%; float:left; width:200px; ) #right (float:right; width:200px; ) #footer (înălțime:100px; margin-top:-100px; ) .clear (clear:both; ) #space (înălțime:100px ;

Și iată codul pentru șablon în sine:

Numele site-ului

În primul rând, să facem câteva modificări stilului blocului de înveliș:

#wrapper ( înălțime:auto !important; înălțime:100%; înălțime minimă:100%; lățime: 1024px; margine: 0 automat; aliniere text: stânga; )

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)

Am facut si modificari la subsol:

#footer ( lățime: 1024px; margine: 0 automat; text-align: left; height:100px; margin-top:-100px; fundal: #4a90d9; )

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: 20px la container; și a eliminat lățimea minimă, deoarece avem lățime fixăînvăluitor.

Ei bine, am pregătit șablonul, este timpul să trecem la antetul site-ului. Stilurile vor fi astfel:

#header (înălțime: 140px; fundal: #fff; padding-top: 40px; )

Înălțimea blocului este de 140 pixeli, fundalul este alb, iar marginea de la marginea superioară este de 40 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 înregistrați stiluri css.

Sigla ( afișare: bloc; înălțime: 104 px; lățime: 390 px; fundal: url("image/logo.png") fără repetare; )

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

Aranjament în pagină este procesul de dezvoltare a structurii unui document HTML, al cărui rezultat este o pagină web. Structura unei pagini web este determinată de etichetele HTML corespunzătoare. Etichetele - blocuri de containere dreptunghiulare pentru conținut - nu apar în fereastra browserului. Ei spun browserului despre tipul de conținut, iar browserul, pe baza acestor informații, își afișează conținutul - fișiere text sau media.

Cum se creează o structură de pagină folosind blocuri (aspect bloc)

1. Cum să împărțiți aspectul paginii în secțiuni

Pentru a crea un aspect de pagină, trebuie să selectați secțiunile (secțiunile) principale ale documentului. Puteți citi mai multe despre elementele secționale în articol.

O pagină web standard conține următoarele secțiuni: