Как да се изгради основен оформление CSS
Проектиране без таблици с помощта на CSS оформления е бързо се превръща в нов стандарт за уеб заради облагите, споменати в предишната ми статия. Уеб браузърът, използвани в наши дни вече могат да правят уеб страници proficiently. В тази статия ще се стреми да създаде основния план 2 колона CSS, които можете да използвате за бъдещата форма projects.Web страница: http://www.isitebuild.com/css/css-layout.html стила лист: http://www.isitebuild.com/css/stylesheet.htm1. Разделете страницата си на секции - на DIV ID маркери ви позволява да създадете отделни подразделения на вашата уеб страница. Те са идентифицирани с уникален идентификационен номер. След това можете да добавите стил (CSS селектори), които конкретно се отнася до DIV на този номер. Не забравяйте да включите в DOCTYPE (за да направят страницата ви точно в браузърите) и мета тагове (позволява на търсачките да паяк си страници). Обвивка: е на DIV тайна, че около всички други divs като контейнер за елементи на страницата. заглавна: определя горната банер на страницата основни: определя основното съдържание на страницата НСА: определя навигация на долната част на страницата: определя долния и под-навигация на page2. Създаване на CSS код - кода, CSS стилове страницата като центрирана 2 колона CSS оформление с навигационна лента и долен колонтитул. В DIV # обвивка стил създава в центъра кутия, която играе ролята на контейнер за останалата част от съдържанието на страницата. Ширината: 80% правило определя ширината на DIV. Фонът-цвят: # FFFFFF правило създава бял фон за DIV. Маржът-нагоре: 50px и марж-отдолу: 50px правила да създават пространство на 50 пиксела за горната и долната граница за DIV itself.The правилният начин на центъра един блоков елемент с CSS е да установи марж-наляво: авто и марж-надясно: Auto. Това Възлага на браузъра автоматично да се изчисли равни маржове за двете страни, като по този начин центриране на DIV. Граничният: тънък твърди # 000000 правило добавя граница около външния DIV. Останалата част от стилове CSS код на divs за горния, долния, НСА, както и основните content.The DIV # горния и долния # DIV стилове определени граници и подложка за тези divs. В допълнение, DIV # заглавна включва текст изравни: център правило център заглавният текст, и # DIV долния включва гранично-отгоре: тънък твърди # 000000 правило да се създаде една граница по протежение на горния ръб на DIV да замени хоризонтална правило над долния в таблицата по-базирани layout.The DIV # # DIV НСА и основните стилове създаване на две колони в средата на полето в центъра. В DIV # стил НСА, поплавъка: ляво правило настоява DIV към лявата страна на своята майка елемент (обвивката DIV) и ширина: 25% правило определя ширината на DIV на до 25 на сто от родителски елемент. С NAV DIV листвани на ляво и ограничени до определен ширина, тя дава възможност за основните DIV да преминете на правото на НСА DIV, като по този начин създаването на две колони ефект. В # DIV основните стил включва марж-наляво: 30% правило да се запази основния текст е насочен чист колона вместо от разпространение на по-долу НСА колона. лявото поле Основните DIV е настроен на стойност малко по-голям от широчина на НСА div.Style Sheet http://www.isitebuild.com/css/stylesheet.htmIf връзки са поставени на друго място върху страницата те ще наследят същите характеристики като по-горе .. синя връзка, която витае в червен. Какво става, ако искате да създадете друг комплект от връзки, които са с различен цвят и от късата мишката върху тях, те са underlined.4. Създаване на дъното навигация - да се включим в секцията на страницата, да използвам DIV # долния и код всяка връзка за това. За да се направи списък отида хоризонтално използва: Покажи: вградени; Сега, когато приключи създаването на моя стил лист Искам да съкрати кода на страницата, като я свързва с външния ми стил лист. Ето как: 4. Създаване на външен стил лист - копирате и поставяте всички CSS код (без тези тагове:) в бележник и го надпишете нещо като "стил лист". Поставете този стил лист между ръководителя таговете на вашия уеб page.This ще намаляване на кода на страницата, така че ще се бързо зареждане плюс търсачките могат по-лесно паяк вашия уеб page.4. Добавяне на съдържание към страницата си - след като имате ли страницата си търси правилно, можете да добавите повече съдържание, за да нея. Промени могат лесно да бъдат направени всеки стил на страницата (или целия сайт), като просто редактиране на един стил sheet.5. Качете вашите снимки - не забравяйте да качите вашите уеб страници и стил лист в главната директория на вашия server.6. Проверка на кода - не забравяйте да ги проверите XHTML код: http://validator.w3.org/ и CSS код: http://jigsaw.w3.org/css-validator/ и да направи корекции, когато necessary.7. Проверка на браузъра и съвместимост разделителна способност на екрана - проверява дали страницата си прави и в популярните браузъри (IE6, NN7, Firefox) Ако сте се започне с оформления CSS, прилагат бавно чрез малки промени в страниците си, т.е. създаването на стил лист за вашия основен заглавията и шрифтовете само. Както ви станат по-запознат с CSS може евентуално да изгради бъдещето си всички сайтове с layouts.Resources CSS: Основни CSS оформление http://www.isitebuild.com/css/css-layout.htmlCSS стила лист http://www.isitebuild.com/css/stylesheet.htmBenefits на http://www.isitebuild.com/css/index CSS. htmHerman Drost е сертифициран интернет уебмастъра (СМР) собственик и автор на http://www.iSiteBuild.com достъпни уеб дизайн, графичен дизайн и уеб хостинг. Абонирайте се за негов "Маркетинг Съвети" бюлетина за повече оригинални статии. за mailto: subscribe@isitebuild.com. Можете да прочетете
Член Източник: Messaggiamo.Com
Related:
» Seo Elite: New Seo Software!» AntiSpywareBOT
» Reverse Mobile
» Error Nuker
уебмастъра Вземи Html кодекс
Добави тази статия на вашия сайт сега!
уебмастъра Подайте членове
Не е необходима регистрация! Попълнете формата и статията ви е в Messaggiamo.Com директория!
