. Подобно е на тухла при изграждането на сграда. Въпреки че съставлява основата и дизайна на сайта, той обаче не е единственият. Подобно на врати, прозорци, вентилация, балкони и други подобни, други HTML елементи се използват за оформление. Това са връзки, формуляри, картинки, списъци и таблици.
ни позволи да направим кода по-компактен и ясен. Преходът към блоково оформление направи възможно освобождаването на HTML от ненужни неща, а именно стилове. Направи възможно пълното премахване на претовареното и трудно за навигиране оформление на таблицата.
Активно използва CSS блоково оформление. Използвайки наличните инструменти, можете да създадете всяко оформление на страница с точност до пиксела. Това оформление се нарича идеален пиксел. Това предполага перфектно съответствие между сайта и оформлението. Снимката по-горе показва, че не всичко е толкова просто с блоковото оформление. Отначало беше просто невъзможно да се направи без маси. Те бяха използвани за създаване на основното оформление на страниците, а блоковете бяха използвани за отделни елементи. Това беше така, докато не се научиха как да задават височината на блоковете.
Предимства
Блоковото оформление на уебсайт има следните предимства:
По-нататъчно развитие
Понастоящем блоковото оформление на div е отхвърлено и има само ограничена употреба, само като специален случай за определени ситуации. Беше заменен от позициониране и поток в оформлението. Те имаха много недостатъци, но като цяло позволяваха повече от блоково оформление.
След това дойде строителството с помощта на вградени блокови елементи. Това значително улесни работата на програмистите. Този метод се възползва от двата типа блокове и ви позволява да създадете по-отзивчив и адаптивен дизайн. Струва си да се отбележи, че всички тези методи по един или друг начин се състоят от елемент div, което му дава името „прекрасно оформление“.
В момента Flex-box и bootstrap се използват за изграждане на страницата. Те значително намаляват кода и правят по-бързо и по-лесно създаването на висококачествен адаптивен дизайн. Те ви позволяват да местите блокове, без да нарушавате цялата страница.
В челните редици на прогреса е нова технология - Grids. Тя ви позволява да създавате дизайн с всякаква сложност много бързо и лесно. И блокове, поток, позициониране, както се случи с таблиците по едно време, се използват само по предназначение.
Div layout е актуален модел за създаване на уебсайтове.
В интернет непрекъснато се появяват нови сайтове - новинарски портали, блогове и лични страници. Почти всеки от тях е създаден на базата на блоков модел, чиято основа са DIV блокове. Днес ще разберем тази технология, ще разгледаме основните нюанси на оформлението на div.
Поток на HTML документ
Ако си спомним, че езикът HTML ви позволява да структурирате хипертекстова информация, става ясно, че всеки сайт в основата си е набор от блокове: снимки, текст, връзки и др. В момента не говорим конкретно за DIV, но те са тясно свързани теми.
И така, имаме определен поток от данни, от който се сглобява HTML страницата. В момента има два вида структурни елементи: блокови и вградени. Блоковите блокове в нормален HTML поток са разположени един след друг във вертикален ред. В същото време по подразбиране ширината на блока заема цялото налично пространство спрямо страницата или родителския елемент. На свой ред вградените елементи се подреждат един след друг в хоризонтален ред.
Основните представители на тези две категории са таговете div и span.
Съответно, ако говорим за нормален HTML поток, всички блокове div ще бъдат разположени един под друг, а span ще бъде в една линия.
Както разбирате, няма да можете да създадете нормално маркиране за уебсайт, като използвате вградени елементи. Ето защо, преди няколко години, за да заменят оформлението на таблицата, те решиха да използват оформление, базирано на DIV блокове.
Оформление на уебсайта на DIV
И така, DIV блоковете започнаха да се използват за маркиране на сайта. Използвайки ги, беше възможно да се изчертае основното оформление и да се създадат допълнителни блокове за всички необходими типове съдържание.
Нека да разгледаме този процес на примера на стандартна страница, която включва горен колонтитул, блок със съдържание, странична лента и долен колонтитул.
Това е класически вариант. Логото най-често се намира в хедъра на сайта, а връзките за навигация в страничния блок. Основният блок се използва за показване на информация - статии, описания на фирми, фотоархив и др. В долния блок можете да въведете адрес, контакти и друга сервизна информация.
Както можете да видите на снимката, ние използваме следните основни блокове за оформление на оформлението:
- заглавка
- съдържание
- долен колонтитул
Основният блок се използва като контейнер за цялото съдържание. Хедър - хедър на сайта. Nav - навигационен блок. Съдържание – основна информация и съдържание. Footer - долен колонтитул на сайта.
Всеки от тези блокове е DIV контейнер. Но въз основа на теорията блоковете трябва да следват един друг. Трябва да получим оформлението, обсъдено по-горе, така че блоковете да имат следната структура:
- ОСНОВЕН
- заглавка
- съдържание
- долен колонтитул
Освен това те ще бъдат разположени на страницата по същия начин, както виждаме в шаблона. Как можем да постигнем това? За целта ще използваме свойства за DIV блоковете, които ще ни позволят да ги позиционираме по желания начин, един спрямо друг и страницата като цяло.
Но първо, нека създадем HTML основата на нашето оформление и да дадем имена на блоковете, така че да можем да работим със стилови таблици.
HTML рамка
Ако пропуснем всички служебни тагове, тогава скелетът на нашия сайт ще изглежда така.
За всеки блок имаме зададен клас. С негова помощ ще зададем стилове за блока – това ще ни помогне да постигнем желаното място на страницата.
Време е да се запознаете със стиловете и свойствата, които се използват за div оформление на сайта.
CSS стилове
Ако някой още не знае, CSS стиловите таблици се използват в разработката на уебсайтове от дълго време. С тяхна помощ можете да промените всеки елемент на страницата. Това се отнася както за визуалния дизайн на блока, така и за неговото местоположение и мащаб.
Поплавък
Първо, нека да разгледаме свойството, което ви позволява да позиционирате DIV отдясно или отляво на страницата или спрямо неговия родителски контейнер.
Малко отстъпление. Всеки път, когато присвоим стил на блок, той ще промени своите свойства (размер, местоположение) спрямо родителския контейнер.
Свойството float има четири стойности: none, right, left, inherit.
Интересуваме се от значението на "ляво" и "дясно".
Плаващата стойност показва от коя страна ще бъде показан нашият блок. Всички останали блокове ще текат около него от противоположната страна.
В нашия случай за навигационния блок трябва да посочим стойността left , а за основното съдържание стойността right . Ето как ще изглежда във стиловия файл:
Nav ( float:left; ) .content ( float:right; )
Между другото, можете да зададете свойството само за навигационния блок. Блокът със съдържание автоматично ще бъде разположен вдясно от навигацията. Това ще бъде постигнато благодарение на float, който се получава чрез задаване на свойството float.
Полета в CSS: поле и подложка
Сега нека разберем две важни свойства, използвани в базираното на div оформление. Те са отговорни за отстъпа. Най-лесният начин да разберете същността на работата им е с пример.
Нека си представим какво трябва да направим, така че основният ни блок MAIN да има лек отстъп от заглавката на сайта. Това може да се постигне чрез присвояване на свойство margin на div с главния клас. Той отговаря за външната подложка на блока.
Свойството margin има следните стойности: [стойност | интерес | авто] (1,4) | наследяват.
По този начин можете да посочите отместването в пиксели, в проценти, за всяка страна на свой ред.
Възможно е да зададете само определен отстъп, например от горната страна. Точно такъв е нашият случай. Ето как ще се реализира:
Основен ( margin-top:10px; )
Сега основният ни блок ще има горна подложка от 10 пиксела.
Сега нека проектираме блок с навигация и съдържание. Представете си, че вече имаме готов уеб сайт. Всички връзки в навигацията са разположени близо до левия край на страницата. А текстът в блока със съдържание, напротив, е близо до дясната страна. Доста неприятен дизайн. Трябва да направим вътрешна подплата.
За това отговаря свойството padding, което има следните стойности: [стойност | процент] (1, 4) | наследяват
Принципът тук е същият като при свойството margin - можете да зададете отстъпа за всяка страна поотделно.
Nav ( float:left; padding-left: 15px; ) .content ( float:right; padding-right: 20px; )
Използвайки тези основни свойства, можете да постигнете желаното оформление на DIV блокове. В резултат на това ще получите готово оформление на уебсайта и остава само да го попълните с необходимата информация.
Видео към статията:
Заключение
Разгледахме само основните свойства. В действителност те са много повече. Но във всеки случай предоставената информация винаги ще се използва в оформлението на div.
Защо да търсите информация в други сайтове, ако всичко е събрано тук?
Авторската поредица от статии, посветени на основи на блоковото оформление на уебсайта. Това е първото място, от което започвате да изучавате темата. създаване на уебсайт. Уроците ще бъдат полезни за тези, които искат да научат основите HTML и CSSне само на теория, но и на практика.
Докато изучаваме темата, ще създадем уебсайт, обикновен уебсайт, без никакви специални звънци и свирки, но доста хубав.
В уроците просто и ясно говоря за базирано на блокове оформление на уебсайт и много повече. Ако искате бързо да разберете основите оформления на уебсайтове, тогава тази поредица от статии ще бъде точно това, от което се нуждаете.
Какво е блоково оформление?
Какво стана блокирайте оформлението на уебсайтаи с какво го ядеш?
Преди това уебсайтовете бяха проектирани с помощта на таблици. Всеки елемент от страницата, било то заглавие, текст или изображение, беше разположен в собствена клетка. Тези клетки се роят в други, по-големи клетки, а тези от своя страна лежат в основната клетка, тоест в самата страница на сайта.
Табличното оформление вече е остаряло, въпреки че много уеб администратори продължават да го използват. Големият му недостатък е тежкият код. В крайна сметка всяка малка клетка трябва да бъде обозначена с определени тагове.
Блоково оформление- съвсем различна песен. Тук всички елементи на страницата са разположени в специални блокове, наречени div. В основата си те са донякъде подобни на същите таблици. Кутията е кутия и в Африка. Но блоковете са много по-удобни, по-прости и по-функционални.
Блокирайтев оформлението на уебсайт това е правилна правоъгълна област, която има редица свойства, като например: рамка, полета и отстъпи. Съдържанието на блока може да бъде всичко - част от текст, картина, списък, форма за попълване, меню за навигация и др.
Кадър- това е контурът на блок, за който можете да зададете характеристики като дебелина, цвят и тип (пунктиран, плътен, пунктиран).
Полета (запълване)- отделете съдържанието на блока от рамката му, така че текстът, например, да не е „прилепен“ към стените на блока.
Маржове- това е празното пространство между различните блокове, позволяващо два блока да бъдат позиционирани един спрямо друг на дадено разстояние.
Блоковете, подобно на таблиците, винаги са подредени вертикално на страницата. Тоест, ако в кода на страницата са написани два блока подред, те ще се показват в браузъра един под друг. Ако трябва да подредим няколко блока хоризонтално в един ред, тогава в техните свойства задаваме параметър като „ тече наоколо"(поплавък). Но повече за това по-късно.
Блоково оформление на сайта. Етикети
Етикете специална конструкция на езика HTML. Разграничете отварянеИ затварянеетикети. Не ги бъркайте с хаштагове от социални мрежи или тагове в сайтове, това са различни неща!
В най-простия случай етикетът е като част от детски конструктор, който има свое строго предназначение: бар означава бар, колело означава колело и нищо друго. Например таг за параграф:
Текст на параграф.
винаги се обозначава с буквата p и нищо друго. Това е неговото име.
Етикетите винаги са затворени в ъглови скоби. Както можете да видите от примера, има отварящ и затварящ етикет. Затварящият етикет има наклонена черта, добавена преди името - наклонена черта / .
Не всички тагове имат затваряща двойка. Например етикетът за изображение на img изобщо го няма. Но за да отговарят на съвременните стандарти и изискванията на спецификацията XHTML, те все още добавят интервал с наклонена черта преди затварящата ъглова скоба. Изглежда нещо подобно:
div етикет
Тагът div е в основата на блоковото оформление. Това са самите кубчета, от които е изграден целият сайт. Този етикет е неутрален. За разлика от стандартните HTML тагове, които са стриктно обвързани със съдържанието си (p - към параграфи, a - към връзки, img - към изображения), тагът div може да съдържа всичко и толкова от тези неща, колкото искате. Приемете го като голяма кутия, в която са изхвърлени всички играчки.
Тагът div се използва за дефиниране функционални зони на страницата. Например, като: „заглавка“, навигационен блок, блок с основно съдържание, „долен колонтитул“ или долен колонтитул според нас.
Тагът div, както всеки друг таг, има свои собствени атрибути.
Атрибут- описателни характеристики на етикета. Тоест какво може да направи и как. Например, нека вземем етикет за изображение:
В този случай src, width, height, alt са атрибути на тагове. В кавички (и това също е задължително изискване на съвременните стандарти) са дадени стойностиатрибути.
Не е трудно да се дешифрира такъв запис. Тагът показва, че на това място на страницата трябва да прикачите изображението risunok.jpg от папката с изображения. Ширината на изображението е 200 пиксела, височината е 50 пиксела. И към купчината е добавен алтернативен текст, който обяснява какво е показано на снимката.
Между другото, алтернативният текст не е каприз, но и необходимо изискване. Не всички потребители на мрежата имат добро зрение. Някой използва програма за разпознаване и четене на текст. А някои хора просто изключват показването на изображения в браузъра. Ето защо има алтернативни надписи за рисунки.
Ако няма смисъл да ги подписвате (например маркер за списък или някаква стрелка), тогава атрибутът alt остава с празно място между кавичките.
атрибути на таг div
Тагът div има само два атрибута:
id - атрибут, който ви позволява да присвоите единствен по рода ситази, която се използва на страницата само веднъж. Например горен или долен колонтитул.
По този начин можем допълнително да зададем някои настройки в листа със стилове за тага div с атрибута id и стойността на заглавката и напълно различни за долния колонтитул. И браузърът правилно разпознава, че тази част от текста принадлежи към „заглавката“ и ще бъде въведена, например, с голям и червен шрифт, но тази принадлежи към „долния колонтитул“ и ще бъде въведена с малък и сив шрифт. И без объркване!
class е атрибут, който ви позволява да присвоите една и съща стойност на няколко елемента. Например, добавете рамка с еднаква дебелина и цвят към всички изображения на страницата. Тъй като има няколко изображения, атрибутът id вече не може да се използва, така че използваме class.
За първи път мисля, че е достатъчно. Ако нещо не е ясно относно блоковото оформление на уебсайтовете, попитайте в коментарите.
Следва продължение. Поддържате връзка!
Оформлението с div блокове отдавна се е превърнало в стандарт и има редица предимства пред табличното оформление. В действителност обаче начинаещите разработчици са объркани относно поведението на същите тези блокове.
Нека да разгледаме основните точки на блоковото оформление. Сега няма да вземаме под внимание стандарта html5, а просто ще разгледаме основите на оформлението с div блокове, което се използва при създаване на оформление или някакъв отделен компонент на страница.
Какво се счита за блоков елемент?
Площта на такъв елемент на страницата е представена от правоъгълник, по подразбиране той заема цялата налична ширина и започва на нов ред.
Най-често срещаният елемент, използван в блоковото оформление, е универсалният елемент
.
И така, от просто към сложно. Нека да видим как div се показват по подразбиране, без стиловете да влияят на позицията им. За по-голяма яснота ще добавим стилове към елементите в ред чрез атрибута style.
Блок 1
Блок 2
Блок 3
Нека добавим стойност за ширина за всеки блок:
Блок 1
Блок 2
Блок 3
Вижда се, че всеки блок, според спецификацията, е разположен на нов ред. Това е нормалното им поведение.
Сега възниква въпросът как да се позиционираме div блокове на един ред, едно след друго?
За тази цел има свойство, което определя от коя страна блокът ще бъде принуден да се подравни. В същото време от другия ръб може да тече около други елементи.
Свойството float има следните значения:
- ляво - блокът е подравнен към левия ръб, течащ надясно
- дясно - блокът е подравнен към десния ръб, течащ наляво
- none - не е указано обвиване, блокът се държи по подразбиране, както в предишните примери.
Нека добавим float:left към нашите блокове, така че блоковете да са подравнени вляво:
Блок 1
Блок 2
Блок 3
В резултат на това блоковете се подредиха на една линия. Добре, да кажем, че искаме да добавим още един div в долната част и ще го направим, без да посочваме свойството float:
Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Unit 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Unit 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Защо се случи това? Накратко, това се случва, защото плаващите елементи изпадат от потока на документа. Това обаче е тема за отделна статия. Тук ще се запознаем с новото свойство, което контролира поведението на плаващите елементи:
- ляво - деактивира обвиването от лявата страна, всички елементи ще бъдат показани на нов ред (под елемента)
- right - предотвратява увиването на елемента от дясната страна
- и двете - забранява обвиването на елемент от двете страни; препоръчително е да го използвате, когато ясно трябва да покажете елемента на нов ред или не е известно коя страна е възможно да обвиете други елементи
Нека добавим свойството clear:left към блок 4, което ще попречи на този елемент да се движи около други плаващи елементи от лявата страна.
Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Unit 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Unit 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Блок 4 се поставя на нов ред, както ни трябва.
В този случай знаем как са разположени другите блокове, така че в примера веднага посочихме clear:left. Има ситуации, когато не знаем точно коя страна ще срещне плаващият блок, така че в такива случаи си струва да посочите clear:both, което отменя потока от двете страни. Сега разбрахме как да позиционираме div блоковете хоризонтално на един ред.
Имайте предвид, че плаващите блокове се поставят на една и съща линия, ако ширината на родителския елемент позволява. Ако блоковите елементи не се поберат в един ред, те ще се преместят на нов ред. Ако това е критично, например, когато оформяте оформления, трябва да вземете това предвид и за блокове с float не забравяйте да зададете ширината - фиксирана (px) или гума (%, rem и т.н.). Нека да разгледаме такива ситуации по-нататък.
Как да повлияем на блоковете, ако искаме да поставим тези блокове в центъра?
Класическото решение би било да добавите родител към блоковете и да използвате margin: 0 auto; property.
Защо дадохме на родителя class.wrapper? "wrapper" означава "обвивка". Това е един вид общоприета практика, дефинираща името на класа, за елемент, който да обвива други блокове и по този начин да им позволява да бъдат контролирани/повлияни чрез промяна на самия родител.
Нека вземем маркирането от предишните примери и да го подобрим.
Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Unit 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Unit 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Тук всичко изглежда просто.
И ако не ни харесва, че текстът се прилепва плътно до ръба на родителския блок и искаме да добавим полета, без да правим промени в маркирането, само с помощта на css. Нека добавим свойството padding към елементите:
Блок 1. Лорем
Блок 2. Lorem ipsum
Блок 3. Lorem ipsum
Блок 4. Лорем
И виждаме, че оформлението ни се е разпаднало! Блок 3 отиде някъде. Защо се случи това? Отговорът е лесен. Чрез добавяне на полета към елементите увеличихме тяхната ширина. Сега стойностите са:
Блок 1: 10 + 200 + 10 = 220px
Блок 2: 10 + 150 + 10 = 170px
Блок 3: 10 + 100 + 10 = 120px
Блок 4: 10 + 450 + 10 = 470px
220 + 170 + 120 = 510 пиксела
Общата ширина на трите блока е 510, те не се вписват в ширината на родителя (450) и затова се прехвърлят на нов ред.
Как да го оправя? Можете да направите следното:
- Нулирайте стойностите на ширината за всеки блок, като вземете предвид полетата. Чрез намаляване на размерите на блоковете. Всичко отново ще се побере спретнато в една линия. Съгласни ли сте, че това е неудобно? Всеки път, когато вляза в оформлението и редактирам нещо.
- Използвайте свойството за оразмеряване на кутия: border-box. Така че изчислението се взема от общата ширина на блока. Съветвам ви да разберете какъв е блоковият модел на css.
Използвайки втората опция, се оказва така:
Блок 1. Лорем
Блок 2. Lorem ipsum
Блок 3. Lorem ipsum
Блок 4. Лорем
Блок 1. Лорем
Блок 2. Lorem ipsum
Блок 3. Lorem ipsum
Блок 4. Лорем
Сега нека съберем цялата информация, която получихме, и да се опитаме да създадем просто стандартно оформление с три колони с гъвкаво оформление, което ще се простира до максимум 900px, след което цялото оформление ще бъде позиционирано в центъра.
Създайте маркировка на оформлението:
Документ
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit rem fugit itaque, est impedit aperiam a autem repellat vitae porro ex expedita, cumque nulla, velit. Soluta velit eos, quia. Fugiat voluptates nisi aliquid eum sapiente sunt nobis, adipisci acceptenda earum!
Ние пишем стилове:
Тяло ( max-width: 900px; /* ограничава максималната ширина */ margin: 0 auto; ) /* за всички блокове в тялото, променете алгоритъма за изчисляване на ширината на блока и добавете 10px полета към всички блокове */ body div ( - webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px;) .header (фон: #CCA69E; padding: 10px;) .left- странична лента (ширина: 20 %; фон: #8ED9B6; float: ляво;) .content (float: ляво; ширина: 60%;) .дясна странична лента (ширина: 20%; фон: #FF9282; float: ляво; ) .footer (фон: #000; изчистване: и двете; /* деактивиране на обвиването от двете страни, блокът се показва на нов ред */ цвят: #ccc; )
Ако нещо не е ясно, попитайте в коментарите.
Може да е полезно да прочетете: