Распоред са ЦСС класама из 960 Грид система

Преглед садржаја
Тхе Оквир мрежног система ЦСС 960То није ништа друго до стандардизација стилова која обезбеђује потребне класе за имплементацију колона на веб страници, различитих величина, помоћу којих се лако и уредно поставља наш садржај.
960 Грид Систем има ово име јер је мрежни систем за прављење страница ширине 960 пиксела. Колоне које можемо поставити на мрежу ће имати различите ширине, али укупна ширина странице ће увек бити 960 пиксела.
Са овим унапред дефинисаним цсс класама, можемо да користимо 12 или 16 колона за креирање распореда, при чему свака колона има леву и десну маргину од 10пк, за стварање 20пк раздвајања између колона. Знајући ово, кажемо да ако користим 12 колона, свака колона ће имати 60 пиксела, а ако користим 16 колона, ширина сваке ће бити 40 пиксела.
Да бисмо имали гуи, додајемо слику о томе како су колоне распоређене.
На овај начин је веома лако поставити распоред и гледајући слику добијамо идеју како то да урадимо. За потребе овог водича, креираћемо изглед за структурирање веб странице и организовање информација.
Наш пример започињемо креирањем датотеке 960тест.хтмл и додајемо следећи цсс између ознака
[цолор = # 000000]
 
[/Боја]
Ове датотеке су оне које имају класе 960 грид фрамеворк -а, ако нам затреба нови цсс, ми ћемо их применити у засебној датотеци, никада нећемо мењати фрамеворк да би био стандард.
Ево једноставног распореда који боље објашњава употребу 960 Грид -а

 Аутомобилес
  • Платити
  • РСС
  • Насловна страна
  • Вести
  • Чланови
  • Промоције
  • Контактирајте нас

Донец малесуада дицтум орци. Пеллентескуе фелис ​​арцу, малесуада егет, цонваллис сед, сусципит егет, теллус. Нуллам лецтус. Нам елементум феугиат ми. Нулла куис лео ут дуи вариус бландит. Црас виверра ерос витае хате.

Неки наслов

Донец малесуада дицтум орци. Пеллентескуе фелис ​​арцу, малесуада егет, цонваллис сед, сусципит егет, теллус. Нуллам лецтус. Нам елементум феугиат ми. Нулла куис лео ут дуи вариус бландит. Црас виверра ерос витае хате.

Донец малесуада дицтум орци. Пеллентескуе фелис ​​арцу, малесуада егет, цонваллис сед, сусципит егет, теллус. Нуллам лецтус. Нам елементум феугиат ми. Нулла куис лео ут дуи вариус бландит. Црас виверра ерос витае хате.

Неки наслов

Донец малесуада дицтум орци. Пеллентескуе фелис ​​арцу, малесуада егет, цонваллис сед, сусципит егет, теллус. Нуллам лецтус. Нам елементум феугиат ми. Нулла куис лео ут дуи вариус бландит. Црас виверра ерос витае хате. Фусце ут урн еу ослобађа луцтус малесуада. Нулла куам арцу, адиписцинг куис, хендрерит ац, малесуада ут, анте.

Донец малесуада дицтум орци. Пеллентескуе фелис ​​арцу, малесуада егет, цонваллис сед, сусципит егет, теллус. Нуллам лецтус. Нам елементум феугиат ми. Нулла куис лео ут дуи вариус бландит. Црас виверра ерос витае хате.

Аутомовилес.цом Ауторска права 2014 | Оглашавање | Легал | Контакт


Затим, да завршимо пример, додајемо датотеку мистилес.цсс
 @цхарсет "исо-8859-2"; / * ЦСС документ * / див.спацер {висина: 1ем; } #топ {видтх: 100%; позадина: # 29231е; положај: релативан; врх: 0; лево: 0; } #топ ул {маргин: 10пк 0 10пк 0; боја: #ФФФФФФ; } #топ ул ли {дисплаи: инлине; } #бодиМаин {бацкгроунд: урл (… /имагес/нубес-бацкгроунд.јпг) горњи центар без понављања; } #рсс {бацкгроунд: урл (… /имагес/рсс-лого.гиф) без понављања десно; паддинг: 5пк 30пк 5пк 0; } а # лого {бацкгроунд: урл (… /имагес/вос-воз.гиф) но-репеат; ширина: 470пк; висина: 92пк; флоат: лефт; маргин-топ: 150пк; } имг # цити-лого {флоат: лефт; } #хеадер {бордер-боттом: 5пк солид # 29231е; бацкгроунд: урл (… /имагес/хеадер.јпг) но-репеат; висина: 173пк; } #цонтентМаин {бацкгроунд: #ФФФФФФ; паддинг-топ: 10пк; бордер-боттом: 5пк # А1ДЕФ0 солид; } #цонтентМаин х1, #цонтентМаин х3 {цолор: #4991а5; } # мени {позадина: # е7ф7фб; } #мену ул {паддинг-топ: 10пк; маргин-боттом: 10пк; } #мени ул ли {дисплаи: инлине; фонт: 20пк болд Ариал, Хелветица, санс-сериф; } .чланак {маргин-лефт: 15пк; } имг.бордер-блуе {бордер: 5пк солид # е7ф7фб; маргин-боттом: 10пк; } #фоотер {фонт-сизе: 11пк; }
Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен

Ви ће помоћи развој сајта, дељење страницу са пријатељима

wave wave wave wave wave