Приветствую Вас уважаемые читатели сайта http://skillcoding.com.
В этом уроки мы будем с Вами верстать сайт в Div-элементах. Демо версию можно посмотреть на примере.
Для этого нам потребуется создать 3 папки: CSS, img, JS и, само собой, файл index.html.
Хочу акцентировать ваше внимание на том, что блоки div идут последовательно друг за другом.
Итак, начнём с html разметки.
Нам необходимо подключить JavaScript и CSS:
Далее мы будем по очерёдности делать разметку логотипа и поиска:
<div id="logo"></div>
<div id="poisk"><
form action="#" method="post" name="search">
<input name="search"
type="text" id="search_text"
title="Search">
<input name="submit"
type="submit" value="Поиск" id="submit_search">
</form></div>
После чего реализуем шапку с меню:
Теперь разберёмся с туловищем сайта. Тут всё намного проще:
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vestibulum
commodo, nunc in commodo fringilla,
dolor ante cursus sapien, non vulputate
ligula ante in neque. Suspendisse tellus
felis, vestibulum ac aliquet et, faucibus
vitae purus. Ut ullamcorper tincidunt
diam, a suscipit mauris aliquam et. Cras
ultrices augue nec odio congue hendrerit.
Curabitur et nulla vel lectus placerat
sodales. Etiam non ante augue. Donec in
nunc sapien, sit amet sagittis lorem. Nam
a arcu at leo iaculis condimentum.
Phasellus auctor faucibus lectus, at
viverra purus facilisis sed.
Вот мы и закончили с HTML разметкой. Вот что у нас пока получилось:
Теперь приступим к CSS правилам.Начнём с логотипа и поиска по сайту. Да не забываем про стили для тега body:
body { /* Создаём Фон*/
background:url(../images/bg.jpg)
no-repeat center;/*Фон свечение*/
width:1280px;/*Ширина*/
height:683px;/*Высота*/
background-color:#191919;/*Фон всей страницы*/
margin:0;/*Внешний отступ*/
padding:0;/*Внутренний отступ*/
}
div#logo {/*Блок с логотипом*/
background:url(../images/logo.png) no-repeat;
width:344px;
height:62px;
/*Позиционируем и указываем кординату*/
position:absolute;
margin-top:50px;
margin-left:150px;
}
div#poisk {/*Блок с поиском*/
background:url(../images/bg_poisk.png)
no-repeat;
width:268px;
height:48px;
position:absolute;
padding:5px;
margin-top:50px;
margin-left:800px;
}
/*CSS хак для Mozilla*/
input#search_text, x:-moz-any-link
{ border:none;/*Убираем рамку*/
background:url(../images/text_search.png)
no-repeat;
width:213px;
height:35px;
padding-left:5px;/*Внутренние отступы*/
padding-top:10px;
float:left;
color:#5b5b5b;
font-size:11px;
font-style:italic;/*курсив - в окошке поиска по сайту*/
}
/*Тоже самое, что указано выше*/
input#search_text {
border:none;
background:url(../images/text_search.png)
no-repeat;
width:213px;
height:35px;
padding-left:5px;
float:left;
color:#5b5b5b;
font-size:11px;
font-style:italic;
}
/*Кнопка поиска*/
input#submit_search {
border:none;
background:url(../images/submit_search.png)
no-repeat;
width:39px;
height:33px;
text-indent:-9999px;
margin-left:-7px;
margin-top:1px;
}
Теперь кодируем header c меню:
div#glav_blog { /*Блок с нашей шапкой*/
background:url(../images/header_3d.png);
margin-top:210px;
margin-left:150px;
width:951px;
height:58px;
position:absolute;
}
/*Навигационное меню ненумерованного списка*/
#nav-reflection {width: 890px;list-style: none;
margin-top:-42px; margin-left:6px;}
#nav-reflection li {width: 100px;height:200px;
float: left; margin-left:20px;}
#nav-reflection a, #nav-reflection a:visited,
#nav-reflection a:hover {
width: 100px;
height: 100px;
text-indent: -9999px;
overflow: hidden;
background: url(../images/menu.png) no-repeat;
display: block;
margin-bottom:-27px;
}
/*Тень от нашего меню*/
#nav-reflection span {
width: 100px;
height: 37px;
text-align: center;
background: url(../images/shadow.png) no-repeat;
display: block;
}
/*Двигаем наш спрайс*/
#nav-reflection li.button-color-1 a
{background-position: 0px 0px;}
#nav-reflection li.button-color-2 a
{background-position: -120px 0px;}
#nav-reflection li.button-color-3 a
{background-position: -240px 0px;}
#nav-reflection li.button-color-4 a
{background-position: -359px 0px;}
#nav-reflection li.button-color-5 a
{background-position: -480px 0px;}
#nav-reflection li.button-color-6 a
{background-position: -600px 0px;}
#nav-reflection li.button-color-7 a
{background-position: -720px 0px;}
Теперь займёмся блоком content - каркасом туловища сайта:
div#content {
background:url(../images/bg_text.png) repeat-x;
background-color:#FFFFFF;
padding:0px 10px 0px 10px;
width:930px;
margin-top:268px;
margin-left:150px;
position:absolute;
}
Напоследок, чтобы закончить с CSS, расставим внутри блока "контент" всё по своим местам:
/*Вставляем title. Для динамичности лучше прописать текстом*/
p#title {
background:url(../images/title.png) no-repeat;
width:922px;
height:34px;
margin-top:45px;
}
p#title2 {
background:url(../images/title.png) no-repeat;
width:922px;
height:34px;
margin-top:45px;
}
/*Параграф с текстом*/
p#text {
color:#5a5a5a;
font:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
}
/*Последующие стили для контента*/
div#saitbar_1 {
padding:0px 30px 0px 0px;
margin-top:-10px;
float:left;
}
div#saitbar_2 {
margin-top:-10px;
padding:0px 40px 0px 0px;
float:left;
}
p#s1 a {
color:#323232;
text-decoration:none;
}
p#s1 a:hover {
color:#0b7fbd;
text-decoration:underline;
}
p#s1 img {
margin-top:-5px;
padding-right:5px;
}
div#saitbar_3 {
margin-top:-10px;
padding:0px 30px 0px 0px;
float:left;
}
div#saitbar_4 {
margin-top:-10px;
padding:0px 30px 0px 0px;
float:left;
}
div#saidbari {
width:930px;
margin-left:15px;
}
#slid_1 {
float:left;
margin-left:30px;
}
#slid_2 {
float:left;
margin-left:30px;
}
#slid_3 {
float:left;
margin-left:30px;
}
/*Вставляем блок с footer*/
div#footer {
width:930px;
height:50px;
position:absolute;
margin-top:450px;
}
/*Вставляем линию в footer*/
#line_footer {
background:url(../images/line_footer.png) no-repeat;
width:951px;
height:11px;
margin-left:-10px;
margin-top:15px;
}
/*Стили внутри footer*/
.style1 {
color:#0295da;
font-weight:bold;
}
.html {
color:#b4b4b4;
position:absolute;
margin-left:770px;
margin-top:0px;
}
.copir {
color:#b4b4b4;
position:absolute;
margin-top:0px;
}
Ну вот мы и закончили с CSS и у нас должно получится следующее:
Но ещё несовершенство, давайте добавим нашему меню JavaScript:
$(document).ready(function() {
// Выбираем идентификатор #nav-reflection
$("#nav-reflection li").append("");
// При наведении двигаем наше меню вверх, а тень вниз
$("#nav-reflection a").hover(function()
{
$(this).stop().animate({ marginTop: "-10px" }, 200);
$(this).parent().find("span").stop().animate(
{ marginTop: "18px", opacity: 0.30 }, 200);
},function()
{
$(this).stop().animate({ marginTop: "0px" }, 300);
$(this).parent().find("span").stop().animate(
{ marginTop: "1px", opacity: 1 }, 300); });
});
И незабываем подключить библиотеку Jquery, как указано выше. И после чего мы добавили нашему меню немного оригинальности.
Напоследок доработаем поиск по сайту:
$(document).ready(function(){
$("input:text, textarea, input:password").each(function(){
if(this.value == '')
this.value = this.title;
});
$("input:text, textarea, input:password").focus(function(){
if(this.value == this.title)
this.value = '';
});
$("input:text, textarea, input:password").blur(function(){
if(this.value == '')
this.value = this.title;
});
$("input:image, input:button, input:submit").click(function(){
$(this.form.elements).each(function(){
if(this.type =='text' ||
this.type =='textarea' ||
this.type =='password' ){
if(this.value == this.title && this.title != ''){
this.value='';
}}});});
});
Теперь смотрим на наш результат работы.