01 июн 2013
CSS для начинающих (less1)
SibWeb Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно CSS для начинающих (less1) .

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
CSS для начинающих (less1)


Всем привет, друзья! да-да сегодня будем рассматривать язык разметки CSS и дам вам немного практики где может быть и вы сможете создавать свои дизайны.

Что лучше div-ная вёрстка или вёрстка с использованием таблиц?
Этот вопрос рассматривался не один раз и кому удобно использовали и таблицы и дивы но ответ на этот вопрос лучше div-ная.
тем что меньше кода и намного удобнее.

И так рассмотрим создание фиксированной шапки тем что многим нравится это но чайникам это не подсилу сделать.
создадим папку на рабочем столе например: mycss и в ней 3 файла:
+ index.html <- Файл будет содержать HTML разметку
+ style.css <- Файл будет содержать CSS разметку
+ images <- Папка будет содержать файлы картинок
для редактирование текстовых файлов не рекомендую использовать простой блокнот потому что у него мало возможностей и он как-то неудобен.
рекомендую скачать и заменить обычный блокнот на Notepad++
чтобы скачать данное приложение поищите его в Google по запросу Notepad++ RUS

И так откроем index.html и создадим тело документа:

<!DOCTYPE html>
<head>
<title>CSS для начинающих - by Skripter.info & user SibWeb</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

</body>
</html>


вот наше простое тело которое мы сохраним и переходим к style.css где пропишем стили
body, html {
  background: #f6f6f6;
  width: 100%;
  height: 100%;
  padding:0px;
  margin:0px;
  font: 11px/18px tahoma, verdana, sans-serif, Lucida Sans;
}
.header {
  position: fixed; /* Фиксируем div */
  top:0%; /* Убираем отступ сверху */
  width:100%; /* Делаем ширину на 100% */
  height:40px; /* Делаем высоту на 40 пикселей */
  background: #1A8AE3; /* Цвет шапки */
  box-shadow: 0 2px 3px rgba(0, 0, 0, .25); /* Тень для шапки */
}

Откроем index.html и между тегами
<body>

Вставим:
<div class="header"></div>

Сохраним и откроем index.html в браузере где вы увидите результат :)
и так добавим в шапку логотип и менюшку.
в style.css добавим ниже:

.header #logo {
  position:absolute; /* Даём логотипу абсолютную позицию */
  background: url(images/logo.png) no-repeat; /* Прикрепляем нашу картинку */
  width:150px; /* Ширина логотипа */
  height:39px; /* Высота логотипа */
  border:0px; /* для IE (Убираем бордер) */
  margin-left:65px; /* Отступ на 65 пикселей */
}

сохраним. добавим в index.html между

<div class="header">
Сюда
</div>

вот это:
<div id="logo"><a href="/"></a></div>

в папку images добавим картинку 150X39
все дело сохраняем и перезагрузим index.html в вашем браузере где вы увидите примерный результат на скриншоте ниже:
CSS для начинающих (less1)


И теперь добавим менюшку :)
в style.css удалите полностью весь код и вставьте новый:

body, html {
  background: #f6f6f6;
  width: 100%;
  height: 100%;
  padding:0px;
  margin:0px;
  font: 11px/18px tahoma, verdana, sans-serif, Lucida Sans;
}
.header {
  position: fixed; /* Фиксируем div */
  top:0%; /* Убираем отступ сверху */
  width:100%; /* Делаем ширину на 100% */
  height:40px; /* Делаем высоту на 40 пикселей */
  background: #1A8AE3; /* Цвет шапки */
  box-shadow: 0 2px 3px rgba(0, 0, 0, .25); /* Тень для шапки */
}
.header #logo {
  position:absolute; /* Даём логотипу абсолютную позицию */
  background: url(images/logo.png) no-repeat; /* Прикрепляем нашу картинку */
  width:150px; /* Ширина логотипа */
  height:39px; /* Высота логотипа */
  border:0px; /* для IE (Убираем бордер) */
  margin-left:65px; /* Отступ на 65 пикселей */
  cursor:pointer; /* При наведение делаем курсор */
}
.header a:first-child {
  margin-right:15px; /* Делаем отступ справа */
}
.header a, .header a:visited {
  display:block; /* Отображаем div блочно */
  float:right; /* Делаем меню справа */
  height:40px; /* Высота меню */
  line-height:40px; /* Выравниваем ссылки */
  color:#BFDCED; /* Делаем цвет ссылок */
  padding:0px 15px; /* Отступ */
  font-weight:bold; /* Делаем буквы толстые */
}
.header a:hover, .header a:active {
  color:#BFDCED; /* Цвет при выделения */
  text-decoration:none; /* Убираем линии у ссылок */
  height:40px; /* Высота */
  background:rgba(0, 0, 0, 0.1); /* Делаем при выделении такой фон */
}

в index.html тоже поместите новый код:
<!DOCTYPE html>
<head>
<title>CSS для начинающих - by Skripter.info & user SibWeb</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="header">
<div id="logo" onclick="location.href='/';"></div>
<div id="a">
<a href="/">Главная</a>
</div>
</div>
</body>
</html>


И так спасибо за внимание! на этом у меня всё и в следущем уроке поговорим об том как сделать контент и футер

Исходник урока:
Скачивание файлов доступно только зарегистрированным пользователям










Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
p.a.v.e.l. | 1 июня 2013 19:43 | (1|-1)
  • Группа: Посетители |
  • Комментарий: 1 (ссылка)

урок это когда разжевывается чут-ли не каждая часть кода, а но просто он приводится, как у вас
в style.css удалите полностью весь код и вставьте новый
, сразу всему научили =))

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.