Создание фиксированного блока
Среда, 25 августа 2010 г.Рубрика: Учебник CSS
Метки: css | создание фиксированного блока
Просмотров: 1097
Подписаться на комментарии по RSS
Вы должно быть встречали на сайте фиксированные блоки, которые при
прокрутке остаются на месте, то есть не исчезают с экрана. В основном в
этих блоках можно встретить меню или ссылку оставить отзыв. Такие блоки
задаются при помощи css. В css существует свойство position, которое
определяет позицию блока, и в нём есть параметр fixed, который
фиксирует блок на одном месте, и при прокруте блок остаётся на том же
месте и не исчезает с экрана, то есть он не прокручивается вместе с
контентом сайта, и всегда виден пользователю. Этот не хитрый приём
можно использовать, например чтобы заманить пользователя на какую
нибудь страницу Вашего сайта, скажем на страницу с акцией, или чтобы
пользователь оставил отзыв о статье, или чтобы зарегистрировался.
И так для начала создадим файл index.html, в котором не будет контента вообще:
<html> <head> <title>Учебник CSS</title> </head> <body> </body> </html>
Теперь создадим файл style.css, в котором будем прописывать стили для фиксированного блока:
#menu {
}
У нас есть файл index.html, файл style.css, в котором есть индекс меню, в котором пропишим стили для блока нашего меню.
Для начала зададим фиксированную позицию:
#menu {
position: fixed; /* Задаём фиксированную позицию */
}
Теперь сделаем отступ от верха и правой стороны страницы, то есть поместим блок в правый верхний угол:
#menu {
position: fixed; /* Задаём фиксированную позицию */
right: 10px; /* Задаём отступ от правой стороны страницы */
top: 20%; /* Задаём отступ от верха страницы */
}
Чтобы у нас был красивый текст в блоке, зададим для него стили:
#menu {
position: fixed; /* Задаём фиксированную позицию */
right: 10px; /* Задаём отступ от правой стороны страницы */
top: 20%; /* Задаём отступ от верха страницы */
font-family: sans-serif; /* Рубленый шрифт */
font-weight: bold; /* Толщина текста */
font-size: 0.75em; /* Размер шрифта */
color: #fafafa; /* Цвет текста */
}
Получается не плохо, теперь зададим рамку и фон для блока:
#menu {
position: fixed; /* Задаём фиксированную позицию */
right: 10px; /* Задаём отступ от правой стороны страницы */
top: 20%; /* Задаём отступ от верха страницы */
font-family: sans-serif; /* Рубленый шрифт */
font-weight: bold; /* Толщина текста */
font-size: 0.75em; /* Размер шрифта */
color: #fafafa; /* Цвет текста */
background: #00C1FF; /* Цвет фона */
border: 1px solid #333; /* Параметры рамки */
}
Всё бы хорошо, да только текст будет вплотную с рамкой блока, для улучшения вида блока зададим оступ внутри:
#menu {
position: fixed; /* Задаём фиксированную позицию */
right: 10px; /* Задаём отступ от правой стороны страницы */
top: 20%; /* Задаём отступ от верха страницы */
font-family: sans-serif; /* Рубленый шрифт */
font-weight: bold; /* Толщина текста */
font-size: 0.75em; /* Размер шрифта */
color: #fafafa; /* Цвет текста */
background: #00C1FF; /* Цвет фона */
border: 1px solid #333; /* Параметры рамки */
padding: 10px; /* Делаем внутренний отступ */
}
Со стилями закончили, теперь перейдём к html документу.
В нём пропишем блок, и внутри блока пару ссылок:
<html> <head> <title>Учебник CSS</title> </head> <body> <div id="menu">Меню<br /><br /><a href="#">Главная</a><br /><a href="#">Скачать</a></div> </body> </html>
Ну и для того чтобы ссылки смотрелиcь лучше, пропишим для них стиль в style.css:
#menu {
position: fixed; /* Задаём фиксированную позицию */
right: 10px; /* Задаём отступ от правой стороны страницы */
top: 20%; /* Задаём отступ от верха страницы */
font-family: sans-serif; /* Рубленый шрифт */
font-weight: bold; /* Толщина текста */
font-size: 0.75em; /* Размер шрифта */
color: #fafafa; /* Цвет текста */
background: #00C1FF; /* Цвет фона */
border: 1px solid #333; /* Параметры рамки */
padding: 10px; /* Делаем внутренний отступ */
}
a{
color: #fafafa; /* Задаём белый цвет ссылок */
text-decoration: underline; /* Делаем нижнее подчёркивание ссылок */
}
a:hover {
text-decoration: none; /* Убираем подчёркивание ссылки, если пользователь навёл на неё */
}
бестолковая статья в которой ничего не работает!
Бестолковый из вас программист, коли не можете просто скопировать код!