✅ Išdėstymas naudojant CSS klases iš 960 tinklelio sistemos

Turinys

The CSS 960 tinklelio sistemos sistemaTai ne kas kita, kaip stilių standartizavimas, suteikiantis reikiamas klases, kad būtų galima įdiegti įvairaus dydžio stulpelius tinklalapyje, kad būtų galima lengvai ir tvarkingai išdėstyti mūsų turinį.
960 tinklelio sistema turi šį pavadinimą, nes ji yra tinklelio sistema, skirta 960 pikselių pločio puslapiams kurti. Stulpeliai, kuriuos galime sudėti į tinklelį, bus skirtingo pločio, tačiau bendras puslapio plotis visada bus 960 pikselių.
Naudodami šias iš anksto nustatytas css klases, mes galime naudoti 12 arba 16 stulpelių, kad sukurtume maketus, kiekviename iš stulpelių kairioji ir dešinioji paraštės yra 10 pikselių, kad būtų sukurtas 20 pikselių skirtumas tarp stulpelių. Žinodami tai sakome, kad jei naudoju 12 stulpelių, kiekvienas stulpelis bus 60 pikselių, o jei aš naudoju 16 stulpelių, kiekvieno pločio bus 40 taškų.
Norėdami turėti gui, pridedame stulpelių pasiskirstymo vaizdą.
Tai labai lengva išdėstyti tokiu būdu ir, žiūrėdami į vaizdą, susidarome idėją, kaip tai padaryti. Šios pamokos tikslais mes sukursime svetainės struktūros ir informacijos išdėstymo maketą.
Pradedame savo pavyzdį sukurdami failą 960test.html ir tarp žymų pridėdami šį css
[spalva = # 000000]

[/Spalva]
Šie failai turi 960 tinklelio sistemos klases, jei mums reikia naujų CSS, mes juos pritaikysime atskirame faile, mes niekada nekeisime sistemos, kad ji būtų standartinė.
Čia yra paprastas išdėstymas, kuris geriau paaiškina 960 tinklelio naudojimą

Automobiliai

Susimokėti; įmoka
RSS

Viršelis
žinios
Nariai
Akcijos
Susisiekite su mumis

Kažkoks titulas

Donec malesuada dictum orci. Pellentesque felis arcu, malesuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementum feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae neapykanta. Fusce ut urn eu išlaisvina luctus malesuada. Nulla quam arcu, adipiscing quis, hendrerit ac, malesuada ut, ante.

Automoviles.com Autorių teisės 2014 | Reklama | Teisinis | kontaktas

Šalia pavyzdžio pridedame failą mysyles.css

 @charset "iso-8859-2"; / * CSS dokumentas * / div.spacer {aukštis: 1em; } #top {plotis: 100%; fonas: # 29231e; padėtis: giminaitis; viršuje: 0; kairėje: 0; } #top ul {margin: 10px 0 10px 0; spalva: #FFFFFF; } #top ul li {display: inline; } #bodyMain {background: url (… /images/nubes-background.jpg.webp) viršuje centras be pakartojimo; } #rss {fonas: url (… /images/rss-logo.gif.webp) nekartojimo teisė; paminkštinimas: 5px 30px 5px 0; } # logotipas {fonas: url (… /images/vos-voz.gif.webp) be pakartojimo; plotis: 470 pikselių; aukštis: 92 taškų; plūdė: kairė; paraštė: 150 pikselių; } img # city-logo {float: left; } #header {border-bottom: 5px solid # 29231e; fonas: url (… /images/header.jpg.webp) no-pakartoti; aukštis: 173 pikselių; } #contentMain {background: #FFFFFF; paminkštinimas: 10 pikselių; kraštas apačioje: 5px # A1DEF0 vientisas; } #contentMain h1, #contentMain h3 {color: #4991a5; } #meniu {fonas: # e7f7fb; } #meniu ul {padding-top: 10px; paraštė-apačia: 10 taškų; } #meniu ul li {display: inline; šriftas: 20 piks. paryškintas „Arial“, „Helvetica“, „sans-serif“; } .article {margin-left: 15px; } img.border-blue {border: 5px solid # e7f7fb; paraštė-apačia: 10 taškų; } #footer {font-size: 11px; }

Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką