14:20:22, 29.03.2024, Пт



Бар Реактор готов принять новых постояльцев!

Место общения для гостей сайта

Выбрать дизайн:
Обновленные темы Популярные темы Последние файлы Последние новости

  • Страница 1 из 1
  • 1
Форум » Для вебмастеров » Графика для сайта » Линии для Оформления сайта
Линии для Оформления сайта
Дата: Пт, 07.10.2011, 21:53:25 | Сообщение # 1
Сообщений:
Линии для Оформления сайта
Типы линий и как их создавать

Линии можно применять, например, для того, чтобы делить пост на логические разделы, отделять друг от друга цитаты, мысли, афоризмы.
Замечу, что цветные линии отображаются на 100% корректно только в IE
Вот она, линия:



ее код:
Code
<hr>

Далее:

Code
<hr align=center width=60%>


По умолчанию линия имеет толщину 2 пиксела и некоторую объемность.

Необъемная линия:


Code
<hr noshade>




Code
<hr noshade width=60% size="3">




Code
<hr size=3 color="#FF0000">




Code
<hr size="5" width="60%" align="center" color="blue">




Code
<hr color="blue" size="7" style="border: dotted 5pt; border-color: red ">




Code
<hr color="red" size="9" style="border: dotted 5pt; border-color: blue ">




Code
<hr color="black" size="4" style="border: dashed 5pt; border-color: aqua ">


Повторюсь, что цветные линии корректно отображает только IE, поэтому иногда проще использовать клавиатурные или спец. символы:

~~~~~~~~~~~~~~~~~~~~~~~~


Code
<p align=center style=color:blue;>~~~~~~~~~~~~~~~~~~~~~~~~</p>

оформленные в виде текстового абзаца:


Code
<img src=http://img218.imageshack.us/img218/9140/line002va4.gif align=center>



Code
<img src=http://media.bigoo.ws/content/90/265890/Stars.gif align=center>



Code
<img src=http://img87.imageshack.us/img87/6087/hline13lz2.gif align=center>

Эти линии представляют собой картинки (и их должны корректно отображать все браузеры)
Собраний таких картинок в сети сейчас пруд пруди.

Наберите в поисковике divider - и вперед
Если нужно прижать линию к левой кромке записи, вместо align=center ставьте align=left
к правой - align=right

взято с ucozon.ru



Дата: Пт, 07.10.2011, 23:46:35 | Сообщение # 2
Сообщений:
Это пока для меня тяжело , но учить буду.
Спасибо автору темы.

И ещё не понятно как можно линии не горизонтально ставить а вертикально .



Дата: Сб, 08.10.2011, 01:16:54 | Сообщение # 3
Сообщений:
Горизонтальная HTML линия определяется непарным тегом
Code
<hr />

HTML линия может быть не только горизонтальной, но и вертикальной.
Вертикальная линия в HTML может являться стороной блока или ячейки таблицы.
Линия в HTML бывает любого размера и цвета, имеет или не имеет объемность.
Пример вертикальной линии красного цвета слева.

Code
<div style="height:30px; width:560px; border-left:2px solid #cc0033; background-color:#fc9; padding-left:10px">Пример вертикальной линии красного цвета слева.    
</div>



Code
<div style="height:40px; width: 2px; background-color:red" > </div>



Дата: Сб, 04.08.2012, 15:16:29 | Сообщение # 4
Сообщений:
RUS_D, [b10] drink [ccpas]![/ccpas][/b10]


Дата: Пт, 29.03.2013, 13:15:43 | Сообщение # 5
Сообщений:


