Създаване на модулна решетка в бързаме

В този урок ще се занимава с принципите на организацията на модулна мрежа, което е много популярно решение в изграждането на различни модели. По време на усвояването на учебния материал, ще бъде в състояние да изгради своя собствена модулна решетка. Полученият код може да бъде използван и в други проекти. Но примери за модулни мрежи на различни обекти са представени в един от уроците на нашия уебсайт.

Завършил работа среда за модулна мрежа. Предимства и недостатъци.

Има доста голям брой готови за използване на работната среда за организацията на модулни мрежи (напр 960.gs). такива готови решения спомагат за ускоряване на развитието. Няма нужда да се мисли за това как да се организира колона. Просто свържете системата към готов проект и посветят свободното си време да мисля чрез дизайн.

Въпреки това, тези готови решения имат недостатъци. За начинаещите програмисти, повечето от тях са доста тромава структура на кода и лекотата на създаване на шаблон често се губи за намиране на най-подходящия стил за HTML елемент.

В допълнение, модулна мрежа в готовите работни среди имат свои собствени много ограничени възможности. Имате право да играят по техните правила, или всички тънък структура може да бъде компрометирана. корекция на кода, колкото искате да се превърне в един дълъг и доста болезнен процес, който би лишило всички временни предимства.

Е, освен това, генерализирани неясни имена на класове може да обърка останалите членове на екипа ви, които са ангажирани с строгите семантиката на кода.

Изграждане на модулна решетка.

Някои предприемачи като работна среда за модулна мрежа, а някои - не. Този урок е предназначен за тези, които взеха позиция между две противоположни лагери. Вие може да искате от предимствата, които получавате от използването на модулна решетка (особено строителството на скоростта на шаблон). Но цената, която плащаме за готово решение може да ви злепостави.

Подобни съображения придобиват специален сила в изграждането на прости страници. Разбира се, това е страхотно да получите помощ в строителната шаблона. Но, за да плъзнете цялата работната среда на една страница - тя изглежда като една единствена засаждане малки разсад, с помощта на един як багер.

За този тип система би било логично да се откаже от всички операционни среди. Но това ще бъде удобно да се изгради вместо система от сходство за изграждане на колоните в движение.

Целта на този урок е да се създаде система, която може да се използва повторно за изграждане на сложни модели, които се състоят от няколко колони в различни проекти. Системата трябва да е малък и не води до използването на излишни код. Тя не трябва да бъде огромен списък от класове, които не се вписват в семантиката на кода и почти никога не се използват. Системата трябва да бъде гъвкав и да се насърчи да го използва във всеки проект, а не постави в най-далечния ъгъл на магазина му да забрави завинаги. Ако изведнъж реши да промени ширината на екрана за вашия проект, нашата модулна мрежа трябва да се промени почти самостоятелно и без проблеми. На последно място, изпълнението на код трябва да бъде проста и бърза.

Създаване на колони в CSS

Ако не сте запознати със създаването на CSS шаблон, след създаването на мулти-колона шаблон може да изглежда обезсърчително да ви процеса. Очевидно е, че ако беше лесно, а след това там не са толкова много различни библиотеки.

Да речем, че искате да инсталирате четирите колони. Първото нещо, което трябва да се вземе под внимание - ширината. Например, нашият контейнер е с ширина от 900 пиксела. Ако пиксела 900 разделена на 4 колони, ние получаваме 225 пиксела една колона. Толкова е просто! Но тези лектори ще се придържат към един друг. Ето защо между тях трябва да се отмества. Но маржове ще надуват ни шаблон и натиснете колоната извън контейнера.

Ние трябва да се вземат предвид ширината на уплътнението между колоните. Да приемем, първо, второ и трето колони са врязани в дясно от 3 пиксела (марж-право на собственост). След три отстъп ще заемат 9 пиксела, а ширината на колоната ще бъде (900 пиксела - 9 пиксела) /4=225.75 пиксела.

Такава проста задача изисква математически изчисления. Разбира се, те са далеч от висшата математика, но промяната в широчината на родителския контейнер ще изисква от нас да се възстанови извършване на изчисления

Трябва да използвате друг метод, който ще доведе до промени в поколението при смяна на елементите майки.

ние използваме интерес

Ако вместо пиксели, които да се използват проценти, нашите математически изчисления ще станат малко по-лесно, а на мрежата ще се превърне в сянка на интелигентност достатъчно да варира в зависимост от широчината на родителския контейнер.

Вместо да водят всички изчисления в главата ти може да се използва за инструмент за изчисление. Налице е сравнително лесно онлайн програмируем калкулатор, който е подходящ да се справят с такива прости задачи - Instacalc.

Instacalc ви позволява да създадете формули, за да преизчисли. За нашите изчисления, специален калкулатор (можете да създадете своя собствена, ако желаете), където можете да промените броя на колоните, вдлъбнатината между говорителите и да получават изчислените стойности за ширината на колона. За ширина проценти, използвани, 100% - ширината на контейнера майка.

Ако трябва да се направи изчисления за трите колони, а след това просто смяна на първа линия на калкулатора 4 от 3 и да получите резултат.

Ние изграждаме нашата мрежа

Толкова за теорията. Нищо няма да ви помогне да разберете по-добре материала, отколкото практическо решение на наболял проблем.

Сега да преминем към CSS. Първо настройте ширината на контейнера и преливник имота: скрит. Тогава питам клас стил с помощта на направени изчисления резултат. Те се съхраняват в калкулатора.

Вместо това, голяма библиотека, попитахме няколко реда код, който да създаде четири колони от текст.

Можете да промените ширината на контейнера. Целият модел е реконструиран автоматично. Но за това е необходимо да инсталирате гумен шаблон и широчината на контейнера като процент. Тогава когато ширината на прозореца на браузъра също е пропорционална на всички промени.

Комбинирането на колона

Какво става, ако ние ще се нуждаят от две или повече колони в един широк? Необходимо е да се направят изчисления и да се създаде подходящите класове, които по-късно ще бъдат приложени към DIV на елементи.

Калкулаторът има формула за изчисляване на две или три колони комбинират.

Кодът на CSS е необходимо да се добавят класа към общите графи:

Нашата код в браузъра ще бъде, както следва:

Сега можете да комбинирате различни варианти за поставяне на съдържание, за да създадете интересни модели.

заключение

В резултат на това ние имаме модулна решетка. който автоматично настройва на широчината на контейнера. Кодът е много компактен и отговаря на изискванията на семантика.

Така че може да се изгради една по-сложна модулна решетка. И създаването им не изисква значителни усилия от страна на строителя.

До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!

Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!

Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.

Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!