Веб-Денис
Помогаем создавать лучшее
  • Ответы WP
  • HTML-CSS
  • Фон сайта
  • Блог DM
Главная › HTML-CSS › Цитаты

Простое оформление цитат в HTML

Создаём CSS стили для HTML кода цитаты
2022-05-15
Автор: неизвестно
Demo

Всем приветы и ответы!

И сразу к делу, у нас с вами есть две div ячейки с нужными классами, которые необходимо установить непосредственно на страницу с контентом!

Вот этот код:

HTML

<div class="cell-quote-1">текст цитаты 1</div>
<div class="cell-quote-2">текст цитаты 2</div>

И собственно говоря сами CSS стили оформления:

CSS

/* оформление цитат в HTML
-------------------------------------------*/
.cell-quote-1{
float:right;
width:300px;
background: #F4F8F9;
margin: 15px 0px 15px 30px;
padding: 10px 15px 10px 15px;
border-left: 2px solid #B6C0CD;
font-size: 16px;
font-style: oblique;
line-height: 1.8;
}
.cell-quote-2{
float:left;
width:300px;
background: #F4F8F9;
margin: 15px 30px 15px 0px;
padding: 10px 15px 10px 15px;
border-right: 2px solid #B6C0CD;
font-size: 16px;
font-style: oblique;
line-height: 1.8;
}

На этом у меня всё! Удачных решений!

С уважением, Денис Мехедов
2 Комментария
  1. Николай Васильевич
    16.05.2022 в 17:04
    #1

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

    А про цитату спасибо, жду от вас еще больше html решений.

    Ответить
    • Денис М
      18.05.2022 в 21:35
      #2

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

      Это тоже самое, как нельзя спасти борщ в который добавили грибы, селёдку и пельмени. Легче приготовить новый!

      Ответить
Отменить ответ
Автор Денис Мехедов
Привет!

Я Денис Мехедов.

Я верстаю HTML-CSS:

Решений - 14
  • Горизонтальное меню 1
  • Картинки 1
  • Кнопки 2
  • Облако тегов 3
  • Подсказки 1
  • Поля 1
  • Списки 1
  • Статистика 1
  • Табы 1
  • Цитаты 2

  • О проекте
  • Автор
  • Контакты
  • Комментарии
  • © Web-Denis 2022
  • Дизайн © ДМ
  • Хостинг Timeweb
При копировании материалов, ссылка на сайт обязательна.
Политика конфиденциальности
Мы cохраняем файлы cookie.