Как да използвате CSS оформление на сайта, за да се създадат две колони, CSS
В тази статия ще разгледаме правилата на етапа на сайта по стъпка оформление с две колони. Кодът ние ще ви позволи да добавите горен и долен колонтитул, които обхващат двата високоговорителя.
влизане
Използване на плувка собственост за създаване на две колони
Има много методи за използване на CSS, за да създадете сайт с две колони. В това ръководство, ние използваме поплавък имота. да се постави една страна на друга колона. В много отношения, този метод е по-лесно и по-гъвкав от метода на абсолютно позициониране на елементите. Той също така ви позволява да добавите допълнителен горен и долен колонтитул, които обхващат двата високоговорителя.
Аз самият се използва този метод, тъй като разположението на моя живот е създаден, когато все още бях само предприе първите стъпки в развитието на по CSS и не знам нищо за основните правила за налагане. Но не се притеснявайте. Аз създадох някои демо страници, които използват този формат, ще ги видите по-късно.
HTML код част е съвсем проста. Ние трябва само два блока Разделение. по един за всяка колона:
Думата "Меню за навигация" и "съдържание" са само указатели към страничната лента за навигация и основното съдържание. По-късно можете да премахнете тези думи, когато блоковете разположени в самото съдържание. Разделение "контейнер" - блок, съдържащ две колони. Може да се използва, ако искате да се прилагат някои стилове и за двете колони.
Кодът на CSS-долу използва процент ( "%") за определяне на ширината на двете колони. Тъй като те се измерват в относително изражение, той ще се разшири или да сключи договор за да запълни целия прозорец на браузъра, без значение какво ширина има. Например, ако ли размера на прозореца на браузъра, шаблонът ще пренаредите колона, за да пасват най-добре на границите на прозореца.
CSS код е много проста:
Според правилата на оформлението на сайта, CSS код трябва да бъде поставен в секцията на уеб страница или във външен стилов лист файл.
Както по-горе код работи на практика може да се види тук.
Как работи: Обяснението на CSS кода
Обикновено "поплавък: право" дефинира начина на блока DIV произлиза от общ поток документ и се поставя в дясно от всички други елементи, вливащи се около него в ляво. Първият блок DIV. който се намира в HTML-страница. смени на първо място.
В примера по-горе "#content" първи измества надясно и се помещава в ширина от 80% от ширината на прозореца на браузъра. Следващият ни правило също така показва "#navbar" от движение на документите и го измества надясно.
Тъй като ние вече имаме плаващ елемент в тази позиция. Според правилата посочват адаптивни оформление, втория блок се поставя в ляво на текущата клетка, ако има достатъчно място за него. В противен случай тя ще бъде поставена под първия елемент. С оглед на това, сумата от двете страни на кутията трябва да е равна на 100% или по-малко, в противен случай няма да имаме достатъчно място, за да ги поставите една до друга.
Как да поставя колона навигация в дясно
Кодът се има предвид по-рано помещава навигационното меню в лявата колона. Ако искате навигационното меню разположен от дясната страна, промените кода, както следва:
Можете да видите този код в действие тук чрез натискане на бутона в менюто колона навигация дясно.
Как да се регулира правилно ширината
Според правилата, установени технически стилове оформление, определени по-горе, за да се определи странично ширината на колоната, в 20% от ширината на прозореца на браузъра, както и колоните за съдържание - 80%, за общо 100%.
Ако искате да промените тези стойности, се уверете, че общата им сума е равна или по-малко от 100%, в противен случай браузърът ще постави една колона под друга.
Ако една от колоните е изместен под друга: как да го оправя
Ако установите, че един от говорителите да бъдат поставени под друг, вместо да бъдат поставени един до друг, което означава, че общата ширина на двете колони е повече от 100% от ширината на прозореца на браузъра.
Това може да се случи дори ако използвате моите ценности ", 20%" и "80%". Например, ако добавите поле, граници, и подложка за едната или двете колони. Ширината на тези колони също ще се увеличи, което ще доведе до факта, че общата сума ще надхвърли 100%.
съвместимост и оформление правила кръстосани браузъри предполагат два начина за решаване на този проблем:- Намаляване на ширината на колоната, докато браузърът няма да ги покажете, колкото искате. Но не забравяйте, че процентите са относителна единица за измерване. Тя е свързана с ширина на прозореца на браузъра на потребителя. Ето защо, ако сте изпробвали оформлението на вашата система, и е установено, че в допълнение към подложка ляв пиксела 10 до един от говорителите и намаляване на ширината с 1%, тя работи перфектно, не може да се заключи, че 1% = 10 пиксела. С други думи, 1% 1024 се различава от 1% от 1920 пиксела, и така нататък. Уверете се, че да се отчетат разликите в ширината на прозореца в други браузъри и размери на екрана;
- Което аз предпочитам към разтвор е да се създаде в рамките на блока "#navbar" и "#content" вложени DIV. и да я тури всички подложка, маржове, граници, и действителното съдържание. Така, че е възможно да напусне външните блокове стар 20% и 80%, без да се притеснявате за корекциите за маржове, тирета и т.н.
Така например, в демо сайта с две колони, използвайте следната HTML-код, за да създадете вложени блок DIV:
По-рано написал CSS стил, добавете следните свойства за "#innercontent" и "#innernavbar":
CSS за "#content" и "#navbar" са същите, както е описано в първата половина на тази статия.
Тъй като подложка се нанася върху вътрешната блок DIV. външни размери единица остават непроменени, а ние продължаваме да имаме оформление с две колони.
Как да добавите горния и долния сайт, стречинг и от двете колони
За създаване на горния и долния, като се използва разположението с две колони, промяна на HTML-кода и да добавите два допълнителни DIV елемент:
CSS Добавете следния код към съществуващата стилове. Поставете го в стиловете, които са били определени за:
Ако искате текст в заглавната част е центрирана, добавете следния код. В противен случай поотделно определите формата на капачка не е необходимо:
Същата функция може да се добави в мазето на текста да е центриран.
Горният код може да се види в действие на демо сайта с капачка, мазе и две колони.
заключение
Чрез по-горе CSS кода, който ще бъде в състояние да създаде сайт с две колони.
Превод на статията «Как да се изработи с две колони Разпределение на уеб сайта си чрез CSS» е изготвен от екип от приятелски Уеб дизайн проект от А до Я.