-Метки

Маски анекдоты анимация антивирус блины блюда из грибов блюда из картошки блюда из курицы блюда из мяса блюда из овощей блюда из печени блюда из рыбы блюда из творога блюда из яблок блюда из яиц булочки бутерброды варенье выпечка вязание десерт диета заготовки закуска запеканка здоровье картины художников кисти клипарт книги коды комменты консервирование котлеты красота кухня личное майонез маска маска для лица маски для фотошоп мои мысли мои работы молитва мороженное музыка народные советы народные средства оладьи открытки пейзаж пельмени печенье пирог пироги пироженные пирожки пицца плеер подарки поздравление поздравления полезные советы пост постные блюда праздник притча программа психология работа друзей работы друзей разделители рамка рамки редактор рулет салат салаты сало сладкие блюда стихи суп схемы сырники текстура тест тесто торт урок уроки уроки фотошоп фильтры фоны фотошоп хлеб цветы цитата цитаты экшен это интересно юмор

 -Цитатник

8 рамочек-открыток к дню Влюблённых - (0)

ВАШ КРАСИВЫЙ ТЕКСТ ***ваш текст*** Прокрутка появится в том случае, если Вы вставите большой те...

Клип-Арт - 23 Февраля: вырезки от Mirosslava - (0)

  Клик на картинку открывает...

Рамочки для текста - (0)

...ТЕКСТ...ТЕКСТ... ...ТЕКСТ...ТЕКСТ... ...ТЕКСТ...ТЕКСТ... ...ТЕКСТ...ТЕКСТ... ...

Новогодние рамочки-открытки для поздравлений - (0)

*** ВАШ ТЕКСТ***ваш текст*** *** ВАШ ТЕКСТ***ваш текст*** ***ваш текст*** ...

Фильтры для Фотошопа и Корел - (0)

http://www.crealinegraphic.com/ressources/page_filtres_1.htm https://www.liveinternet.ru/users/3134...

 -Рубрики

 -Приложения

  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Всегда под рукой Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
  • Музыкальный плеер
  • Перейти к приложению Скачать музыку с LiveInternet.ru Скачать музыку с LiveInternet.ruПростая скачивалка песен по заданным урлам
  • Перейти к приложению 5 друзей 5 друзейСписок друзей с описанием. Данное приложение позволяет разместить в Вашем блоге или профиле блок, содержащий записи о 5 Ваших друзьях. Содержание подписи может быть любым - от признания в любви, до

 -Фотоальбом

Посмотреть все фотографии серии Общая
Общая
11:52 31.12.2018
Фотографий: 10

 -Поиск по дневнику

Поиск сообщений в ZOYA_50

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 08.04.2012
Записей: 10019
Комментариев: 38864
Написано: 77820


Как сделать линию с помощью HTML и CSS

Вторник, 28 Марта 2017 г. 11:13 + в цитатник

как сделать линию с помощью html i css

Для подчеркивания некоторых особенно важных элементов сайта, не помешало бы использовать всевозможные и предусмотренные для этого CSS стили и свойства.  Допустим, у вас есть текст, который нуждается в разделении из-за специфики его смысловой нагрузки. Вот тут-то и приходят на помощь html и СSS свойства.

Как сделать в тексте линию средствами CSS

Для реализации задуманного нам понадобится обратиться к файлу style.css, прописав в нем соответственное свойство border. Тем самым над, под или с определенной стороны текста появится линия. В свою очередь предусмотрено несколько свойств, отвечающих за отображение линии, а именно:

- border-top – горизонтальная линия, расположенная над текстом;

- border-right – вертикальная линия, расположенная справа от текста;

- border-bottom – горизонтальная линия, расположенная под текстом;

- border-left – вертикальная линия находящаяся слева.

Как сделать линию в html

Используя свойства CSS можно прописать все необходимые значения редактируя HTML код. Для этого нужно перейти в административную часть сайта. Выбрать один из опубликованных материалов, переключить текстовый редактор в режим правки html кода и внести свойства CSS. Образец можно лицезреть ниже.

 

Как сделать пунктирную или прямую линию?

Прописав данные свойства вам удастся подчеркнуть важность излагаемого материала, абзаца или заголовка?

 

<html>
<head>
<title>Как сделать пунктирную или прямую линию?</title>
</head>
<body>
<div style="width:500px;
border-top:3px solid #9EC1D4;
border-bottom: dotted 3px #9EC1D4;
padding-left:10px">
Прописав данные свойства вам удастся подчеркнуть важность излагаемого материала, абзаца или заголовка?
</div>
</body>
</html>

Краткая расшифровка команд

- width – длина линии;

- solid – сплошная линия;

- dotted – точечная линия.

Нужно уяснить, что в процессе внесения изменений в код сайта, свойства, определяющие тип линии, ее толщину и цвет перечисляются через пробел.

Приведенный способ имеет несколько достоинств:

- Обширный ассортимент возможностей, с помощью которых можно сделать практически любую линию.

- Легкость внесения всех необходимых изменений непосредственно в HTML код. Это во многом упрощает задачу для неопытных сайтостроителей.

Как сделать прямую горизонтальную линию с помощью тега HTML <hr>

Первое на что хотелось бы обратить ваше внимание, это то, что у данного тега, несмотря на все тонкости и принципы html, нет закрывающегося тега. Он может быть использован в любом месте html кода, между тегами <body> и </body>.

Атрибуты тега <hr>

 

- width – отвечает за длину линии. Может указываться как в процентах, так и пикселях.

- size – толщина линии. Указывается в пикселях.

- color – определяет цвет линии.

- align – атрибут, отвечающий за выравнивание линии. В свою очередь к нему относится команда:

- right – выравнивание справа;

- left – выравнивание слева;

- centre – центральное выравнивание.

Образец html кода с использованием тега <hr>

<hr size=3px width=500px align="left">



Надеюсь, у вас все получилось, и теперь вы знаете, как сделать линию у себя на сайте.

источник
Рубрики:  уроки
Метки:  

Процитировано 20 раз
Понравилось: 26 пользователям