Линия div отреза - Скрипты Разное - web мастеру ucoz
Приветствую Вас Прохожий | RSS Четверг, 23.02.2017, 05:38
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 7
Гостей: 7
Пользователей: 0



Главная » Файлы » Скрипты для uCoz » Скрипты Разное

Линия div отреза

Линия div отреза Линия, div, отреза
В идеале, линия должна формироваться единственным тегом <div>, а всё остальное возлагается на стили, включая вывод рисунка и надпись.

Для начала в HTML вставим основу линии.

Code
<div class="line"></div>

Поскольку ножницы выводятся под линией, то воспользуемся свойством border-top. Если бы рисунок выводится над линией, соответственно потребуется border-bottom. Сам рисунок ножниц имеет высоту 37 пикселов, отнимем один пиксел на толщину линии, разделим полученное значение пополам и получим 18 пикселов видимой части. Это число будет высотой блока и значением для сдвига фона вверх.

Code
.line {
  border-top: 1px dashed #000; /* Параметры линии */
  height: 18px; /* Высота блока */
  background: url(images/scissors.png) no-repeat 10px -18px; /* Параметры фона */
}

В свойстве background указывается путь к рисунку, отменяется повторение фона и задаётся сдвиг вправо на 10px и вверх на 18px. Сдвиг по вертикали нужен, потому что у нас на картинке целые ножницы, а не их половинка (рис. 2).

Рис. 2. Изображение ножниц для линии

Осталось добавить текст под линией. Воспользуемся псевдоэлементом :after, в сочетании со свойством content он позволяет выводить текст после элемента. Добавляем :after к классу line.

Code
.line:after {  
  content: "Линия отреза";
}

Окончательно выравниваем текст по центру линии через свойство text-align и настраиваем вид текста (пример 1).

Пример 1. Линия

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Линия отреза</title>
  <style type="text/css">
  .line {
  text-align: center; /* Выравниваем текст по центру */
  border-top: 1px dashed #000; /* Параметры линии */
  height: 18px; /* Высота блока */
  background: url(images/scissors.png) no-repeat 10px -18px; /* Параметры фона */
  }
  .line:after {  
  content: "Линия отреза";  
  font-family: Arial, sans-serif; /* Рубленый шрифт для надписи */
  font-size: 12px; /* Размер шрифта */
  vertical-align: top; /* Выравнивание по верхнему краю */
  }
  </style>
  </head>
  <body>
  <p>Текст до</p>
  <div class="line"></div>
  <p>Текст после</p>
  </body>
</html>

Браузер IE7 не поддерживает псевдоэлемент :after, поэтому текст под линией в нём выводиться не будет.

На примере простого декоративного элемента вроде линии показано соблюдение принципа разделения оформления и содержания. Стиль линии, включая текст, который в действительности не является частью страницы, а относится к линии, формируется через CSS. В коде HTML остаётся только пустой <div> с классом line. В итоге мы можем легко модифицировать нашу линию, вообще не затрагивая HTML-код. К примеру, заменить рисунок ножниц или вывести текст сверху, а не снизу линии.

Автор\Источник: не указан или не известен!

Для того что бы скачать архив необходимо зайти на сайт как пользователь.

Дополнительные скрины:
Линия div отреза

Просмотров: 2320 | Рейтинг: 4.5/2 | |Категория: Скрипты Разное | Добавил: мир | Дата: 23.02.2011 | Скачали: 0 | Теги: отреза, линия
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Комплексный прогон сайт...

51

2 Нужны дизайнеры

0

3 Вакансия копирайтера/пе...

1

4 Верстка

13

5 Файловик. Уникальные те...

1

6 Продажа ручного рерайта...

0

7 Куплю сайты с трафиком

0

8 Баннер 88х31

11

9 Оцените макет на тему W...

7

10 Оценка картинки

6


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2017


Кнопка 88х31 сайта ucozon.ru