1) Если Вы заметили, то я также использую строку с добавлением CSS файла «normalize.css»
<!-- CSS --> <link rel="stylesheet" href="css/normalize.css">
Рекомендую это строку удалить, если не будете использовать эти стили. Хотя, настоятельно рекомендую использовать «normalize.css».
2) Если Вы хотите настроить иконку для сайта, то рекомендую использовать этот сервис RealFaviconGenerator — он поможет настроить иконку для Android, Windows 8 и IOS. Рекомендую. Сам использую.
3) Используйте также «CSS Reset» — выберите тот, который подойдет для Вас. Зачем? Чтобы сбросить основные стили браузера, и настроить их специально на Ваше усмотрение.
Для адаптивного HTML5 сайта:
версия 1.2
<!DOCTYPE HTML> <!--============================================================ * Design: ... * Copyright (c) 2015: ... =============================================================--> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- для адаптивного дизайна --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- информация о сайте --> <title>Впишите заголовок сайта</title> <meta name="description" content="Описание сайта"> <meta name="keywords" content="Ключевые слова сайта"> <meta name="author" content="SergeyChunkevich.com"> <!-- иконка для сайта --> <link rel="shortcut icon" href="favicon.ico"> <!-- CSS --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <!-- Это для старого осла, чтобы он понял HTML5 теги --> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <!--===== ШАПКА САЙТА =====--> <div id="header-container" role="banner"> <header> <!-- логотип --> <a href="#" class="logo">Логотип</a> <!-- меню --> <nav role="navigation"> <ul class="navigation"> <li><a href="#">Страница 1</a></li> <li><a href="#">Страница 2</a></li> <li><a href="#">Страница 3</a></li> </ul> </nav> </header> </div> <!--===== КОНТЕНТ =====--> <div id="main-container"> <main role="main"> <!-- блок 1 | ... --> <section> <header> <h1></h1> </header> <article> <h3></h3> <p></p> </article> </section> <!-- блок 2 | ... --> <section> ... </section> </main> </div> <!--===== ПОДВАЛ САЙТА =====--> <div id="footer-container" role="contentinfo"> <footer> <p></p> <small>Copyright © <time datetime="2015">2015</time></small> </footer> </div> </body> </html>
Базовый CSS файл:
@charset "utf-8"; /*===================================================== * Название проекта Автор: ... Copyright (c) 2015 ... =====================================================*/ /* БАЗОВЫЕ НАСТРОЙКИ -----------------------------------------------------*/ html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; } body { background: ; } /* ШАПКА САЙТА -----------------------------------------------------*/ #header-container { } #header-container header { } #header-container .logo { } #header-container nav { } #header-container ul { } #header-container li { } #header-container li a { } #header-container li a:hover { } /* КОНТЕНТ -----------------------------------------------------*/ #main-container { } #main-container main { } #main-container section { } #main-container section header { } /* ПОДВАЛ САЙТА -----------------------------------------------------*/ #footer-container { } #footer-container footer { } #footer-container p { } #footer-container small { } /* МОБ. НАСТРОЙКИ -----------------------------------------------------*/ @media only screen and (max-width: 479px) { } @media only screen and (min-width: 480px) { } @media only screen and (min-width: 768px) { } @media only screen and (min-width: 1024px) { } @media only screen and (min-width: 1140px) { }
Поделиться или сохранить:
