Создание простого примитивного шаблона с использованием html 5
Данный материал предоставлен сайтом
PacificSky.Ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Готовый код.
Html экземпляр кода:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Experimental Template</title>
<link rel="stylesheet" href="css/style.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1><a href="#"><img class="logo" src="images/html.png">Experimental Template</a></h1>
</header>
<div class="content">
<aside>
<nav>
<ul class="menu">
<li><a href="#">Главная страница</a></li>
<li><a href="#">Не главная</a></li>
</ul>
</nav>
</aside>
<article>
<h3>Элементарная новость</h3>
<p>
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст, Эксперементальный текст,
</p>
</article>
</div>
<footer>
<div class="copyright">
<p>Учебный материал от сайта "<a href="http://pacificsky.ru/">pacificsky.ru</a>" <br />© Alex Fixlix</p>
</div>
</footer>
</body>
</html>
CSS экземпляр готового кода:
body {
margin: 0;
background: #F2EFE6;
}
header, section, footer, aside, nav, article {
display: block;
}
header a img.logo {
margin-bottom: -16px;
}
header {
background: #1b75bc;
height: 100px;
text-align: left;
padding: 25px 50px 0;
}
header h1 a {
color: white;
text-decoration: none;
}
header h1 a:hover {
color: white;
text-decoration: none;
}
.content {
width: 90%;
margin: auto;
background: #ffffff;
padding: 20px;
margin-bottom: 100px;
border: 1px #f2efe6 solid;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
}
footer {
width: 100%;
height: 70px;
position: fixed;
bottom: 0;
background: #666666;
}
.copyright {
color: #f2efe6;
float: left;
}
.copyright a {
text-decoration: none;
color: white;
}
.copyright a:hover {
text-decoration: none;
color: white;
}
.copyright p {
margin: 10px 0 0 20px;
}
aside {
width: 200px;
float: left ;
}
article {
margin-left: 220px;
}
aside ul.menu {
list-style: none;
background: #F2EFE6;
border-radius: 7px;
padding: 20px;
}
Скачать готовый экземпляр кода:
Внимание! У Вас нет прав для просмотра скрытого текста.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.