Здесь был samar65 )))))
31.03.2015 в 11:23
Пишет Talka13:Маленькие шпаргалки по оформлению diary-постовURL записи
Висела у меня эта радость в черновиках, но я их забываю обновлять и теряю всякие полезности. Пусть висит здесь.
Маленькие шпаргалки по оформлению diary-постов
Как вставить флеш
Легкий способ вставить невставляемый флеш Если флеш-объект не вставляется,
проверить и добавить закрывающий тэг (</embed>)
Talka13: вставила в эпиграф часики по инструкции — работает
Как нарисовать линии (разделитель, обрамление, границы таблицы)
Линии
горизонтальная линия - тэг <hr>
Добавлены бортики к тегу <div> Talka13: (видимо так же м. к другим)
Где первый параметр - толщина, второй - тип (solid, dotted, dashed, double, groove, ridge, inset, outset), а третий - цвет. Можно описывать бортики только с каких-то конкретных сторон:
border-top: ...;
border-bottom: ...;
border-left: ...;
border-right: ...;
Пример:Talka13:тренировка
1.1 1.2 2.1 2.2 3.1 3.2 4.1 4.2 1-й столбец только левая и нижняя граница (цвет, тип и толщина линии по порядковому номеру 1-4)
2-й столбец только правая и нижняя граница (цвет, тип и толщина линии по порядковому номеру 5-8)
1 — черный (#000;); solid (одинарная)
2 — красный (#f00;); dotted (точки)
3 — зеленый (#0f0;); dashed (штрихи)
4 — синий (#00f;); double (двойная)
5 — желтый (#ff0;); groove (объемная рамка)
6 — голубой (#0ff;); ridge (объемная рамка)
7 — розовый (#f0f;); inset (объемная рамка)
8 — белый (#fff;); outset (объемная рамка)
Как оформить цитату (программирование кнопки, границы, фон, картинки)
Оформление цитат цитата Параметры общие для всех примеров:
font: italic 14px Verdana; — параметры текста (наклонный, размер, шрифт)
display: block; — Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега , заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
margin: 0px; — Внешние отступы будут установлены одновременно от каждого края элемента.
padding: 7px; — Внутренний отступ от левого края (отличающийся параметр в примерах с картинками)
Параметры отличающиеся:
border-left: 5px solid #ff9900 — левая граница (ширина, тип линии, цвет)цитата Параметры отличающиеся:
border-left: 5px solid #ff9900 — левая граница (ширина, тип линии, цвет)
border-right: 5px solid #ff9900 — правая граница (ширина, тип линии, цвет)цитата Параметры отличающиеся:
border-top: 3px solid #ff9900; — верхняя граница (ширина, тип линии, цвет)
border-bottom: 1px solid #ff9900; — нижняя граница (ширина, тип линии, цвет)цитата Параметры отличающиеся:
border-top: 3px solid #ff9900; — верхняя граница (ширина, тип линии, цвет)цитата Параметры отличающиеся:
border-top: 3px solid #ff9900; — верхняя граница (ширина, тип линии, цвет)
border-left: 5px solid #ff9900; — левая граница (ширина, тип линии, цвет)цитата Параметры отличающиеся:
border-top: 1px solid #ff9900; — верхняя граница (ширина, тип линии, цвет)
border-right: 1px solid #ff9900; — правая граница (ширина, тип линии, цвет)
border-bottom: 1px solid #ff9900; — нижняя граница (ширина, тип линии, цвет)
border-left: 5px solid #ff9900 — левая граница (ширина, тип линии, цвет)цитата Параметры отличающиеся:
background-color: #ff9900; — цвет фонаТекст
Текст
Текстtext-align:left; — выравнивание текста по левому краю
padding: 10px 10px 10px 45px; — отступ текста от краев блока
background: url('/userdir/3/0/7/3/3073304/80870501.png') repeat-y; — картинка фона (адрес изборажения из БИ, повтор по оси y) Взяла картинку из своей БИ, оригинал см.по URL записи.
border: 1px solid #1894b5; — граница блока (ширина, тип линии, цвет)Текст text-align:left; — выравнивание текста по левому краю
padding: 20px 10px 10px; — отступ текста от краев блока
background: url('/userdir/3/0/7/3/3073304/80870501.png') repeat-x; — картинка фона (адрес изборажения из БИ, повтор по оси х) Взяла картинку из своей БИ, оригинал см.по URL записи.
border: 1px solid #1894b5; — граница блока (ширина, тип линии, цвет)Talka13:тренировка цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата цитата Не поняла почему нужно выравнивание по левому краю, ведь оно по умолчанию — убрала, разницы не заметила.
padding: 4px 4px 4px 40px; — отступ текста от краев блока
background: url('/userdir/3/0/7/3/3073304/81071501.png') no-repeat; — картинка фона (адрес изборажения из БИ, без повтора).
border-top: 3px solid orange; border-bottom: 1px solid orange; — границы верхняя + нижняя (ширина, тип линии, цвет)
font: italic 14px Verdana; letter-spacing: 3px; — параметры текста (наклонный, размер, шрифт) + расстояние м/у буквамиСправочные материалы:
Значения Padding и Margin устанавливаются по часовой стрелке (как показано на рисунке выше).Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.
1 — Поля будут установлены одновременно от каждого края элемента.
2 — Первое значение устанавливает поля от верхнего и нижнего края, второе — от левого и правого.
3 — Первое значение задает поле от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4 — Поочередно устанавливается поля от верхнего, правого, нижнего и левого края.
Как оформить эпиграф
Эпиграф
много текстамноготе кстамного текстамноготекстам ноготекстамного текстамноготекстамно готекстамноготекстамноготекстамноготекст амноготекста многотекстамноготекс тамноготекстамн оготекстамноготекста многотекстамноготекстамного текстамноготекстамноготекста многотекстамн оготек стамногот екстамноготекстамноготекстаposition:relative; —
float:right; —
width:200px; — определяет ширину эпиграфа
margin:10px; — внешнее расстояние от рамки до окружающих элементов
padding:10px; — внутреннее расстояние от рамки до текста
background-color:#EFEFEF — фоновый цвет блока эпиграфа. Если фон не нужен - то необходимо стереть этот параметр.
text-align:right —
clear:both — "А что такое clear: both и зачем оно нужно? Когда мы говорим браузеру float:right, он помещает блок справа. При этом блоки, которые идут ниже, будут показаны рядом с ним. Когда мы говорим clear:both, это значит, что этот блок нельзя помещать рядом с блоком, у которого float:right. Поэтому текст, следующий после цитаты, оказывается внизу, а не рядом." URL комментария
© Авторство или подписьwidth:200px; — определяет ширину эпиграфа
margin:10px 10px 10px auto; — внешнее расстояние от рамки до окружающих элементов
padding:10px; — внутреннее расстояние от рамки до текста
background-color:#EEE; — фоновый цвет блока эпиграфа. Если фон не нужен - то необходимо стереть этот параметр.
text-align:right;
URL комментария
Как сделать всплывающие подсказки
Pop-ups Картинка с обтекающим её текстом ХТМЛ
Разное оформление текста (памятка себе)
