Для адаптивного HTML5 сайта

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 &copy; <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) {
}


ВКонтакте | Добавить комментарий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Есть вопросы?