Как да направите пълен азбучен разделител със собствените си ръце. Страхотни идеи, които ще ви помогнат да поставите бюрото си в идеален ред. Съхранение на прибори за хранене
Понякога са нужни много време, усилия и нерви, за да намерите правилния предмет на масата. За да избегнете стреса и бързо да намерите този или онзи предмет, трябва правилно да организирате съхранението в чекмеджетата. Как да го направим? Открихме най-готините и най-бързи за изпълнение идеи, които ще ви помогнат да подредите дори най-голямата бъркотия.
Съхранение на прибори за хранене
Ако приборите за хранене се съхраняват в чекмедже без разделители, тогава рано или късно те ще се смесят помежду си. За да предотвратите това, по-добре е незабавно да се уверите, че вилиците, лъжиците и ножовете се съхраняват отделно. За да направите това, можете да закупите специален контейнер с разделители в магазин за кухненски съдове или да направите сами прегради от шперплатови блокове. В този случай е по-добре да покриете дъното с парче нетъкан покривка или да залепите декоративен филм.
За да съхранявате козметика в чекмедже, трябва да вземете пластмасови и метални контейнери с различни размери. За удобство е препоръчително да поставите червила и гланцове в един контейнер, да поставите четки и гъби за нанасяне на козметика в отделен буркан, да фиксирате сенки за очи и руж, за да не падат при отваряне и затваряне на чекмеджето.
За да превърнете едно чекмедже във функционален органайзер, не е нужно да харчите пари за контейнери или да търсите специални разделители. Струва си да погледнете в кухнята и да видите дали има нежелани картонени кутии от корнфлейкс или овесени ядки. Кутии (и техните капаци), останали след закупуване на обувки, телефон или други аксесоари, също ще бъдат полезни. За красота те могат да бъдат украсени с остатъци от тапети, залепени заедно и декорирани в същия стил.
Поздравления. Наскоро ме попитаха как да накарам една страница да се превърта плавно до определена част от страницата. По принцип това се нарича следване на anchor връзка. Когато посетител на сайта щракне върху елемент, към който е добавена котва, той автоматично се отвежда до частта от страницата, където е добавена котва.
Обикновено котвите се използват на страници с голям обем, за да можете бързо да преминете към желания раздел за по-лесна навигация. Вероятно сте виждали това на много уебсайтове.
За да създадете котва, първо трябва да направите отметка на подходящото място и да й дадете име, като използвате атрибута name на тага .
Вижте тестовия блог, за да видите как работи.
Нека разберем как да следваме закотвени връзки в страница в Blogger. Всичко е съвсем просто.
Нека създадем просто меню, където като параметър за връзка задаваме идентификатора на блоковете, до които ще се извършва превъртане. Нещо като това
За да не ви заблуждавам отново, веднага ще ви дам пълния код. Можете да го копирате и да го изпробвате на вашата страница в тестов блог, като превключите на HTML режим в редактора на публикации. И нека да разберем какво се прави тук
- Откъде да започна
- Как да се направи
- Къде да вземем
- Как да се приложи
Откъде да започна
Как да се направи
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique!
Къде да вземем
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique!
Как да се приложи
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique!
И HTML кода, съответно добавяйки такива части от текста
Как да се приложи
ЦЕЛИЯТ ВИ ТЕКСТ ЩЕ БЪДЕ ТУК
И тук просто трябва да ви обърна внимание на следното
Ако сте посочили котви при редактиране на съобщение, не превключвайте към раздела „Създаване“, работете и напишете съобщението в режим HTML. Тогава котвите ще останат в оригиналната си форма. В противен случай просто ще се появи автокорекция (това са капризите на Blogger).
Тук има някакво име
Те ще изглеждат така
Тоест преходът ще бъде направен към несъществуваща страница (сякаш непубликувана).
Ако все още е трудно да работите в HTML режим и всичко да работи правилно в този случай, просто трябва да промените малко връзката, така че маркерът за котва да изглежда така
Тук има някакво име
Където https://n-t-b-b.blogspot.com/2019/08/blog-post.html е връзката към страницата, която може да се види от дясната страна на редактора на публикации в настройките тук
Всичко е доста просто така. Блоговете в Wordpress имат специален плъгин за такива цели. В Blogger това се реализира лесно с помощта на следния код. Успех на всички.
Здравейте приятели. И още една карта на сайта за вас днес. Лежа в моите „кошчета“ дълго време и тогава случайно попаднах на забравена стара. Може би някой ще хареса този. Този е проектиран в стил акордеон.
Какво ще имаме в такава карта -
Всички етикети (заглавия, секции) се показват от лявата страна.
Когато щракнете върху стрелката вдясно, всички публикации на този пряк път се отварят.
Комплект етикети - ново съобщение.
Лесно персонализиране на дизайна, за да отговаря на вашите стилове.
Лесна инсталация на страницата.
За да видите работещата версия, отидете на тестовия блог.
.table-of-content(background-color:#008B8B;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden ;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2))
.table-of-content .toc-header(color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow :hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial)
.table-of-content .toc-header:hover(background-color:#fdfdfd)
.table-of-content .toc-header:before(content:"";width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa прозрачен прозрачен; преход: всички .3s лекота)
.table-of-content .toc-header.active(цвят:#fc4f3f)
.table-of-content .toc-header.active:before(border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg); -ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg))
.table-of-content .loading(display:block;padding:15px;text-decoration:blink)
.table-of-content ol(margin:0;padding:0;list-style:none;transition:initial)
.table-of-content li(line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:# 808080 !important;transition:initial)
.table-of-content a(color:#d9d9d9!important;text-decoration:none;font-size:86%;transition:initial)
.table-of-content a:visited(color:#a2a2a9;transition:initial)
.table-of-content a:hover,.table-of-content a:visited:hover(color:#ffc937!important;text-decoration:none;transition:initial)
.post ol li:before(display:none)
var toc_config = (
url: "https://"+window.location.hostname,
containerId: "съдържание",
покажи ново: 15,
newText: "нов",
подреди по азбучен ред: (
thePanel: вярно,
theList: вярно
},
макс.Резултати: 9999,
активен панел: 1,
slideSpeed: (
надолу: 400,
нагоре: 400
},
slideEasing: (
надолу: нула,
нагоре: нула
},
slideCallback: (
надолу: функция() (),
нагоре: функция() ()
},
clickCallback: функция()(),
jsonCallback: "_toc",
!function(e,o)(var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head"),n=;e=function(e)(for(var o,c,i= e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for (var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&++g)(l+=""+n[g]+"" ,l+="";for(var _=0,p=i.length;p>_;++_)(o=i[_].title.$t;for(var w=0,u=i [_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel)(c=i[_].link[w].href; break)for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+="
Можете веднага да копирате целия код. Отидете на административен панел на блог - раздел страница - създаване на страница. Незабавно превключете на HTML режим в редактора на страницата, поставете копирания код и публикувайте.
Това е всичко, не е нужно да правите нищо друго. Това се генерира чрез емисията на вашия блог. В кода подчертах общия цвят на фона като сив, но можете лесно да го промените на желания. Ето и цветовете.Въпреки това, както много други стилове - шрифт, граници, сенки и т.н.
Бързо, лесно, удобно, красиво.
Желая на всички ви късмет и до скоро.
абонирайте се за нови измамни листове
Използвайки графични програми като Photoshop, Gimp и други, можете да създавате анимирани изображения в GIF формат. В тази статия искам да ви покажа как да създавате мигащи елементи от текст и изображения с помощта на CSS3 и Javascript.
Изборът на CSS3 е по-добър от javascript, защото не забавя значително отварянето на страницата на браузъра. Тази настройка може да бъде интересна, за да маркирате конкретен параграф или за да стимулирате щракване върху някакъв елемент.
За по-голяма яснота ще разделя публикацията на 4 части:
мигащи изображения с помощта на CSS
мигащ текст с помощта на Javascript
мигащо изображение с помощта на Javascript
За индивидуални нужди можете да добавите и връзки.
присъединете се към страницата на блогъра във Facebook
.blink_text(
анимация: 1s мигач линеен безкраен;
цвят: #00f;
font-size:18px;
тегло на шрифта: удебелен;
}
.blink_text a (цвят:#f00;)
мигач на @keyframes (
0% (непрозрачност: 1,0;)
50% (непрозрачност: 0,0;)
100% (непрозрачност: 1,0; )
}
Променете съответно текста и адреса на страницата https://www.facebook.com/ViktoriyBarad/.
Това са стиловете на текста
цвят: #00f;
font-size:18px;
тегло на шрифта: удебелен;
Времето за анимация е зададено на 1 секунда (може да се персонализира)
2. Пример за мигаща снимка на CSS
Аз съм в Twitter
Код
.blink_text(
анимация: 1s мигач линеен безкраен;
}
мигач на @keyframes (
0% (непрозрачност: 1,0;)
50% (непрозрачност: 0,0;)
100% (непрозрачност: 1,0; )
}
Настройките са подобни - вашият адрес и снимка в png формат.
Сега нека видим как да приложим същите ефекти с помощта на javascript.
1. Мигащ текст в javascript
Абонирайте се за измамните листове на блогъра функция blink_one() (document.getElementById("blink").style.visibility="visible"; setTimeout("blink_two()",700); ) функция blink_two() (document.getElementById(" мига ").style.visibility="скрит"; setTimeout("blink_one()",700); ) blink_one();
Променете го на адреса на вашата емисия и напишете своя текст.
