Noțiunile de bază ale unui site web bazat pe div: 7 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:47

Acest instructable vă va arăta elementele de bază ale modului în care puteți crea un site web cu divs. Deoarece tabelele utilizate pentru aspect sunt rele!: pPentru a înțelege acest lucru instructiv, va trebui să cunoașteți html și css de bază. Dacă nu înțelegeți ceva, nu ezitați să întrebați. Pagina mea de pornire personală folosește și acest tip de structură div.

Pasul 1: Creați fișierele de bază

Mai întâi creați fișierul dvs. html. Vom adăuga elementele de bază. Fișierul CSS va fi gol deocamdată. Fișierul conține acum: test Salvați fișierul html ca ceva.html. Puteți alege singur numele. Fișierul dvs. css trebuie salvat ca.css. Asigurați-vă că îi dați același nume ca cel menționat în fișierul html. În acest caz, „style.css”. Acum avem o pagină html simplă goală atunci când sunt previzualizate în browserul nostru.

Pasul 2: Editați eticheta corpului pentru culori de bază, fonturi, …

Vom lăsa fișierul html așa cum este și vom edita numai fișierul CSS. Adăugați următorul cod în fișierul CSS: body {background: # 444444; font-family: verdana, arial, sans-serif; culoare: # 444444; dimensiunea fontului: 12 px; margin: 0px;} Cu acest bit de cod vom defini toate proprietățile etichetei de corp. Deoarece întregul conținut se află în eticheta corpului, aceste setări vor afecta întreaga pagină. Fundalul și culoarea fontului (culoare) au fost setate la un gri închis. Familia de fonturi (font-family) a fost setată la verdana. Dacă computerul utilizat pentru vizualizarea site-ului nostru nu are fontul „verdana”, acesta va afișa site-ul nostru în fontul „arial”. Puteți adăuga mai multe fonturi la listă. „Sans-serif” este tipul generic care va fi utilizat atunci când nu a fost disponibil niciun font pe care l-ați furnizat. Dimensiunea fontului (font-size) a fost setată la 12 pixeli. Aceasta este o valoare absolută. Dacă doriți să editați alte dimensiuni de font (cum ar fi anteturile, paragrafele, elementele de meniu, …) puteți utiliza unitatea relativă „em” în locul „px”. În acest fel, dacă doriți să vă redimensionați site-ul, va trebui să modificați doar dimensiunea fontului corpului. Marja a fost setată la 0 px pentru toate cele patru fețe ale etichetei corpului. Acest lucru se face pentru a vă asigura că site-ul se va lipi de partea de sus a ferestrei.

Pasul 3: Adăugarea unui container cu antet și conținut

Vom adăuga acum containerul. Acesta este pur și simplu o divizare centrată care va conține întregul nostru site web. În acest container, vom adăuga încă două divsuri; un conținut div și un antet div. Fișierul nostru html va arăta astfel: testează antetul conținutului Vom adăuga următorul cod în fișierul nostru css: div # container {width: 800px; margine: 0px auto; fundal: #FFFFFF; padding: 0px;} div # content {width: 800px; tapițerie: 100px; fundal: galben;} div # header {width: 800px; înălțime: 100px; fundal: albastru; poziție: absolută; top: 0px;}. clearfix: după {content: "."; display: bloc; înălțime: 0; clar: ambele; vizibilitate: ascuns;}. clearfix {display: inline-block;} / * Ascunde din IE Mac / * /. clearfix {display: block;} div # container înseamnă că avem o etichetă div cu id "container". Vom adăuga câteva culori și un „margin: 0px auto;” pentru a ne asigura că containerul nostru este centrat în pagină. Trebuie să oferim conținutului un top de umplutură și antetul o valoare absolută cu un „top: 0px” pentru a ne asigura că antetul este poziționat deasupra celuilalt conținut. culorile urate. Este doar pentru a face mai ușoară citirea culorilor și pentru a vedea diferitele div. Vom avea nevoie de acest cod de curățare ciudat pentru a ne asigura că diviziunile noastre de navigare și conținut (adăugate în pasul următor) nu cad din divul înconjurător.

Pasul 4: Faceți două divizări în Diviziunea de conținut pentru navigare și conținut real

Vom adăuga acum încă două div-uri în div-ul de conținut. Una pentru navigare și una pentru conținutul real. Între eticheta de conținut; veți adăuga noul cod:

Navigare Conținut principal Vom adăuga câteva coduri css pentru a afișa diviziunile de navigare și conținutul principal; div # nav {width: 200px; plutește la stânga; fundal: portocaliu;} div # maincontent {width: 600px; plutitor: dreapta; fundal: roz;} Rețineți faptul că aceste două divs sunt ambele plutitoare. Dacă nu am fi pus codul de clearfix suplimentar în pasul anterior, divs ar pluti în afara divului înconjurător. Cu metoda clearfix, ne vom asigura că acest lucru nu se întâmplă.

Pasul 5: Adăugați câteva divizări suplimentare pentru structură în navigare

Vom adăuga acum câteva divs suplimentare atât divului „nav”, încât să creăm un fel de structură în pagina noastră web. Schimbați următorul bit de cod:

• Foo
• Bar

Vom adăuga acum o bucată de cod pentru a defini modul în care div "navblock" trebuie afișat. Rețineți că navblock-ul are o clasă, nu un id. Motivul pentru aceasta este simplu; divs-urile cu un ID sunt afișate o singură dată (blocul de navigare, antetul, subsolul, …). Diviziunile cu clase pot fi afișate de mai multe ori. Aici vom folosi o clasă. Doar în cazul în care mai târziu vom dori să adăugăm un alt bloc de navigare.div.navblock {width: 180px; margine: 5px auto; border: 1px roșu continuu;} Dacă dorim să adăugăm un alt bloc de navigare, va trebui doar să adăugăm o nouă … structură. Codul dvs. va arăta astfel;

• Foo
• Bar
• Boo
• Departe

Pasul 6: Adăugați câteva divizări suplimentare pentru structură în conținutul principal

Acum vom face același lucru pentru divul principal. Codul arată acum:

Lorem ipsum dolor sit amet, …

Din nou, vom adăuga o bucată de cod în fișierul nostru CSS pentru a determina modul în care div trebuie să fie afișat: div.contentblock {width: 580px; margine: 5px auto; border: 1px alb solid;} Acum putem adăuga un alt bloc de conținut adăugând un alt „…” în div-ul principal al conținutului astfel;

Lorem ipsum dolor sit amet, …

Nurs cursus, justo eget elementum dictum, …

Pasul 7: Faceți site-ul puțin mai puțin urât

Acum partea distractivă; culori. Acum că avem structura div principală, putem schimba culorile în ceva puțin mai haotic / urât / … Doar jucați-vă cu culorile din fișierul CSS. Iată fișierul html complet al paginii web afișat în imagine: Test

• Foo
• Bar
• Boo
• Departe

Lorem ipsum dolor sit amet, …

Nurs cursus, justo eget elementum dictum, …

Header Și acesta este fișierul CSS complet: body {background: # 444444; font-family: verdana, arial, sans-serif; culoare: # 444444; dimensiunea fontului: 12 px; margin: 0px;} div # container {width: 800px; margine: 0px auto; fundal: #FFFFFF; padding: 0px;} div # content {width: 800px; tapițerie: 100px; fundal: #FFFFFF;} div # header {width: 800px; înălțime: 100px; fundal: # 888888; poziție: absolută; top: 0px;} div # nav {width: 200px; plutește la stânga; fundal: #FFFFFF;} div # maincontent {width: 600px; plutitor: dreapta; fundal: #DDDDDD;} div.navblock {width: 180px; margine: 5px auto; border: 1px solid #DDDDDD;} div.contentblock {width: 580px; margine: 5px auto; border: 1px solid #FFFFFF;}. clearfix: după {content: "."; display: bloc; înălțime: 0; clar: ambele; vizibilitate: ascuns;}. clearfix {display: inline-block;} / * Ascundeți din IE Mac / * /. clearfix {display: block;} Deci, acum aveți elementele de bază. Bineînțeles că mai sunt multe de editat, cum ar fi culorile, dimensiunile fontului, un bloc de navigație mai aspectuos, … Dar acest instructable este doar despre structura div. Dacă doriți să vedeți alte instrumente conexe, puteți întreba oricând. Voi vedea dacă găsesc timpul.