Шаблон страницы html5
Код страницы блога сделанный в тегах html5.
|
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 |
<!DOCTYPE HTML> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="robots" content="index, follow"> <meta name="author" content="arozhk.ru"> <meta name="publisher" content="Vasiya Pupkin"> <meta name="description" content="Создать шаблон HTML5"> <meta name="keywords" content="шаблон, HTML5"> <meta name="generator" content="Core CMS"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>Шаблон HTML5</title> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> <figure>Логотип</figure> <h1>Название сайта</h1> <h2>Описание сайта</h2> </header> <nav> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О Нас</a></li> <li><a href="#">Контакты</a></li> </ul> </nav> <main> <article> <p>Содержание: текст, фото, видео, аудио ...</p> <section> <p>здесь могут быть похожие записи, слайдер, баннеры, миниатюры и т.д...</p> </section> </article> <aside> <h3>Боковая колонка</h3> <p>боковая колонка для всего остального</p> <h4>Меню сайта</h4> <menu> <li><a href="#">Смотреть фото</a></li> <li><a href="#">Смотреть видео</a></li> <li><a href="#">Слушать музыку</a></li> </menu> </aside> </main> <footer> <p> <small> <time>2015</time> © <a href="http://arozhk.ru">arozhk.ru</a> </small> </p> <address> <a href="mailto:info@arozhk.ru">Написать письмо</a> </address> </footer> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
*, *:before, *:after {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;} body { background-color: rgba(255,255,255);font: 16px/1.42857 "Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;} header {background-color: #373737;color: #fff;height: 160px;padding: 10px 50px;} figure {float:left;} nav {background-color: #eee; border: 1px solid #ddd;margin-bottom: 20px;height: 56px;} nav ul li {float:left;margin-right:22px} main {margin: 0 auto;width: 1170px;display: block;} article {float: left;margin-bottom: 30px;padding: 0 15px;width: 74%;overflow: hidden;} article figure { margin: 1em; text-align: left;float: none;} section {background-color:#eee;border: 1px solid #ccc;padding: 20px;} aside {float: right;padding-left: 15px;width: 25%;display: block;overflow: hidden;position:relative;} menu {padding: 0;} footer {background-color: #373737;clear: both;color: #fff;padding: 50px 20px;} footer a {color: #eff;} |
Рассказать: