"Помощь в развитии Сайта"     "Торрент- трекер от Наших сайтов"     "Архив сайта"

Выбрать дизайн:
Страница 1 из 11
Модератор форума: XemorDio 
Форум » Для вебмастеров » Графика для сайта » Линии для Оформления сайта
Линии для Оформления сайта
RUS_D Дата: Пт, 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

Знаток Зоны
В Зоне Реактора с 25.08.2011
Заслуги в Зоне Реактора
Это пока для меня тяжело , но учить буду.
Спасибо автору темы.

И ещё не понятно как можно линии не горизонтально ставить а вертикально .
 
RUS_D Дата: Сб, 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

Знаток Зоны
В Зоне Реактора с 25.08.2011
Заслуги в Зоне Реактора
RUS_D, [b10] drink [ccpas]![/ccpas][/b10]
 
Фреон Дата: Пт, 29.03.2013, 13:15:43 | Сообщение # 5

Знаток Зоны
В Зоне Реактора с 25.08.2011
Заслуги в Зоне Реактора


Код
[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

Знаток Зоны
В Зоне Реактора с 25.08.2011
Заслуги в Зоне Реактора
Линии для оформления дизайна документа 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

Знаток Зоны
В Зоне Реактора с 25.08.2011
Заслуги в Зоне Реактора
Подборка линий и разделителей


Код
[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

Знаток Зоны
В Зоне Реактора с 25.08.2011
Заслуги в Зоне Реактора

Код
[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

Знаток Зоны
В Зоне Реактора с 25.08.2011
Заслуги в Зоне Реактора


Код
[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

Знаток Зоны
В Зоне Реактора с 25.08.2011
Заслуги в Зоне Реактора
Продолжение каталога.
На этом примере можно увидеть разделить, где ссылку Вы можете поставить свою.
Так же нарисовать свою картинку.




Код
[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

Знаток Зоны
В Зоне Реактора с 25.08.2011
Заслуги в Зоне Реактора
Линии сталкер
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

Знаток Зоны
В Зоне Реактора с 25.08.2011
Заслуги в Зоне Реактора

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

 
Форум » Для вебмастеров » Графика для сайта » Линии для Оформления сайта
Страница 1 из 11
Поиск:

Сегодня в Баре - Реактор

Кто был:
Легенда условных обозначений : Призрак, Администратор, Модератор, Проводник, Сталкеры, Чистое небо, Тёмные, Свобода, Наёмники, Нейтралы, Военные, Долг, Монолит, Заблокированные .

Последние сообщения:

Чат

Активисты Форума:

Нужные темы:


Radio Унесённых Сталкером
Отель «Бар Реактор» всегда готов принять новых постояльцев.Чёрный Сталкер
CMIT               (03.04.2016)
kapa               (09.01.2014)
Dimon02022               (08.11.2011)
Strelok               (01.11.2014)
ULTRA               (04.09.2015)
tyman21               (09.11.2013)
Этот               (01.08.2015)
garwas               (12.11.2011)
WULF               (22.10.2015)

Пришедшие в Бар:


Dean_Ambrose               (29.03.2017)
Damir1985               (29.03.2017)
vova-veter               (28.03.2017)
Киря               (27.03.2017)
Райдер               (25.03.2017)
Xtebr               (25.03.2017)
Рейтинг@Mail.ru Этот сайт защищен «Site Guard» Яндекс.Метрика