01
июн
2013
Всем привет, друзья! да-да сегодня будем рассматривать язык разметки 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 где пропишем стили
Откроем index.html и между тегами
Вставим:
Сохраним и откроем 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>
вот это:
в папку images добавим картинку 150X39
все дело сохраняем и перезагрузим index.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); /* Тень для шапки */
}
.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 тоже поместите новый код:
И так спасибо за внимание! на этом у меня всё и в следущем уроке поговорим об том как сделать контент и футер
Исходник урока:
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); /* Тень для шапки */
}
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 в вашем браузере где вы увидите примерный результат на скриншоте ниже:
И теперь добавим менюшку :)
в 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>
<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>
И так спасибо за внимание! на этом у меня всё и в следущем уроке поговорим об том как сделать контент и футер
Исходник урока:
|
|
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Datalife Engine
Релизы
WordPress
Joomla
Другие CMS
Web-Мастеру
Игры/Игровые CMSПоследние комментарии
-
Написал(а): SergTSY
В новости: QR Menu Maker v3.4.0 - бесконтактное меню ресторанаСсылки не рабочие.
Перезалейте, плз? -
Написал(а): anons01
В новости: Akeeba Backup Pro v9.9.2 - компонент резервного копирования для JoomlaUpload doesn't work -
Написал(а): sania4m
В новости: Aoxio v2.1 Nulled - скрипт для бронирования бизнес-услугустановка проходит , но не создается база данных -
Написал(а): Nibiru7
В новости: JRealtime Analytics v3.9.2 - компонент аналитики для Joomlaспасибо за -
Написал(а): jackxren88
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaМожет есть у кого-то решение как убрать "запрос на ключ"? -
Написал(а): Escudocu
В новости: YOO Glowbar v March 1, 2024 - Joomla шаблон для сайтов о красоте и модеБлагодарю за шаблон!!! -
Написал(а): sendinfo
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaВиндоус ругается на вирус! Проверьте архив. -
Написал(а): pmvb
В новости: Advanced Module Manager Pro v10.0.18 - расширенный менеджер модулей JoomlaADVANCED MODULE MANAGER PRO V10.0.18 просит ключь???