Лабораторные работы CSS3. Web-legko.ru
Создадим структуру страницы:
<html>
<head>
</head>
<title>Лабораторнаяработа №2 </title>
<body>
<header>
Шапка сайта
</header>
<nav>
</nav>
<aside>
Левый сайдбар
</aside>
<div>
Основная часть
</div>
<div></div>
<footer>
Подвал
</footer>
</body>
</html>
Меню навигации горизонтальное
Если мы посмотрим как выглядит наш код в браузере то увидим следующее
На нужный результат совсем не похоже, кроме надписей. Для того чтобы наша страница приобретала
нужный вид добавляем стили CSS в часть <head>.
<style>
body {
background: #f5f5f5;
color: #000000;
font-family: Arial, Times New Roman;
font-size: 16px;
}
header {
background: yellow;
height: 100px;
width: 100%;
}
nav {
background: #330044;
color: white;
width: 100%;
height: 50px;
}
aside {
background: #1baf5d;
float: left;
width: 10%;
Лабораторные работы CSS3. Web-legko.ru
height: 400px;
}
#content {
background: gray;
float: left;
width: 90%;
}
#clear {
clear:both;
}
footer {
background: #ff0404;
color: white;
height: 80px;
width: 100%;
}
</style>
