Осъществяване на картини в съобщения чрез CSS в Blogger (Blogspot)
С помощта на CSS свойства, можете да видите почти всяка уеб страница, елемент, включително изображения. В тази статия, ние ще се съсредоточи върху структурата на блок с изображения и какви са основните селектори може да се използва за стил на изображения в публикациите си в Blogger. И също така да разгледаме въпроса за това как да направят първите снимки (визуализация) в пунктове с еднакъв размер и ги помолете същия стил.
Нека започнем с изображения качени блокове.
Изображение добавен в HTML режим е много прост код:
Всички параметри - описанието, връх, размери и т.н. и ако е необходимо, допълнителни единици, в този случай, са написани на ръка. Този метод е подходящ за напреднали блогъри.
При изтегляне, изображението се превръща в допълнителен контейнер, както и всички HTML дизайн изглежда така:
Този контейнер има селектор - .separator. който може да се използва за обработка на всички изображения блокират.
Ако се добавя подпис. вместо на блока, изображението се превръща в маса:
| Текст към картинка |
Цялата структура има селектор: .tr-надпис-контейнер. клетка с един подпис - .tr-надпис.
Селектори изображения в шаблони CSS Blogger
Шаблонът идва вече записва всички селектори и ако ги искате, можете да добавяте или променяте съществуващите свойства на CSS. Този раздел е първоначално шаблон код изглежда така:
пост-тяло IMG. след тяло .tr-надпис контейнер. Профил IMG. IMG изображението,
.BlogList .item-умалените IMG подплата: $ (image.border.small.size);
във фонов режим: $ (image.background.color);
граница: 1px твърдо $ (image.border.color);
-Moz кутия сянка: 1px 1px 5px RGBA (0, 0, 0. 1);
-WebKit-кутия сянка: 1px 1px 5px RGBA (0, 0, 0. 1);
кутия сянка: 1px 1px 5px RGBA (0, 0, 0. 1);
>
пост-тяло IMG. след тяло .tr-надпис контейнер подложка: $ (image.border.large.size);
>
след тяло цвят .tr-надпис контейнер: $ (image.text.color);
>
след тяло .tr-надпис контейнер IMG подложка: 0;
фон: прозрачен;
граница: няма;
-Moz кутия сянка: 0 0 0 RGBA (0, 0, 0. 1);
-WebKit-кутия сянка: 0 0 0 RGBA (0, 0, 0. 1);
кутия сянка: 0 0 0 RGBA (0, 0, 0. 1);
>
Стил не е много по-различен селектори блокове със снимки се комбинират, за да запише най-общите свойства, но можем да пишем тези качества само да отговарят на нашите селектори, като ги разделите. За да публикувате снимки, те са както следва:
- .пост-тяло IMG - снимката в съобщението, или .entry съдържание IMG, че в общи линии едно и също нещо;
- .сепаратор - с контейнер без изображение подпис;
- .след тяло .tr-надпис контейнер IMG - селектор за изображение, към който се добавя подпис;
- .TR-надпис-контейнер - селектор за цялата таблица, с по-голям;
- .TR-надпис - селектор за клетката с изображението на подписа;
Как да направите всички изображения в постовете на един и същ размер блога
Чрез задаване на цялостния стил, понякога има нужда да картинни съобщения, да има същата височина или ширина, независимо от оригиналния размер. Всичко това е много проста, можете да всеки път, за да добавите към всяка ширина на изображението атрибут със съответната стойност и може да бъде по-лесно да се направи - само веднъж, за да добавите към шаблона, подобен на следния CSS:
пост-тяло IMG <
височина: 150px; / * Височина, всяка желана стойност, може да бъде в% * /
ширина: автоматичен; / * Ширина, изисквана стойност * /
>
пост-тяло IMG <
височина: автоматичен; / * Височина изисква стойност * /
ширина: 150px; / * Ширина, всяка желана стойност може да бъде в% * /
>
Как да промените стила на само първата картинка пост в Blogger
За съжаление, като се използват стандартните селектори шаблон, да направи това не е възможно, дори и с помощта на псевдо-класовете.
но маркера . като всеки друг, можете да добавите отделен клас с желания стил. Когато създавате ново съобщение ще бъде достатъчно, за да отидете на режима на HTML редактиране и да го добавите към маркера на първото изображение.
Например:
И в CSS определен в световен мащаб, като това:
първа IMG поплавъка: ляво;
граничен радиус: 5px;
марж: 5px;
височина: 200px;
ширина: автоматичен;
>
Не забравяйте, че за сценария, е необходимо да се свържете с блог JQuery библиотека. освен ако разбира се не сте го направили.
Това е всичко, надявам се този пост е бил полезен.
"Но можете да направите лесно - само веднъж добавите модел подобен на следния CSS:
. "- това не е rabotaet.Da, ширината на снимките са изравнени (ако вземете 2-ра версия), но качеството на изображението се влошава значително Така оригинали-големи по размер ..
Опитах много кодове, които се намират в мрежата. Но във всички случаи, изображенията се влошава. Ето един тест блог - test-blogger-9.blogspot.com. оригинални снимки на различни размери и качество, както и всички снимки са много видими загуба на качество в блога.
Тук са блогове, където постове някои снимки, всички без загуба на качеството:
Важно е, че не се губи качество и изравни при зареждане на няколко (10-15) снимки в едно съобщение, тъй като в тези блогове, така че да не се произнесе всичко на ръка. Моля, помогнете.
Свързани статии