Код
[url=http://fotki.yandex.ru/users/fot462/view/285963/][img]http://img-fotki.yandex.ru/get/4805/fot462.137/0_45d0b_628018c1_L.jpg[/img][/url]



Дата: Пт, 29.03.2013, 13:18:31 | Сообщение # 6
Сообщений:
Линии для оформления дизайна документа html.

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

Горизонтальные разделительные линии задаются тэгом
и не требует закрывающего тэга. Для линий html, также имеются дополнительные атрибуты, которые прописываются в тэге
:

width – задаёт длину линии. Может быть как в пикселях, так и в процентах;
size – задаёт толщину линии. Лучше всего задавать в пикселях. По умолчанию линия имеет толщину 2 пикселя;
align - атрибут для выравнивания линии по горизонтали. Может иметь значения center, right, left:
center - выравнивание по центру документа;
right - выравнивание по правому краю документа;
left - выравнивание по левому краю документа.
noshade – атрибут для формирования сплошной темной линии;
сolor - задаёт цвет линии. Работает только в Internet Explorer.

Теперь посмотрим, как это выглядит в коде html:




Далее поговорим о вертикальных линиях html. Прописать такую линию можно несколькими способами, с помощью таблиц и с помощью стилей.
Разберём создание вертикальных линий с помощью таблиц. Код html будет выглядеть следующим образом:

Код
<table width="40%" cellpadding="0"
  cellspacing="15" border="0" align="center">
  <tr>
<td width="4" bgcolor="#990000">
<img src="spacer.gif" width="4" height="1">
</td>
  <td>Анекдоты - самая распространенная в
  современном фольклоре форма юмора. Анекдоты
  наиболее короткие по содержанию и сжатые в
  изложении рассказы о забавных случаях с
  неожиданной и остроумной концовкой, что в
  лучшую сторону отличает их от таких не менее
  забавных жанров как частушки, стишки, приколы
  и афоризмы. На этом сайте Вы найдёте
  множество
<a href="http://www.rabotjagamneta.com/iymor1.html">прикольных анекдотов</a>  и
  сможете расслабиться от повседневных трудовых будней.
</td>
  </tr>
  </table>


Параметры cellpadding и border должны быть равны нулю, cellspacing определяет расстояние от текста до линии, width ширина линии.

Создать вертикальную линию можно также с помощью стилей. Код html будет иметь такой вид:

Код
<style type="text/css">
  P.line
  {
(Прописываем расположение вертикальной
  линии от текста.)
border-left: solid 2px black;
(Прописываем отступ от края до текста.)
margin-left: 20px;  
(Прописываем расстояние от линии до текста)
padding-left: 7px;
}
  </style>


Он прописывается в теге ....
Пример расположения стилей в коде html:

Код
<html>
  <head>
  <title>Прикольные анекдоты.</title>
<style type="text/css">
  P.line  
  {
  border-left: solid 2px black;  
  margin-left: 20px;  
  padding-left: 7px
  }
  </style>
  </head>
  <body text="#FF0033" bgcolor="#66CC99"
  link="#FF3366" alink="#6666FF"
  vlink="#FF3366">
  <div align="center">
  <H1>Прикольные анекдоты.</H1>
  <font color="#0000CC">Вселенная юмора.
</font>
  </div>
  <p class="line" align="justify">
<font color="#63300" face=" Garamond, Arial,
  Verdana ">Анекдоты - самая распространенная в современном фольклоре форма юмора. Анекдоты наиболее короткие по содержанию и сжатые в изложении рассказы о забавных случаях с неожиданной и остроумной концовкой, что в лучшую сторону отличает их от таких не менее забавных жанров как частушки, стишки, приколы и афоризмы. На этом сайте Вы найдёте
  множество
<a href="http://www.rabotjagamneta.com/iymor1.html">прикольных анекдотов</a>
  и сможете расслабиться от повседневных
  трудовых будней.
</font></p>
  </body>
  </html>



Дата: Пт, 29.03.2013, 13:50:46 | Сообщение # 7
Сообщений:
Подборка линий и разделителей


Код
[url=http://ifotki.info/][img]http://f14.ifotki.info/org/1cb3457e3d52430f54d2eac9ccff41365f6f94147210400.gif[/img][/url]



Код
[url=http://ifotki.info/][img]http://f14.ifotki.info/org/fc1b58cde115fb7f4adac0ba4b2a04df5f6f94147210400.gif[/img][/url]



Код
[url=http://ifotki.info/][img]http://f14.ifotki.info/org/5c7225863dafa94e78ac3035ef5ba8e75f6f94147210400.gif[/img][/url]



Код
[url=http://ifotki.info/][img]http://f14.ifotki.info/org/388e390b31d8092e55505c46d50a59685f6f94147210400.gif[/img][/url]




Код
[url=http://ifotki.info/][img]http://f14.ifotki.info/org/5f45b43db6ddaf641df1553de71b5fe95f6f94147210400.gif[/img][/url]



Код
[url=http://ifotki.info/][img]http://f14.ifotki.info/org/8bdbd5878f5c1be406d56af7929674b65f6f94147210400.gif[/img][/url]



Код
[url=http://ifotki.info/][img]http://f14.ifotki.info/org/2dcb265e15ed433d10b7e54aa6d4754b5f6f94147210400.gif[/img][/url]



Код
[url=http://ifotki.info/][img]http://f14.ifotki.info/org/7995656f8c24f6015e79c296672fb3575f6f94147210400.gif[/img][/url]



Код
[url=http://ifotki.info/][img]http://f14.ifotki.info/org/0cb8b979de37402aa52efd81126697245f6f94147210400.gif[/img][/url]



Код
[url=http://ifotki.info/][img]http://f14.ifotki.info/org/305d34ed542ba5c3f7930fcd863665b35f6f94147210400.gif[/img][/url]




Дата: Пт, 29.03.2013, 14:03:46 | Сообщение # 8
Сообщений:

Код
[url=http://ifotki.info/][img]http://f14.ifotki.info/org/83a0a43e253765753dc38c0babe523ff5f6f94147210760.gif[/img][/url]



Код
[url=http://ifotki.info/][img]http://f14.ifotki.info/org/3f0d881791f3c10c42675c85fdf165e85f6f94147210760.gif[/img][/url]



Код
[url=http://ifotki.info/][img]http://f14.ifotki.info/org/015a19165df5273d86d57755fbaacd7d5f6f94147210760.gif[/img][/url]





Дата: Пт, 29.03.2013, 14:12:53 | Сообщение # 9
Сообщений:


Код
[url=http://ifotki.info/][img]http://f14.ifotki.info/org/7692dcca020459d1e185749d6a3857885f6f94147211317.gif[/img][/url]




Код
[url=http://ifotki.info/][img]http://f14.ifotki.info/org/ebe15cb860957bf32d0a4cbcb300225d5f6f94147211317.gif[/img][/url]




Код
[url=http://ifotki.info/][img]http://f14.ifotki.info/org/01e192255ab862f1b824bc13d9d43cf15f6f94147211317.gif[/img][/url]




Код
[url=http://ifotki.info/][img]http://f14.ifotki.info/org/f70a13232e07144c846ff19eb1f8da685f6f94147211981.gif[/img][/url]




Код
[url=http://ifotki.info/][img]http://f14.ifotki.info/org/56ff8c739937d775259ba0a6b83b91cc5f6f94147211981.gif[/img][/url]




Дата: Пт, 29.03.2013, 18:46:22 | Сообщение # 10
Сообщений:
Продолжение каталога.
На этом примере можно увидеть разделить, где ссылку Вы можете поставить свою.
Так же нарисовать свою картинку.




Код
[url=http://bar-reaktor.ru/][img]http://bar-reaktor.ru/kartinki/0.png[/img][/url]




Код
[url=http://bar-reaktor.ru/][img]http://bar-reaktor.ru/kartinki/poloski/547387016.gif[/img][/url]




Код
[url=http://bar-reaktor.ru/][img]http://bar-reaktor.ru/kartinki/poloski/48f9c0fecef9.gif[/img][/url]




Код
[url=http://bar-reaktor.ru/][img]http://bar-reaktor.ru/kartinki/poloski/1ab1052fa951.gif[/img][/url]




Код
[url=http://bar-reaktor.ru/][img]http://bar-reaktor.ru/kartinki/poloski/aeae6cd16046.gif[/img][/url]




Код
[url=http://bar-reaktor.ru/][img]http://bar-reaktor.ru/kartinki/poloski/b9526cc46bed.gif[/img][/url]




Дата: Пт, 29.03.2013, 19:48:13 | Сообщение # 11
Сообщений:
Линии сталкер
1. Рисуем картинку.
2.Загружаем в ФМ
3.Вставляем в код



Код
[url=http://bar-reaktor.ru/][img]http://bar-reaktor.ru/kartinki/poloski/stalker-1.gif[/img][/url]




Код
[url=http://bar-reaktor.ru/][img]http://bar-reaktor.ru/kartinki/poloski/stalker-2.gif[/img][/url]



Дата: Пн, 09.09.2013, 19:31:39 | Сообщение # 12
Сообщений:

~~~~~~~~~~~~~~~~~~~~~~~~




Дата: Чт, 26.12.2019, 16:15:05 | Сообщение # 13
Тень Зоны
Сообщений:
2849
Статус:
Новые разделители..
Цвет и размер меняем сами))








Скачать архив PNG-фай ( все файлы разложены по папкам, выбираем нужный, вставляем на новый слой сохраняем и готово.

Цветные.














Художественные.

















Пропуск в ЧЗО
Дополнительная информация

Сталкер LENA_D..
В Зоне: 11.10.2010
Ранг: Синдикат наёмников
Страна: Украина
город: Полтава



Дата: Чт, 26.12.2019, 16:33:32 | Сообщение # 14
Тень Зоны
Сообщений:
2849
Статус:
Графическая анимация и прочие






















Пропуск в ЧЗО
Дополнительная информация

Сталкер LENA_D..
В Зоне: 11.10.2010
Ранг: Синдикат наёмников
Страна: Украина
город: Полтава



Дата: Чт, 26.12.2019, 16:42:39 | Сообщение # 15
Тень Зоны
Сообщений:
2849
Статус:

















Пропуск в ЧЗО
Дополнительная информация

Сталкер LENA_D..
В Зоне: 11.10.2010
Ранг: Синдикат наёмников
Страна: Украина
город: Полтава



Форум » Для вебмастеров » Графика для сайта » Линии для Оформления сайта
  • Страница 1 из 1
  • 1
Поиск:
Использование материалов сайта только с разрешения Администрации! ☆ kapa- bar-reaktor.ucoz.ru

Яндекс.Метрика