Вредоносное ПО (malware) - это назойливые или опасные программы,...
Двухколонная модульная сетка достаточно часто применяется на сайтах, при этом, как правило, в одной колонке располагается основной материал (текст статьи, например), а во второй — ссылки на разделы сайта и другая информация. Для создания подобного макета таблицы достаточно удобны — каждая ячейка выступает в качестве отдельной колонки, что позволяет легко регулировать различные параметры отображения документа.
Ширина колонокДля начала рассмотрим самый простой вариант, когда ширина левой колонки жестко задана в пикселах, а ширина правой колонки варьируется в зависимости от размеров окна браузера. Для этого требуется задать общую ширину всей таблицы в процентах через атрибут width тега
(пример 2.16).
Пример 2.16. Ширина колонки в пикселах XHTML 1.0 IE Cr Op Sa Fx
В данном примере граница у таблицы не отображается, а вертикальное выравнивание содержимого ячеек по верхнему краю определяется атрибутом valign со значением top . Это требуется для того, чтобы при разном объеме содержимого ячеек, они не сдвигались бы относительно друг друга, а начинались одинаково от верхнего края. Переведём все используемые атрибуты таблицы в стилевые свойства. Тогда данный код будет иметь следующий вид (пример 2.17). Пример 2.17. Использование стилей Две колонки .layout { width: 100%; /* Ширина всей таблицы в процентах */ } .layout TD { vertical-align: top; /* Вертикальное выравнивание в ячейках */ } TD.leftcol { width: 200px; /* Ширина левой колонки в пикселах */ }
Чтобы визуально отделить одну колонку от другой используют разные приемы, самым распространенным из них, пожалуй, является использование фонового цвета. Для этого создаём новый стилевой класс, устанавливаем для него свойство background и применяем его к требуемой ячейке (пример 2.18). Пример 2.18. Цвет фона XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Две колонки .layout { width: 100%; /* Ширина всей таблицы */ } TD { vertical-align: top; /* Вертикальное выравнивание в ячейках */ padding: 5px; /* Поля вокруг ячеек */ } TD.leftcol { width: 200px; /* Ширина левой колонки */ background: #ccc; /* Цвет фона левой колонки */ } TD.rightcol { background: #fc3; /* Цвет фона правой колонки */ }
В данном примере разный цвет фона добавляется для правой и левой колонки (рис. 2.21). Рис. 2.21. Колонки разного цвета Разделитель колонокИспользование полей не всегда подходит для установки нужного расстояния между колонок. Например, в случае, когда поля вокруг текста нельзя включать в силу разных соображений. Тогда поможет добавление еще одной ячейки, которая выступает в качестве разделителя между колонками (пример 2.19). Пример 2.19. Использование трех ячеек XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Две колонки .layout { width: 100%; /* Ширина всей таблицы */ } TD { vertical-align: top; /* Вертикальное выравнивание в ячейках */ padding: 5px; /* Поля вокруг ячеек */ } TD.leftcol { width: 200px; /* Ширина левой колонки */ background: #ccc; /* Цвет фона левой колонки */ border: 1px solid #000; /* Параметры рамки */ } TD.rightcol { background: #fc3; /* Цвет фона правой колонки */ border: 1px solid #000; /* Параметры рамки */ } .spacer { width: 10px; /* Расстояние между колонками */ }
В данном примере вводится еще одна колонка с именем spacer , это позволяет легко менять ширину между колонками. Внутрь этой ячейки можно ничего не вкладывать, браузеры достаточно корректно работают с подобными ячейками. На рис. 2.22 показан результат примера. Для наглядности и «красоты» вокруг колонок добавлена граница. Рис. 2.22. Расстояние между колонками Линия между колонкамиРазделять колонки можно не только с помощью цвета фона и пустого пространства, но и добавлением линии между колонок. Для создания линии необходимо установить свойство border-left для правой колонки или border-right для левой (пример 2.20). Пример 2.20. Добавление линии XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Две колонки .layout { width: 100%; /* Ширина всей таблицы */ } TD { vertical-align: top; /* Вертикальное выравнивание в ячейках */ padding: 5px; /* Поля вокруг ячеек */ } TD.leftcol { width: 100px; /* Ширина левой колонки */ background: #ccc; /* Цвет фона левой колонки */ border-right: 1px dashed #000; /* Параметры линии */ } TD.rightcol { background: #fc3; /* Цвет фона правой колонки */ }
Результат данного примера показан ниже (рис. 2.23). Рис. 2.23. Линия между колонок Создание двух колонок с помощью таблиц процесс достаточно простой и быстрый, следует только включить таблицу с двумя ячейками и определить их параметры. Например, задать фоновую заливку ячеек, добавить рамку вокруг ячеек, изменить расстояние между ними или установить вертикальную разделительную линию. Сегодня мы рассмотрим очень простой элемент адаптивной верстки, такой, как текст в два столбца. Поняв смысл, вы сможете делать и три и четыре столбца, которые, достигая заданной минимальной ширины уходят вниз. Естественно, к тексту можно добавлять картинки, да и абсолютно любые элементы дизайна. Я брал сниппет из примера и просто ставил его путем копипаста через встроенный редактор WordPress в публикацию, все отлично работает. Только редактор нужно переключать в режим HTML Адаптивная верстка. Текст в два столбца без картинокМожно добавить кнопку в редакторЧтобы не прописывать код текста в два столбца каждый раз вручную можно один раз , без использования плагина. Это очень удобно.
Ну и давайте разберемся по очень простому коду адаптивной верстки двух столбцов.
Text, Text, Text, Text, Text, Text, div class="left-col" - левая колонка с классом.left-col div class="right-col" - правая колонка с классом.right-col div class="clearfix" - специальный блок для отмены float . См. далее. CSS код адаптивной верстки текста в два столбца : Left-col, /* левая колонка */
.right-col/* правая колонка */
{
width: 50%; /* ширина */
min-width: 180px; /* минимальная ширина сужения */
height: auto; /* высота */
box-sizing: border-box;
float: left; /* плавающие блоки */
}
.left-col{
padding-right: 10px; /* отступ справа */
}
.right-col{
padding-left: 10px; /* отступ слева */
} Left-col и.right-col задается ширина не фиксированная, а в процентах - width: 50%; относительная для того, чтобы столбцы растягивались относительно ширины контейнера. Но, при достижении 180px , каждый столбец больше не уменьшается. Естественно, эти размеры можно менять по своему усмотрению. Три столбца, значит ставьте width: 33.3333%; . height: auto; - высота адаптивных столбцов, она автоматически меняется в зависимости от объема контента в столбцах. box-sizing: border-box; - желательно прописывать при адаптивной верстке. Свойство, при котором все отступы padding , рамки border и т.д, вписываются в заданный размер контейнера. В нашем случае.left-col и.right-col . float: left; - свойство, при котором столбцы с текстом выстраиваются горизонтально по очереди. Количество столбцов зависит от заданных ранее относительных размеров. У нас width: 50%; - два столбца. @media (max-width: 479px) - так называемая точка прерывания. Это значит, что на мониторах, менее 479px каждый столбец растянется на всю ширину монитора. В коде задано: Left-col и.right-col {width: 100%;} Точки прерыванияИспользуя точки прерывания можно с легкостью управлять размерами элементов для разных мониторов. @media(max-width: 479px){ } @media(max-width: 767px){ } @media(max-width: 991px){ } @media(max-width: 1199px){ } @media(min-width: 480px){ } @media(min-width: 768px){ } @media(min-width: 992px){ } @media(min-width: 1200px){ } Сложно? Только на первый взгляд. Скачайте исходник и меняя параметры, посмотрите логику. Ну или просто скопируйте код исходника и замените текст на свой. Адаптивная верстка. Текст в два столбца с картинкамиЕстественно, в адаптивные столбцы можно добавлять любые элементы. Рассмотрим пример добавления к адаптивным столбцам с текстом картинки.
Для начала сделаем сами картинки адаптивными. Для этого присвоим им какой-то класс и зададим ширину 100%. /*Стили для адаптивных картинок*/ .img-responsive{ display: block; max-width: 100%; /* ширина, размеры в процентах*/ height: auto; margin: 20px 0px; /* отступы сверху и снизу */ background: #fff; /* для красоты цвет заполнения */ padding: 4px; /* для красоты внутренние отступы */ border: 1px solid #ddd; /* для красоты рамка серым цветом */ }
Картинки желательно подбирать 500px в ширину, что-бы на маленьких мониторах они растягивались на всю ширину экрана и выглядели красиво.
............. ........... Вы конечно же видели на некоторых сайтах запрет на использование правой кнопки мыши. Эта функция прежде всего борется с теми, кто хочет украсть ваш контент. Полностью от воровства вас не защитит эта мера, но от ручного копирования вполне. Другие варианты . В Blogger добавьте код в гаджет HTML/Javascript во вкладке “Дизайн”. Если вы используете одну из последних тем на вашем блоге (Emporio, Contempo, Soho, Notable), то не забудьте активировать видимость виджета (галочка напротив “Виден всем”, “Показать виджет " HTML/JavaScript "”). На Wordpress добавьте код в виджет “Текст”. Автор: Иванова Наталья 2019-03-03 Приближается праздник - Международный женский день. Подготовимся заранее к нему. Вы можете оригинально поздравить девушек и женщин, воспользовавшись сервисами открыток, о которых пойдет речь ниже. Воспользуйтесь следующими сервисами, чтобы создать открытку практически с нуля. Я надеюсь, что воспользовавшись одним из этих генераторов, вы сможете достойно поздравить своих дам с 8 марта! Автор: Иванова Наталья 2019-02-17Содержание статьи: Google Plus закрывается Платформа Google Plus не оправдала надежд разработчиков и будет удалена полностью уже 2 апреля 2019 года. Вместе с ней исчезнут связанные с ней альбомы в Google Фото, станут недоступными авторизации на сайтах с аккаунтом Google Plus. Уже с 4 февраля стала недоступной функция создания профилей Google Plus, каналов и страниц. Если на вашем аккаунте хранился ценный контент, то вы можете скачать резервную копию .Больше всех изменения коснутся блогеров, ведущих свои блога на Blogspot. Станут недоступны некоторые виджеты G+, комментарии G+, а также профиль Google +. Об этом сказано в уведомлении в админке Blogger: После объявления о прекращении работы API Google+, которое запланировано на март 2019 года, 4 февраля будет внесен ряд изменений в интеграцию Blogger с Google+. Виджеты Google+. В дизайне блогов больше не будут поддерживаться виджеты "Кнопка +1", "Подписчики Google+" и "Значок Google+". Из вашего блога будут удалены все экземпляры этих виджетов. Кнопки +1. Будут удалены кнопки +1 и G+, а также ссылки "Опубликовать в Google+" под записями в блоге и на панели навигации. Обратите внимание, что, если вы используете пользовательский шаблон, в котором есть функции Google+, его может быть необходимо изменить. Обратитесь за рекомендациями к тому, кто предоставил вам этот шаблон. Google+ Комментарии. Будет прекращена поддержка комментариев с использованием Google+, а для всех блогов, которые используют эту функцию, будут восстановлены стандартные комментарии Blogger. К сожалению, комментарии, размещенные через Google+, невозможно перенести в Blogger, поэтому они больше не будут отображаться в вашем блоге. Удаление комментариев Google Plus К сожалению, комментарии, которые были опубликованы в системе будут удалены безвозвратно. Вы лишь можете воспользоваться тем же инструментом https://takeout.google.com , чтобы сказать резервную копию комментариев от Google + на свой компьютер. Только загрузчика для него не предусмотрено и восстанавливать комментарии вам можно только вручную достаточно кривым способом. Хорошо, что я в свое время вовремя .Как заменить профиль гугл плюс профилем Блоггер Если вы ведете блог на Blogspot, то целесообразно сейчас вернуться с профиля Гугл Плюс на профиль Blogger (для тех, кто переключился на гугл плюс в своё время). Рекомендую сделать это прямо сейчас во избежании непредвиденных ситуаций, которые могут происходить при удалении аккаунтов Google Plus. Как вернуть профиль Blogger Сделать это просто в настройках админки Blogger: Настройки –> Пользовательские настройки –> Профиль пользователя – здесь выберите Blogger Сохраните изменения. Подтвердите переход на и задайте свое имя или никнейм. Не забудьте загрузить аватар в вашем профиле Blogger. Как удалить профиль гугл плюс Если вы решили раз и навсегда избавиться от профиля Г+, то перейдите на свою страницу гугл плюс –> Настройки –> прокрутите страницу до конца вниз –> удалить аккаунт гугл плюс:Автор: Иванова Наталья Сегодня расскажу что такоеCSS3, с чем его едят, где его искать, как правильно его прописывать. Предупреждаю, буду рассказывать от себя, упрощенно для широкой публики, как я это вижу + примеры. Итак, начнем издалека. Рекомендуем почитать |