Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Цитата простая, незатейливая, без дополнительных элементов
Самый стандартный вариант оформления цитаты — «поиграть со шрифтами». Например, укрупнённый шрифт, изменённый цвет, другое начертание: курсив или полужирное. Возможно другое семейство шрифтов, увеличенное межстрочное расстояние, возможно, все буквы будут прописные. Обычно у подписи кегль меньше, а начертание контрастнее. Цитата встроена в абзац, наклон в источнике — по умолчанию, саму цитату мы выделили цветом Вёрстка элемента <blockquote class="quote"> <p>Не сдаваться! Не отступать! Таков спартанский закон. И по этому спартанскому закону мы будем стоять! Воевать! Умирать! Наступает новая эра. Эра свободы! И все будут помнить, что три сотни спартанцев до последнего вздоха её защищали!</p> <cite>Царь Леонид</cite></blockquote>.quote { font-family: "Montserrat", "Arial", sans-serif; text-align: center;}.quote p { font-style: italic; font-weight: normal; font-size: 22px; line-height: 40px; color: #744ce6;}.quote cite { font-style: normal; font-weight: 500; font-size: 16px; line-height: 40px; color: #aaaaaa;}Второй по типичности — то же самое, но в дополнение появляется обводка или фон. Фон обычно неброский, просто заливка. Обводка может быть со всех сторон, только слева, или сверху и снизу. Цитата встроена в абзац и выделена рамками по бокам Вёрстка элемента <blockquote class="quote"> <p>Самые ошибочные умозаключения людей суть следующие: вещь существует, следовательно, она имеет право на это. </p> <cite>«Человеческое, слишком человеческое». Фридрих Ницше</cite></blockquote>.quote { width: 740px; padding: 10px 50px; border-right: 8px solid #d5d5d5; border-left: 8px solid #d5d5d5; font-family: "Merriweather", "Times New Roman", serif; font-style: normal; font-weight: normal; color: #333333;}.quote p { margin-top: 0; font-size: 27px; line-height: 50px;}.quote cite { font-size: 16px; line-height: 30px; font-style: normal;}Обратный отступ Рассмотрим ещё один пример. Это вроде как цитата, но в данном контексте это акцентная мысль. Стоит подать именно так. Пример стилизации обратного отступа Вёрстка элемента <article> <p>Сначала — неприятные задачи. В любой работе есть неприятные задачи — их всегда хочется отложить на потом. Нередко это самое «потом» наступает слишком поздно. Если задачу в принципе нельзя скипнуть, то лучше ей заняться в начале рабочего дня. Так вы не растеряете фокус и преждевременно не отправите задачу в очередь.</p> <p class="accent"> «Не имеет смысла нанимать толковых людей, а затем рассказать им, что делать; мы нанимаем умных людей, чтобы они могли рассказать нам, что делать». Так говорил Стив Джобс. </p> <p>Если вдруг вы выполнили план на день буквально за несколько часов и у вас, по идее, куча свободного времени — это не значит, что рабочий день закончился. В это время можно заняться какими-то другими делами по работе, разобрать бэклог, или спросить у руководителя, что делать дальше.</p></article>p { padding-left: 50px; font-family: "Merriweather", "Times New Roman", serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 27px; color: #333333;}.accent { padding-left: 0; font-family: "Roboto", "Arial", sans-serif; font-style: normal; font-weight: normal; font-size: 32px; line-height: 44px; color: #333333;}
|
||||
Последнее изменение этой страницы: 2021-01-14; просмотров: 86; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.222.240.21 (0.004 с.) |