✅ Izkārtojums ar CSS klasēm no 960 Grid System

Satura rādītājs

CSS 960 režģa sistēmas ietvarsTas ir nekas cits kā stilu standartizācija, kas nodrošina nepieciešamās klases dažādu izmēru kolonnu ieviešanai tīmekļa lapā, ar kurām viegli un sakārtoti izkārtot mūsu saturu.
960 režģa sistēmai ir šāds nosaukums, jo tā ir režģa sistēma lapu veidošanai ar 960 pikseļu platumu. Kolonnām, kuras mēs varam ievietot režģī, būs dažādi platumi, bet kopējais lapas platums vienmēr būs 960 pikseļi.
Izmantojot šīs iepriekš definētās css klases, mēs varam izmantot 12 vai 16 kolonnas, lai izveidotu savus izkārtojumus. Katrai slejai ir kreisā un labā mala 10 pikseļi, lai izveidotu 20 pikseļu attālumu starp kolonnām. Zinot to, mēs sakām, ka, ja es izmantoju 12 kolonnas, katra kolonna būs katra 60 pikseļi, un, ja es izmantošu 16 kolonnas, katras platums būs 40 pikseļi.
Lai iegūtu gui, mēs pievienojam attēlu, kā slejas tiek sadalītas.
Šādi izkārtot ir ļoti vienkārši, un, aplūkojot attēlu, mēs iegūstam priekšstatu par to, kā to izdarīt. Šīs apmācības nolūkos mēs izveidosim izkārtojumu, lai strukturētu vietni un sakārtotu informāciju.
Mēs sākam savu piemēru, izveidojot failu 960test.html un starp tagiem pievienojam šādu css
[krāsa = # 000000]

[/Krāsa]
Šie faili ir tie, kuriem ir 960 režģa ietvara klases, ja mums ir nepieciešams jauns css, mēs tos lietosim atsevišķā failā, mēs nekad nemainīsim ietvaru, lai tas būtu standarts.
Šeit ir vienkāršs izkārtojums, lai labāk izskaidrotu 960 režģa izmantošanu

Automobiļi

Iemaksājiet
RSS

Titullapu
Jaunumi
Locekļi
Akcijas
Sazinies ar mums

Daži virsraksti

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 ienīst. Fusce ut urn eu atbrīvo luctus malesuada. Nulla quam arcu, adipiscing quis, hendrerit ac, malesuada ut, ante.

Automoviles.com Autortiesības 2014 | Reklāma | Juridiski | Kontakti

Tālāk, lai pabeigtu piemēru, mēs pievienojam failu mystyles.css

 @charset "iso-8859-2"; / * CSS dokuments * / div.spacer {augstums: 1em; } #top {platums: 100%; fons: # 29231e; stāvoklis: radinieks; augšā: 0; pa kreisi: 0; } #top ul {margin: 10px 0 10px 0; krāsa: #FFFFFF; } #top ul li {display: inline; } #bodyMain {background: url (… /images/nubes-background.jpg.webp) augšējais centrs bez atkārtojuma; } #rss {fons: url (… /images/rss-logo.gif.webp) bez atkārtošanas tiesības; polsterējums: 5px 30px 5px 0; } # logotips {fons: url (… /images/vos-voz.gif.webp) bez atkārtojuma; platums: 470 pikseļi; augstums: 92 pikseļi; pludiņš: pa kreisi; augšējā mala: 150 pikseļi; } img # city-logo {float: left; } #header {border-bottom: 5px solid # 29231e; fons: url (… /images/header.jpg.webp) no-pakartot; augstums: 173 pikseļi; } #contentMain {background: #FFFFFF; polsterējums: 10 pikseļi; robeža apakšā: 5 pikseļi # A1DEF0 ciets; } #contentMain h1, #contentMain h3 {color: #4991a5; } #izvēlne {fons: # e7f7fb; } #menu ul {padding-top: 10px; apakšējā mala: 10 pikseļi; } #izvēlne ul li {displejs: inline; fonts: 20 pikseļi treknrakstā Arial, Helvetica, sans-serif; } .article {margin-left: 15px; } img.border-blue {border: 5px solid # e7f7fb; apakšējā mala: 10 pikseļi; } #footer {font-size: 11px; }

Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu