И так добрый день ребята! и снова сегодня с вами я Вадим Кондаков, и этот урок будет посвящён созданию HTML макета с использование CSS3. урок создан для новичков так-что читаем!
1. И так первым делом мы создадим логотип.
133X36по типу такого:исходник логотипа (PSD):
Скачивание файлов доступно только зарегистрированным пользователямдля того чтобы логотип был как у меня на скрине у вас должен быть установлен в фотошопе шрифт "Lobster"и так теперь переходим к основному а это CSS.
2. Создаём директорию например:
Мой сайт и в этой папке создадим файл
style.cssи пропишем:
html { height:100%; }
body {
background: #f6f6f6;
height: 100%;
margin:0px;
padding:0px;
word-wrap: break-word;
font: 11px/18px tahoma, verdana, sans-serif, Lucida Sans;
color: #616f7d;
overflow-x:hidden
}
Сохраним и теперь создадим файл index.html и напишем там:
<DOCTYPE HTML>
<html>
<head>
<!-- Название сайта -->
<title>Мой HTML макет. учусь по урокам Вадима Кондакова</title>
<!-- Кодировка сайта -->
<meta content="text/html; charset=windows-1251" />
<!-- Файл стилей -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
</body>
</html>
Сохраним, и посмотрим пустую страницу с красивым фоном)
3. И так возьмемся теперь за HEADER страницы (шапка сайта).
Открываем style.css и пропишем ниже:
.header {
background-color: #6D84A2;
background-image: -moz-linear-gradient(top, #6D84A2, #6D84A2);
background-image: -ms-linear-gradient(top, #6D84A2, #6D84A2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6D84A2), to(#6D84A2));
background-image: -webkit-linear-gradient(top, #6D84A2, #6D84A2);
background-image: -o-linear-gradient(top, #6D84A2, #6D84A2);
background-image: linear-gradient(top, #6D84A2, #6D84A2);
background-repeat: repeat-x;
border-top: 1px solid #6D84A2;
border-bottom: 1px solid #6D84A2;
width: 90%;
z-index: 900;
border-radius:0px 0px 5px 5px;
margin: 0px auto;
height: 40px;
}
сохраним и в index.html пропишем между тегами body:
<!-- Шапка сайта -->
<div class="header">
</div>
сохраним и посмотрим на результат.
результат кода в index.html:
<DOCTYPE HTML>
<html>
<head>
<!-- Название сайта -->
<title>Мой HTML макет. учусь по урокам Вадима Кондакова</title>
<!-- Кодировка сайта -->
<meta content="text/html; charset=windows-1251" />
<!-- Файл стилей -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- Шапка сайта -->
<div class="header">
</div>
</body>
</html>
4. Сделаем логотип и меню.
Создаём директорию в папке Мой сайт: images и помещаем наш логотип logo.png в эту папочку.
И теперь пропишем сразу и логотип и меню между div нашей шапки header:
<!-- Логотип сайта -->
<a href="/"><img src="images/logo.png" border="0px" /></a>
<!-- Меню с правой стороны и отступом на 25px -->
<div style="margin-right: 25px;float:right;">
<a href="/">Главная</a>
<a href="/">Мой сайт</a>
<a href="/">Мой сайт</a>
</div>
сохраним и посмотрим.!
чтобы преобразить меню добавим в style.css ниже:
.header a:first-child {margin-left:15px;}
.header a, .header a:visited {
display:block;
float:left;
height:40px;
line-height:40px;
color:#BFDCED;
padding:0px 15px;
font-weight:bold;
}
.header a:hover, .header a:active {
color:white;
text-decoration:none;
height:40px;
background:rgba(0, 0, 0, 0.1);
}
и так у нас получилось:
И так, как убрать у ссылок нижнею обводку? добавим в style.css:
a{ text-decoration:none; color: #333 }
a:hover{ text-decoration: none }
b{color:#000}
где хотите но у меня файл style.css получился вот такой:
html { height:100%; }
body {
background: #f6f6f6;
height: 100%;
margin:0px;
padding:0px;
word-wrap: break-word;
font: 11px/18px tahoma, verdana, sans-serif, Lucida Sans;
color: #616f7d;
overflow-x:hidden
}
a{ text-decoration:none; color: #333 }
a:hover{ text-decoration: none }
b{color:#000}
.header {
background-color: #6D84A2;
background-image: -moz-linear-gradient(top, #6D84A2, #6D84A2);
background-image: -ms-linear-gradient(top, #6D84A2, #6D84A2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6D84A2), to(#6D84A2));
background-image: -webkit-linear-gradient(top, #6D84A2, #6D84A2);
background-image: -o-linear-gradient(top, #6D84A2, #6D84A2);
background-image: linear-gradient(top, #6D84A2, #6D84A2);
background-repeat: repeat-x;
border-top: 1px solid #6D84A2;
border-bottom: 1px solid #6D84A2;
width: 90%;
z-index: 900;
border-radius:0px 0px 5px 5px;
margin: 0px auto;
height: 40px;
}
.header a:first-child {margin-left:15px;}
.header a, .header a:visited {
display:block;
float:left;
height:40px;
line-height:40px;
color:#BFDCED;
padding:0px 15px;
font-weight:bold;
}
.header a:hover, .header a:active {
color:white;
text-decoration:none;
height:40px;
background:rgba(0, 0, 0, 0.1);
}
а файл index.html вот таким:
<DOCTYPE HTML>
<html>
<head>
<!-- Название сайта -->
<title>Мой HTML макет. учусь по урокам Вадима Кондакова</title>
<!-- Кодировка сайта -->
<meta content="text/html; charset=windows-1251" />
<!-- Файл стилей -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- Шапка сайта -->
<div class="header">
<!-- Логотип сайта -->
<a href="/"><img src="images/logo.png" border="0px" /></a>
<!-- Меню с правой стороны и отступом на 25px -->
<div style="margin-right: 25px;float:right;">
<a href="/">Главная</a>
<a href="/">Мой сайт</a>
<a href="/">Мой сайт</a>
</div>
</div>
</body>
</html>
5. Создаём контент сайта.
и так теперь в style.css добавим ниже:
.sitecont {
width:80%;
margin: 0px auto;
position: relative;
background: rgba(255, 255, 255, 0.85);
height:100%;
border-radius: 0px 0px 3px 3px;
padding:5px 10px 5px 10px;
clear: both;
z-index: 3;
}
Сохраним и в index.html добавим перед закрытие тега body:
<!-- Контент сайта -->
<div class="sitecont">My site</div>
сохраняем и посмотрим результат! готово! наш дизайн готов! практически...
на этом я завершаю свой урок а на следущем мы поговорим об создания блоков в данном шаблоне а так-же как зафиксировать шапку
Исходник работы:Скачивание файлов доступно только зарегистрированным пользователям