От автора: в предыдущем уроке мы с Вами сверстали макет, удовлетворяющий двум необходимым требованиям – колонки должны иметь одинаковую высоту и футер должен быть прижат к низу, если на странице мало контента.
Шаблон мы сверстали, используя возможности табличной верстки. В этом уроке мы сверстаем абсолютно идентичный шаблон, но уже с использованием блочной верстки.
По итогам обоих уроков Вы можете сравнить обе верстки и оценить каждую из них. Посмотрев видео версию урока, Вы увидите процесс верстки шаблона шаг за шагом. Здесь же мы просто приведем итоговый код.
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Блочный каркас</title> <link rel="stylesheet" href="style_block.css" media="all"> </head> <body> <div class="wrapper"> <div class="header">HEADER</div> <div class="left"> <p>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?</p> </div> <div class="content"> <p>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.</p> </div> <div class="clear"></div> <div class="rasporka"></div> </div> <div class="footer">FOOTER</div> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
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, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, 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;} |
На этом наш небольшой цикл из двух уроков завершен. Надеюсь, Вы нашли ответы на оба поставленных в уроках вопроса и теперь знаете, как их решить.
Удачи и до новых встреч!
Комментарии (2)