CSS долбоорду сиз, бир бүтүн катары сайты макетин деп талап кылат, андан кийин күмүш тыйын алып, аларды койду. CSS менен жөнөкөй 3-мамыча макети курууга жардам берет.
01 09
Draw Сиздин калыпты
Сиз кагаз же сиздин долбоорду жакындай алабыз сүрөттөр программасы . Сиз буга чейин эле зым-маанай же акыл да көп дизайнга ээ болсо, сайтты түзгөн негизги кутучалардын аны жөнөкөйлөтүү. Бул макаланы коштогон Бул долбоор негизги мазмун жагындагы үч тилке бар, ошондой эле Жогорку жана төмөнкү колонтитулдар дегенди. кунт коюп карай турган болсок, үч мамычалар туурасы бирдей эмес экенин көрө аласыз.
Эгер сиз жайгашуу кындан сууруп, кийин, өлчөмдөр ой жүгүртүүсүн баштаса болот. Бул мисал Дизайн төмөнкү негизги көлөмүн ээ боло албайт:
- 900 ашык эмес пиксел кең
- Сол жактагы 20 PX пайдубалы
- 10 катардан менен катар ортосундагы PX
- 250px, 300px жана 300px туурасы Columns
- жогорку саптагы 150px узун
- төмөнкү катарга 100px узун
02-жылдын 09
Негизги HTML / CSS жазуу жана контейнер элемент түзүү
Бул барак жарактуу HTML документти болот болгондуктан, бош HTML идиш менен баштоо
<башчысы> <мета HTTP-equiv =" Content-түрү "мазмун =" текст / HTML; белги = utf-8 "/> <бойунча> Untitled Document <орган>Негизги CSS стилде кошуу бет Талаалар, жээктер жана paddings чыгып баамдаш үчүн . Башка жок, ал эми стандарттык CSS стилдер жаңы документтерди, бул стилдер сен таза долбоорду алуу үчүн зарыл болгон минималдуу болуп саналат. Сиздин документтин башына алып салуу:
<Стили түрү = "текст / CSS"> HTML, дене {margin: 0px; толтургучтар: 0px; Чек ара: 0px; }бир контейнер элемент салып жайгашуусун, куруп баштоо үчүн. Кээде кийин идиш арылышы мүмкүн болот, бирок, негизги-туурасы калыптары, контейнер элементи бар, ал ар түрдүү интернет браузер аркылуу башкарууга жардам берет. Ошентип, дене менен айтканда:
<Бөлүү ID = "контейнер">Ал эми CSS стилдин-жылы, кой:
#container {}03 09
контейнер Style
контейнер интернет барак көрүү, ошондой эле ички сырттан жана толтургучтар айланасында кандайдыр бир айырмачылык болот канчалык кенен аныктайт. Бул документте, контейнер, сол жактагы 20 пиксел момпосуй менен 870px кенен. ал эми бир чети стили менен белгиленет, ал эми бир кутусунда жайгаштырылат билмейинче, контейнер болушунча кенен болуп, ар кандай элементтерин алдын алуу үчүн шартта нөл турат.
#container {туурасы: 870px; margin: 0 0 0 20px; / * Жогорку оң ылдыйкы сол * / толтургучтар: 0; }Эми документти сактоо болсо, анда ал бул жерде эч нерсе жок, анткени контейнер үчүн оор болот. Эгер орду текстти кошуу болсо, ошончолук айкын контейнер элементин көрө аласыз.
04 09
Баш үчүн Башкы Теги колдонуу
Эгер баш-сап стилдештирүүнү чечим кандайча анын ичинде эмне үстүнө бир топ көз каранды. баш-сап эле андан баш сөздүү кабарында теги пайдаланып, логотип диаграммасын жана гезити бар бара турган болсо, (
) а <бөлүү> караганда көбүрөөк мааниге ээ. Сиз баш сөздүү кабарында, сиз бөлүү стилдештирүүнү да ушундай аласыз, жана бөтөн теги алыс.
баш-сап үчүн HTML контейнер үстү жагында кирип, мындай болот:
Менин баш-сап
Андан кийин, ал жөнүндө стилдерди коюп, кызыл чек ал аяктаган жер көргөнү үчүн, ылдый жактагы кошулган, кырлары жана толтургучтар чыккан шартта нөл болсо, 100% га чейин коюлган бардык жазылыгын жана 150px үчүн бийиктиги:
#container h1 {margin: 0; толтургучтар: 0; жазылыгы: 100%; бийиктиги: 150px; сүзүп: сол; чек-ара-Төмөндө: # c00 катуу 3px; }сүзүшөт менен бул элементти калкуу жок кыл, унутпа: сол; мүлк. контейнерге эле, туурасы да бир нерсени - CSS долбоорду жазуу ачкычы баары калкып турат. Ал эми сен ар дайым элементтер беттеги жатып кайсы жерден экенин билебиз.
А CSS тукумунан селектор гана #container элементтин ичинде болуп H1 элементтер стилде колдонулат.
05-жылдын 09
Үч тилке алуу үчүн, Start менен эки бөлүккө Building
сиз CSS менен үч тилке долбоорду куруп, сен эки топко сенин долбоорду бөлүп керек. Демек, бул үч тилке жайгаштыруу үчүн, калган бардык мамычаларды бөлүп 250px, туурасы бир, эки тилкелүү жайлаштыруунун орто жана оң мамыча жана топтоштурулат жана сол тилкеде жанында жайгашкан, жана туура мамыча 610px туурасы (эки тилкеде, 300 ар бир , плюс, алардын ортосундагы момпосуй үчүн 10px).
HTML мындай болот:
<Бөлүү ID = "col1"> <б> Д aliquip экс Сибир commodo consequat. Кызымды ойготпогула, кишиге cillum dolore ут Анткени жарнама түшүнүп veniam, Lorem Ipsum dolor Ахмет отурат. voluptate Ким nostrud exercitation ЕБ Fugiat Сапир pariatur менен reprehenderit-жылы. Кызымды ойготпогула, кишиге cillum dolore ullamco laboris УСИИ ут aliquip экс Сибир commodo consequat. <бөлүү ID = "col2outer"> <б> Д Анткени жарнама түшүнүп veniam, eiusmod incididunt ullamco laboris НИСИ tempor деп сыйынды. -Ут-Жумушчуга и dolore Магна Aliqua. Кызымды ойготпогула, кишиге cillum dolore ЕБ Fugiat Сапир pariatur.тилкеде Placeholder текст сынап жатканда, аларды көбүрөөк көрүнүп эле турат. CSS мындай болот:
#container # col1 {туурасы: 250px; сүзүп: сол; } #container # col2outer {туурасы: 610px; сүзүп: укуктуу; маржа: 0; толтургучтар: 0; }башка укук чыгып, ал эми сол жагында тилке, сол колунан түшүрбөй келет. эки түркүктүн жалпы туурасы 860px болгондуктан, алардын ортосунда 10px пайдубалы бар.
06-жылдын 09
Wide экинчи катарда ичинде эки тилкеде кошуу
Үч тилке түзүү үчүн акыркы кадам контейнер колонна 2 Div'дерди жайгаштыруу кошо эле, алдыдагы экинчи мамынын ичинде эки Div'дерди жайгаштыруу кошуу. HTML мындай болот:
<Бөлүү ID = "col2outer"> <бөлүү ID = "col2mid"> <б> Д Анткени жарнама түшүнүп veniam, eiusmod incididunt ullamco laboris НИСИ tempor деп сыйынды. -Ут-Жумушчуга и dolore Магна Aliqua. Кызымды ойготпогула, кишиге cillum dolore ЕБ Fugiat Сапир pariatur. <бөлүү ID = "col2side"> <б> Нам Libero убакта, анткени voluptas aspernatur дикилдек алар explicabo отурат. Ullam corporis suscipit laboriosam, жазбагыла Aliquam чил voluptatem. Ошол үлүшү лдар жерде да айрылдым бир sapiente delectus, азыр ут perspiciatis Оботтон бүткүл tempora incidunt-ут-Жумушчуга менен dolore.Ал эми CSS мындай болот:
# Col2outer # col2mid {туурасы: 300px; сүзүп: сол; } # Col2outer # col2side {туурасы: 300px; сүзүп: укуктуу; }Бул эки 300px туурасы уяларды бир 610px туурасы кутуга ичинде болгондуктан, кайрадан алардын ортосундагы 10px пайдубалы болот.
07-жылдын 09
Footer кошуу
Эми барактын калган деп аталары чын болсо, сиз этеги менен кошо аласыз. бир "түшүндүрүү" ID менен акыркы бөлүү мүмкүн болсо, аны көрө алгыдай мазмунду кошуу. ал баштайт болгон жерде силер да жогору жагында чек кошууга болот, ошондуктан билип аласыз.
HTML:
<Бөлүү ID = "түшүндүрүү"> <б> Copyright © 2017CSS:
#container #footer {жадымда: сол; туурасы: 870px; чек ара-топ: # c00 катуу 3px; }08 09
Сиздин жеке стилин жана Мазмунда кошуу
Эми сиз жайгашуу бүттү деп, сиз өз жеке стилин жана мазмунун кошуу баштаса болот. Жогорку жана төмөнкү колонтитулдар боюнча чек эмес, атайын жай үлгүсүнө, жасалгалоо бөлүктөрдү көрсөтүү үчүн кошулган унутпа.
09-жылдын 09
Final HTML / CSS
Бул жерде бүт документ, HTML жана CSS болуп саналат:
<башчысы> <мета HTTP-equiv =" Content-түрү "мазмун =" текст / HTML; белги = utf-8 "/> <бойунча> Untitled Document <стили түрү = "текст / CSS"> HTML, дене {margin: 0px; толтургучтар: 0px; Чек ара: 0px; } #container {туурасы: 870px; margin: 0 0 0 20px; / * Жогорку оң ылдыйкы сол * / толтургучтар: 0; маалымат-түсү: #fff; } #container h1 {margin: 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; } <орган> <бөлүү ID = "контейнер">