Divas tīmekļa vietnes pamati: 7 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 11:00

Šī pamācība parādīs pašus pamatus, kā izveidot vietni, izmantojot divs. Jo izkārtojumam izmantotās tabulas ir ļaunas!: pLai saprastu šo pamācību, jums jāzina pamata html un css. Ja kaut ko nesaprotat, jautājiet. Manā personīgajā mājaslapā tiek izmantota arī šāda veida divstruktūra.

1. darbība: izveidojiet pamata failus

Vispirms izveidojiet savu html failu. Mēs tam pievienosim pašus pamatus. Css fails pagaidām būs tukšs. Html failā tagad ir: tests Saglabājiet savu html failu kā kaut ko.html. Jūs pats varat izvēlēties nosaukumu. Jūsu css fails ir jāsaglabā kā.css. Noteikti piešķiriet tam tādu pašu nosaukumu, kāds minēts html failā. Šajā gadījumā "style.css". Mums tagad ir vienkārša tukša html lapa, kad tā tiek priekšskatīta mūsu pārlūkprogrammā.

2. darbība: rediģējiet pamattekstu pamatkrāsām, fontiem,…

Mēs atstāsim html failu tādu, kāds tas ir, un rediģēsim tikai css failu. Pievienojiet savam css failam šādu kodu: body {background: #444444; fontu saime: verdana, arial, sans-serif; krāsa: #444444; fonta lielums: 12 pikseļi; margin: 0px;} Ar šo koda bitu mēs definēsim visas pamatzīmes atzīmes. Tā kā viss saturs ir ķermeņa tagā, šie iestatījumi ietekmēs visu lapu. Fona un fonta krāsa (krāsa) ir iestatīta uz tumši pelēku. Fontu saime (fontu saime) ir iestatīta uz verdana. Ja datoram, kas tiek izmantots mūsu vietnes skatīšanai, nav fonta "verdana", tas parādīs mūsu vietni ar fontu "arial". Sarakstam varat pievienot vairāk fontu. "Sans-serif" ir vispārējs veids, kas tiks izmantots, ja jūsu norādītais fonts nebija pieejams. Fonta lielums (fonta lielums) ir iestatīts uz 12 pikseļiem. Šī ir absolūta vērtība. Ja vēlaties rediģēt citus fontu izmērus (piemēram, galvenes, rindkopas, izvēlnes vienumus utt.), “Px” vietā varat izmantot relatīvo vienību “em”. Tādā veidā, ja vēlaties mainīt savas vietnes izmērus, jums būs jāmaina tikai pamatteksta lielums. Piemale ir iestatīta uz 0 pikseļi visām četrām ķermeņa taga pusēm. Tas tiek darīts, lai pārliecinātos, ka vietne pielīp pie loga augšdaļas.

3. darbība: konteinera pievienošana ar galveni un saturu

Tagad mēs pievienosim konteineru. Tas ir vienkārši centrēts divs, kurā būs visa mūsu vietne. Šajā konteinerā mēs pievienosim vēl divus divus; saturs div un galvene div. Mūsu html fails tagad izskatīsies šādi: testa satura galvene Mēs pievienosim mūsu css failam šādu kodu: div#container {width: 800px; mala: 0 pikseļi automātiski; fons: #FFFFFF; polsterējums: 0 pikseļi;} div#saturs {platums: 800 pikseļi; polsterējums: 100 pikseļi; fons: dzeltens;} div#header {platums: 800px; augstums: 100 pikseļi; fons: zils; pozīcija: absolūta; augšā: 0 pikseļi;}. skaidrs labojums: aiz {content: "."; displejs: bloks; augstums: 0; skaidrs: abi; redzamība: slēpta;}. clearfix {display: inline-block;}/* Slēpt no IE Mac \*/. clearfix {display: block;} div#konteiners nozīmē, ka mums ir div tags ar ID "konteiners". Mēs pievienosim dažas krāsas un "rezervi: 0 pikseļi automātiski"; lai pārliecinātos, ka mūsu konteiners ir lapas centrā. Mums ir jāsniedz saturam polsterējums un galvenei absolūta vērtība ar "top: 0px", lai pārliecinātos, ka galvene ir novietota virs cita satura. neglītās krāsas. Tas ir tikai, lai atvieglotu krāsu lasīšanu un redzētu dažādus divus. Mums būs vajadzīgs šis dīvainais skaidrs labojuma kods, lai pārliecinātos, ka mūsu navigācijas un satura sadaļas (pievienotas nākamajā darbībā) neizkrist no apkārtējās sadaļas.

4. darbība. Izveidojiet divas sadaļas satura nodaļā navigācijai un faktiskajam saturam

Tagad satura sadaļā mēs pievienosim vēl divus divus. Viens navigācijai un viens faktiskajam saturam. Starp satura tagu; jūs pievienosit jauno kodu:

Navigācija Galvenais saturs Mēs pievienosim kādu css kodu, lai parādītu navigāciju un galveno saturu div; div#nav {width: 200px; pludiņš: pa kreisi; fons: oranžs;} div#maincontent {platums: 600 pikseļi; pludiņš: pa labi; fons: rozā;} Ņemiet vērā faktu, ka abi šie div ir peldoši. Ja iepriekšējā solī nebūtu ievietots papildu skaidrs labojuma kods, divs peldētu ārpus apkārtējās div. Izmantojot clearfix metodi, mēs nodrošināsim, ka tā nenotiek.

5. darbība. Pievienojiet dažas papildu ierīces struktūrai navigācijā

Tagad mēs pievienosim dažus papildu elementus abiem "nav" diviem, lai mūsu tīmekļa vietnē izveidotu sava veida struktūru. Mainiet šādu koda bitu:

• Foo
• Bārs

Tagad mēs reklamēsim koda gabalu, lai definētu, kā jāparāda div "navblock". Ņemiet vērā, ka navbloķim ir klase, nevis ID. Iemesls tam ir vienkāršs; divs ar ID tiek parādīts tikai vienu reizi (navigācijas bloks, galvene, kājene utt.). Diskus ar klasēm var parādīt vairāk nekā vienu reizi. Šeit mēs izmantosim klasi. Tikai gadījumā, ja vēlāk vēlēsimies pievienot citu navigācijas bloku.div.navblock {width: 180px; mala: 5 pikseļi automātiski; robeža: 1px nepārtraukti sarkans;} Ja mēs vēlamies pievienot vēl vienu navigācijas bloku, jums vienkārši jāpievieno jauna… struktūra. Tagad jūsu kods izskatīsies šādi;

• Foo
• Bārs
• Boo
• Tālu

6. darbība. Pievienojiet galvenajam saturam dažas papildu struktūras

Tagad mēs darīsim to pašu attiecībā uz galveno saturu. Kods tagad izskatās šādi:

Lorem ipsum dolor sit amet,…

Atkal mēs pievienosim koda gabalu mūsu css failam, lai noteiktu, kā ir jāparāda div: div.contentblock {width: 580px; mala: 5 pikseļi automātiski; robeža: 1px nepārtraukti balta;} Tagad mēs varam pievienot vēl vienu satura bloku, pievienojot vēl vienu "…" galvenajā satura sadaļā, piemēram, šo;

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

7. solis: Padariet vietni nedaudz mazāk neglītu

Tagad jautrā daļa; Krāsas. Tagad, kad mums ir galvenā div struktūra, mēs varam mainīt krāsas uz kaut ko nedaudz mazāk haotisku/neglītu/… Vienkārši spēlējiet ar css faila krāsām. Šeit ir pilns attēlā redzamās tīmekļa lapas html fails: pārbaude

• Foo
• Bārs
• Boo
• Tālu

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Galvene Un tas ir pilnīgs css fails: body {background: #444444; fontu saime: verdana, arial, sans-serif; krāsa: #444444; fonta lielums: 12 pikseļi; piema: 0px;} div#konteiners {platums: 800px; mala: 0 pikseļi automātiski; fons: #FFFFFF; polsterējums: 0 pikseļi;} div#saturs {platums: 800 pikseļi; polsterējums: 100 pikseļi; fons: #FFFFFF;} div #galvene {platums: 800 pikseļi; augstums: 100 pikseļi; fons: #888888; pozīcija: absolūta; augšā: 0 pikseļi;} div#nav {platums: 200 pikseļi; pludiņš: pa kreisi; fons: #FFFFFF;} div #maincontent {platums: 600 pikseļi; pludiņš: pa labi; fons: #DDDDDD;} div.navblock {platums: 180px; mala: 5 pikseļi automātiski; apmale: 1px cieta #DDDDDD;} div.contentblock {platums: 580px; mala: 5 pikseļi automātiski; apmale: 1px cieta #FFFFFF;}. clearfix: aiz {content: "."; displejs: bloks; augstums: 0; skaidrs: abi; redzamība: slēpta;}. clearfix {display: inline-block;}/* Paslēpt no IE Mac \*/. clearfix {display: block;} Tātad tagad jums ir pamati. Protams, vēl ir daudz ko rediģēt, piemēram, krāsas, fontu izmēri, labāks navigācijas bloks … Bet šis pamācības attiecas tikai uz div struktūru. Ja vēlaties redzēt citus saistītus norādījumus, vienmēr varat jautāt. Paskatīšos, vai varu atrast laiku.