Как вставить текст в рамку

учимся

Я как и многие начинающие сайтостроители, постоянно ищу, что то новое: будь то знания или практические какие то находки для пользы моего сайта http://logiki-net.ru/ Сегодня я хочу с вами поделиться кое -какими навыками.
Это будет первый урок из серии АБ — азбука блоггера.
Сегодня мы научимся делать рамочки.

Атрибут border — задает толщину рамки вокруг элемента в пикселях
border-style: none; — запрещает рисование границы (значение по умолчанию);
border-style: dotted; — рисует точечную линию;
border-style: dashed; — рисует штриховую линию;
border-style: solid; — рисует сплошную линию;
border-style: double; — рисует двойную сплошную линию;
border-style: groove; — рисует трехмерную вдавленную границу;
border-style: ridge; — рисует трехмерную выпуклую границу;
border-style: inset; — рисует трехмерную «ступеньку вверх»;
border-style: outset; — рисует трехмерную «ступеньку вниз».

Сначала вам может показаться это абра-кадаброй, но если
вы внимательно рассмотрите из чего состоит каждая запись
потренируетесь, создавая новую запись, без публикации, у вас все
получится.
Я так же ищу материал, сижу изучаю и экспериментирую.

1 ВАРИАНТ — Рамка с заголовком («легендой»):

код:  <fieldset><legend>ТЕКСТ ЗАГОЛОВКА</legend>ТЕКСТ В РАМКЕ</fieldset>

1

1

ТЕКСТ ЗАГОЛОВКА

ТЕКСТ В РАМКЕ

Пример. Вместо фразы «текст заголовка» подставили «пословица», вместо «текст в рамке» — «Баснями сыт не будешь».

<fieldset><legend>ПОСЛОВИЦА</legend>Баснями сыт не будешь</fieldset>

 2

2

ПОСЛОВИЦА

Баснями сыт не будешь

Заголовок по умолчанию находится слева, но ему можно задать разные параметры выравнивания, пример см ↑↑

Задаем «по центру»:  <fieldset><legend align=»center»>ТЕКСТ ЗАГОЛОВКА</legend>ТЕКСТ В РАМКЕ</fieldset>

3

3

ТЕКСТ ЗАГОЛОВКА

ТЕКСТ В РАМКЕ

Если мы в коде заменим всего одно значение center на right , то наш заголовок будет справа.

<fieldset><legend align=»right»>ТЕКСТ ЗАГОЛОВКА</legend>ТЕКСТ В РАМКЕ</fieldset>

4

4

 

ТЕКСТ ЗАГОЛОВКА

ТЕКСТ В РАМКЕ

2 ВАРИАНТ —
код: <blockquote style=»border:1px #CD5C5C solid; padding: 10px; margin:0px 0px 0px 0px;»>Баснями сыт не будешь</blockquote>
Где значение #CD5C5C обозначает цвет рамки берется из специальной таблицы

Баснями сыт не будешь

 

Заменяем #CD5C5C на значение #FFD700 и вот результат

↓↓

Баснями сыт не будешь

 

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

Ну вот и все на сегодня. Заходите учитесь со мной. Не забудьте нажать на кнопочки! 🙂

Вам не сложно, а моему молодому сайту это нужно для продвижения. СПАСИБО!

 

!!! Чуть не забыла все коды нужно прописывать не в визуальном редакторе, а текстовом.!!!



Рубрики:Уроки.
Метки записи: ...
2016-12-23_005817

Введите ваш e-mail адрес:

11 комментариев

  1. Екатерина

    Полезная информация, иногда хочется что-то в рамку выделить, но не знала как.
    Спасибо, за полезность!

    Ответить
  2. Алла

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

    Ответить
    • Лота

      Пожалуйста, Аллочка, заходите. Буду еще выкладывать свои находки, для «Неспециалистов», как и я.

      Ответить
  3. Игорь Каганович

    Лота, здравствуйте! Вы очень интересно пишите. Только где кнопка Твиттера? Обязательно поставьте ее на свой сайт! Ваш сайт ждет большое будущее.
    С Уважением, Игорь Каганович.

    Ответить
    • Лота

      Странно, Игорь, что Вы не нашли кнопку, они под каждой статьей и на главной странице в правом верхнем углу.

      Ответить
  4. виктор

    здравствуйте Лота проситал данную статью все просто и понятно, спасибо она мне помогла, а не могли бы вы написать как изменить размер шрифта в заголовке и в самой рамке?
    заранее спасибо

    Ответить
  5. Елена Картавцева

    С html не дружу, так что урок о том, как вставить текст в рамку почитала с интересом.
    Да, меня впечатлила рыбка, которая ныряет в конце статьи. Поделитесь секретом: где ее «поймали»?! 🙂

    Ответить
  6. Елена Картавцева

    Кстати, я кнопок соц.сетей в упор не вижу, уже и страницу обновила, думая, что это у меня какие-то глюки на компе, но они так и не появились! 🙁

    Ответить

Leave a Reply

Your email address will not be published.