Верстка макета (блочна верстка)

11

Від автора: у попередньому уроці ми з Вами зверстали макет, що задовольняє двом вимогам – колонки повинні мати однакову висоту і футер повинен бути притиснутий до низу, якщо на сторінці мало контенту.

Шаблон ми верстали, використовуючи можливості табличної верстки. У цьому уроці ми зверстаємо абсолютно ідентичний шаблон, але вже з використанням блокової верстки.

Верстка макета (блочна верстка)Верстка макета (блочна верстка)

За підсумками обох уроків Ви можете порівняти обидві верстки і оцінити кожну з них. Подивившись відео версію уроку, Ви побачите процес верстки шаблону крок за кроком. Тут же ми просто приведемо підсумковий код.

HTML:

Блочний каркас

HEADER

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam sunt necessitatibus tenetur placeat fuga vel totam ratione similique quis corrupti pariatur quos repellat doloribus officia quisquam unde illo aperiam nostrum?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa beatae placeat soluta facilis odit porro eligendi facere nesciunt doloremque quisquam sunt excepturi suscipit earum adipisci perspiciatis? Adipisci illum ullam molestiae cumque error qui accusamus officia nam quis ipsum! Vel animi id vero odit ea similique ipsam quisquam quaerat laboriosam quas iste optio quod culpa ullam enim earum illum ad incidunt exercitationem sequi aliquam nihil qui maiores! Rerum cupiditate id rem adipisci ratione. Commodi modi nemo repellat obcaecati dignissimos fuga est eveniet molestias tempora eaque ipsam repudiandae excepturi id veniam autem reiciendis provident impedit accusamus doloremque alias mollitia laudantium iste harum.

FOOTER

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a abbr, acronym, address, big, cite code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, венеції,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, назва, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: «;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html, body{height: 100%;}
body{
background: #00246a;
color: #fff;
}
.wrapper{
width: 900px;
min-height: 100%;
margin: auto;
background: url(bg.jpg);
}
.header{
height: 100px;
background: purple;
}
.left{
width: 250px;
float: left;
}
.content{
width: 650px;
color: #000;
float: left;
}
.footer{
height: 40px;
background: green;
width: 900px;
margin: -40px auto 0;
}
.clear{clear: both;}
.rasporka{height: 40px;}
p{padding: 10px;}

На цьому наш невеликий цикл з двох уроків завершений. Сподіваюся, Ви знайшли відповіді на обидва поставлених уроках питання і тепер знаєте, як їх вирішити.

Удачі і до нових зустрічей!