Для обычного 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">
<!-- информация о сайте -->
<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 {
}


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

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

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

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