CSS макет патрабуе , каб вы думаеце пра вэб - макета ў цэлым, а затым ўзяць кавалкі і пакласці іх разам. Даведайцеся, як пабудаваць простую схему 3-калонкі з дапамогай CSS.
01 з 09
Намалюйце свой макет
Вы можаце намаляваць макет на паперы ці ў графічнай праграме . Калі ў вас ужо ёсць каркасны ці нават больш шырокі дызайн у выглядзе, спрасціць яго асноўныя скрынкі, якія складаюць сайт. Такая канструкцыя, якая суправаджае гэтую артыкул мае тры слупка ў асноўны вобласці кантэнту, а таксама верхнія і ніжнія калантытула. Калі прыгледзецца, то можна ўбачыць, што тры слупка не роўныя па шырыні.
Пасля таго, як вы макет выцягваецца, вы можаце пачаць думаць аб памерах. Гэты прыклад канструкцыі будзе мець наступныя асноўныя памеры:
- Не больш за 900 пікселяў у шырыню
- 20 кропак Жолаб злева
- 10 кропак паміж слупкамі і радкамі
- Стоўбцы, якія 250px, 300px і 300px шырокі
- Верхняя радок 150px вышыні
- Ніжняя радок з'яўляецца высокая 100px
02 з 09
Напісаць Basic HTML / CSS і стварыць кантэйнер Element
Так як гэтая старонка будзе правільны HTML-дакумент, Пачніце з пустой HTML-кантэйнер
<назва> Untitled DocumentДадаць у асноўных стылях CSS , каб абнуліць поля старонкі, межы, і водступы . Хоць існуюць і іншыя стандартныя стылі CSS для новых дакументаў, гэтыя стылі мінімум , вы павінны атрымаць чысты макет. Дадайце іх у галаву свой дакумэнт:
<Стылю тыпу = "тэкст / CSS"> HTML, цела {поле: 0px; абіўка: 0px; мяжы: 0px; }Для таго, каб прыступіць да стварэння макета, змясціць у кантэйнер элемента. Часам бывае, што вы можаце пазбавіцца ад кантэйнера пазней, але для большасці макетаў з фіксаванай шырынёй, які мае элемент кантэйнера робіць яго лягчэй кіраваць на розных вэб-браўзэраў. Такім чынам, у целе паставіць гэта:
І ў табліцы стыляў CSS, кажучы:
#container {}03 з 09
стыль Кантэйнер
Кантэйнер вызначае, наколькі шырока змесціва вэб-старонкі будзе, а таксама любыя поля вакол звонку і абіўка на ўнутраным боку. Для атрымання гэтага дакумента, кантэйнер 870px у шырыню з 20 пікселя жолабе злева. Жолаб усталёўваецца са стылем маржынальнасць, але абіўка на кантэйнер абнуляецца, каб прадухіліць якія-небудзь элементы ад таго, як шырока ў якасці кантэйнера.
#container {шырыня: 870px; Запас: 0 0 0 20px; / * Правы верхні левы ніжні * / уцяпляльнік: 0; }Калі вы захаваеце дакумент зараз, гэта будзе цяжка ўбачыць кантэйнер, таму што ён не мае нічога ў ім. Калі дадаць тэкст-запаўняльнік, вы будзеце мець магчымасць убачыць элемент кантэйнера больш выразна.
04 з 09
Выкарыстоўвайце загаловак тэга для загалоўка
Як вы вырашаеце стыль радкі загалоўка шмат у чым залежыць ад таго, што ў ім. Калі радок загалоўка проста будзе мець лагатып графічны і загаловак, затым з дапамогай загалоўка тэга (
) мае больш сэнсу, чым выкарыстанне . Вы можаце стылізаваць загаловак так жа, як стыль у DIV, і пазбегнуць лішніх тэгаў.
HTML для радкі загалоўка ідзе ў верхняй частцы кантэйнера і выглядае наступным чынам:
My Header Row
Затым, каб усталяваць стылі на ім, чырвоная мяжа была дададзеная на дно, каб вы маглі бачыць, дзе ён сканчаецца, поля і водступы былі абнулены, шырыня ўстаноўкі да 100% і вышыню 150px:
#container h1 {поле: 0; абіўка: 0; шырыня: 100%; вышыня: 150px; плаваць: злева; мяжа дно: # c00 цвёрдых 3px; } Не забудзьцеся плаваць гэты элемент з паплаўком: злева; нерухомасць. Ключ да напісання макетаў CSS, каб плаваць усе - нават тое, што такое жа шырыні, як кантэйнер. Такім чынам, вы заўсёды ведаеце, дзе элементы будуць ляжаць на гэтай старонцы.
Селектар CSS - нашчадак прымяняюцца стылі толькі да элементаў H1 , якія знаходзяцца ўнутры элемента #container.
05 з 09
Для таго, каб атрымаць тры Стоўбцы, пачніце будаўніцтва двух слупкоў
Пры стварэнні макета з трох калонак з дапамогай CSS, вы павінны падзяліць ваш макет на групы па два. Так што для гэтага макета тры калонкі, сярэдні і правы слупок і згрупаваныя і змешчаныя побач з левай калонцы ў макет з двух слупкоў, дзе левы слупок з'яўляецца 250px у шырыню, а правы слупок 610px у шырыню (300 для кожнага з двух слупкоў , плюс 10px для жолабы паміж імі).
HTML выглядае наступным чынам:
<р> Ut aliquip ех еа Commodo consequat. Загадвае еззе cillum Dolore ут enim аб'яву мінім veniam, Lorem Ipsum боль сядзець Аметов. У reprehenderit ў voluptate Quis nostrud ес fugiat практыкаванне Nulla pariatur. Загадвае еззе cillum Dolore ullamco Laboris НИСИ ут aliquip ех еа Commodo consequat. <р> Ut enim аб'яву мінім veniam, СЭД зрабіць eiusmod Tempor incididunt ullamco Laboris Ниси. Ет лабараў і інш Dolore Магна aliqua. Загадвае еззе cillum Dolore ес fugiat Nulla pariatur. Запаўняльнік тэкст у калонках робіць іх былі больш прыкметнымі пры тэставанні. CSS выглядае наступным чынам:
#container # col1 {шырыня: 250px; плаваць: злева; } #container # col2outer {шырыня: 610px; плаваць: права; Маржа: 0; абіўка: 0; } Слупок злева перамяшчаецца налева, а другі паплыў направа. Паколькі агульная шырыня абедзвюх калон 860px, існуе 10px жолабы паміж імі.
06 з 09
Дадаць Дзве калонкі Усярэдзіне Шырокі другой калонцы
Для таго, каб стварыць тры калонкі, дадайце дзве дзівы ўнутры шырокай другой калонцы, гэтак жа, як вы дадалі 2 дзівы ўнутры калоны кантэйнера на апошняй стадыі. HTML выглядае наступным чынам:
<р> Ut enim аб'яву мінім veniam, СЭД зрабіць eiusmod Tempor incididunt ullamco Laboris Ниси. Ет лабараў і інш Dolore Магна aliqua. Загадвае еззе cillum Dolore ес fugiat Nulla pariatur. Нам лібера часовы, Quia волупия сядзець aspernatur выслоўі SÜNT explicabo. Ullam Corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum гегит іч tenetur sapiente лацінская ці грэцкая хрэстаматыя, СЭД ет perspiciatis недеформированной Omnis Темпора incidunt ет лабараў і інш Dolore.
І CSS выглядае наступным чынам:
# Col2outer # col2mid {шырыня: 300px; плаваць: злева; } # Col2outer # col2side {шырыня: 300px; плаваць: права; } Паколькі гэтыя два 300px шырыня скрынкі ўнутры скрынкі шырокай 610px, там зноў будзе 10px жолабы паміж імі.
07 з 09
Дадаць у зносцы
Цяпер, калі астатняя частка старонкі стылізаваныя, вы можаце дадаць у зносцы. Выкарыстоўвайце апошні DIV з «калантытула» ID, і дадайце кантэнт, так што вы можаце ўбачыць яго. Вы можаце таксама дадаць рамку ў верхняй частцы, так што вы будзеце ведаць, дзе яна пачынаецца.
HTML:
<р> Copyright © 2017 CSS:
#container #footer {поплавковый: злева; шырыня: 870px; мяжы зверху: # c00 цвёрдыя 3px; } 08 з 09
Дадаць у вашых асабістых стыляў і ўтрымання
Зараз, калі вы раскладка завершана, вы можаце пачаць дадаваць свае ўласныя стылі і змест. Памятаеце, што межы на верхні і ніжні калантытула былі дададзены, каб паказаць раздзелы макета, а не канкрэтна для дызайну.
09 з 09
Канчатковы HTML / CSS
Вось увесь дакумент, HTML і CSS:
<назва> Untitled Document <стыль тыпу = "тэкст / CSS"> HTML, цела {поле: 0px; абіўка: 0px; мяжы: 0px; } #container {шырыня: 870px; Запас: 0 0 0 20px; / * Правы верхні левы ніжні * / уцяпляльнік: 0; колер фону: #fff; } #container h1 {поле: 0; абіўка: 0; шырыня: 100%; вышыня: 150px; плаваць: злева; мяжа дно: # c00 цвёрдых 3px; } #container # col1 {шырыня: 250px; плаваць: злева; } #container # col2outer {шырыня: 610px; плаваць: права; Маржа: 0; абіўка: 0; } # Col2outer # col2mid {шырыня: 300px; плаваць: злева; } # Col2outer # col2side {шырыня: 300px; плаваць: права; } #container #footer {поплавковый: злева; шырыня: 870px; мяжы зверху: # c00 цвёрдыя 3px; } My Header Row <р> Ut aliquip ех еа Commodo consequat. <р> Ut enim аб'яву мінім veniam. <р> нам лібера часовы. <р> Copyright © 2008
HTML для радкі загалоўка ідзе ў верхняй частцы кантэйнера і выглядае наступным чынам:
My Header Row
Затым, каб усталяваць стылі на ім, чырвоная мяжа была дададзеная на дно, каб вы маглі бачыць, дзе ён сканчаецца, поля і водступы былі абнулены, шырыня ўстаноўкі да 100% і вышыню 150px:
#container h1 {поле: 0; абіўка: 0; шырыня: 100%; вышыня: 150px; плаваць: злева; мяжа дно: # c00 цвёрдых 3px; }Не забудзьцеся плаваць гэты элемент з паплаўком: злева; нерухомасць. Ключ да напісання макетаў CSS, каб плаваць усе - нават тое, што такое жа шырыні, як кантэйнер. Такім чынам, вы заўсёды ведаеце, дзе элементы будуць ляжаць на гэтай старонцы.
Селектар CSS - нашчадак прымяняюцца стылі толькі да элементаў H1 , якія знаходзяцца ўнутры элемента #container.
05 з 09
Для таго, каб атрымаць тры Стоўбцы, пачніце будаўніцтва двух слупкоў
Пры стварэнні макета з трох калонак з дапамогай CSS, вы павінны падзяліць ваш макет на групы па два. Так што для гэтага макета тры калонкі, сярэдні і правы слупок і згрупаваныя і змешчаныя побач з левай калонцы ў макет з двух слупкоў, дзе левы слупок з'яўляецца 250px у шырыню, а правы слупок 610px у шырыню (300 для кожнага з двух слупкоў , плюс 10px для жолабы паміж імі).
HTML выглядае наступным чынам:
Запаўняльнік тэкст у калонках робіць іх былі больш прыкметнымі пры тэставанні. CSS выглядае наступным чынам:
#container # col1 {шырыня: 250px; плаваць: злева; } #container # col2outer {шырыня: 610px; плаваць: права; Маржа: 0; абіўка: 0; }Слупок злева перамяшчаецца налева, а другі паплыў направа. Паколькі агульная шырыня абедзвюх калон 860px, існуе 10px жолабы паміж імі.
06 з 09
Дадаць Дзве калонкі Усярэдзіне Шырокі другой калонцы
Для таго, каб стварыць тры калонкі, дадайце дзве дзівы ўнутры шырокай другой калонцы, гэтак жа, як вы дадалі 2 дзівы ўнутры калоны кантэйнера на апошняй стадыі. HTML выглядае наступным чынам:
Нам лібера часовы, Quia волупия сядзець aspernatur выслоўі SÜNT explicabo. Ullam Corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum гегит іч tenetur sapiente лацінская ці грэцкая хрэстаматыя, СЭД ет perspiciatis недеформированной Omnis Темпора incidunt ет лабараў і інш Dolore.
І CSS выглядае наступным чынам:
# Col2outer # col2mid {шырыня: 300px; плаваць: злева; } # Col2outer # col2side {шырыня: 300px; плаваць: права; }Паколькі гэтыя два 300px шырыня скрынкі ўнутры скрынкі шырокай 610px, там зноў будзе 10px жолабы паміж імі.
07 з 09
Дадаць у зносцы
Цяпер, калі астатняя частка старонкі стылізаваныя, вы можаце дадаць у зносцы. Выкарыстоўвайце апошні DIV з «калантытула» ID, і дадайце кантэнт, так што вы можаце ўбачыць яго. Вы можаце таксама дадаць рамку ў верхняй частцы, так што вы будзеце ведаць, дзе яна пачынаецца.
HTML:
CSS:
#container #footer {поплавковый: злева; шырыня: 870px; мяжы зверху: # c00 цвёрдыя 3px; }08 з 09
Дадаць у вашых асабістых стыляў і ўтрымання
Зараз, калі вы раскладка завершана, вы можаце пачаць дадаваць свае ўласныя стылі і змест. Памятаеце, што межы на верхні і ніжні калантытула былі дададзены, каб паказаць раздзелы макета, а не канкрэтна для дызайну.
09 з 09
Канчатковы HTML / CSS
Вось увесь дакумент, HTML і CSS:
<назва> Untitled Document <стыль тыпу = "тэкст / CSS"> HTML, цела {поле: 0px; абіўка: 0px; мяжы: 0px; } #container {шырыня: 870px; Запас: 0 0 0 20px; / * Правы верхні левы ніжні * / уцяпляльнік: 0; колер фону: #fff; } #container h1 {поле: 0; абіўка: 0; шырыня: 100%; вышыня: 150px; плаваць: злева; мяжа дно: # c00 цвёрдых 3px; } #container # col1 {шырыня: 250px; плаваць: злева; } #container # col2outer {шырыня: 610px; плаваць: права; Маржа: 0; абіўка: 0; } # Col2outer # col2mid {шырыня: 300px; плаваць: злева; } # Col2outer # col2side {шырыня: 300px; плаваць: права; } #container #footer {поплавковый: злева; шырыня: 870px; мяжы зверху: # c00 цвёрдыя 3px; }