Hur man gör en komplett alfabetisk avdelare med egna händer. Coola idéer som hjälper dig att få ditt skrivbord i perfekt ordning. Bestickförvaring
Ibland krävs det mycket tid, ansträngning och nerver för att hitta rätt föremål på bordet. För att undvika stress och snabbt hitta det här eller det föremålet måste du organisera förvaringen i lådor ordentligt. Hur man gör det? Vi har hittat de coolaste och snabbaste att implementera idéerna som hjälper dig att reda ut även den största röran.
Bestickförvaring
Om bestick förvaras i en låda utan avdelare, kommer de förr eller senare att blandas med varandra. För att förhindra att detta händer är det bättre att omedelbart se till att gafflar, skedar och knivar förvaras separat. För att göra detta kan du köpa en speciell behållare med avdelare i en köksbutik eller göra skiljeväggar själv från plywoodblock. I det här fallet är det bättre att täcka botten med en bit non-woven duk eller fästa en dekorativ film.
För att lagra kosmetika i en låda måste du få plast- och metallbehållare av olika storlekar. För enkelhetens skull rekommenderas det att lägga läppstift och gloss i en behållare, placera penslar och svampar för applicering av kosmetika i en separat burk, fixa ögonskuggor och rodna så att de inte faller av när du öppnar och stänger lådan.
För att förvandla en låda till en funktionell arrangör behöver du inte spendera pengar på behållare eller leta efter speciella avdelare. Det är värt att titta in i köket och se om det finns några oönskade kartonger från cornflakes eller havregryn. Lådor (och deras lock) som blir över efter köp av skor, en telefon eller andra tillbehör kommer också väl till pass. För skönhet kan de dekoreras med rester av tapeter, limmas ihop och dekoreras i samma stil.
Hälsningar. Nyligen fick jag frågan hur man får en sida att rulla smidigt till en viss del av sidan. I allmänhet kallas detta att följa en ankarlänk. När en webbplatsbesökare klickar på ett element som har en ankarlänk tillagd förs de automatiskt till den del av sidan där ankaret lades till.
Vanligtvis används ankare på sidor med stor volym så att du snabbt kan hoppa till önskat avsnitt för enklare navigering. Du har säkert sett detta på många webbplatser.
För att skapa ett ankare måste du först skapa ett bokmärke på lämplig plats och ge det ett namn med hjälp av namnattributet för taggen .
Kolla in testbloggen för att se hur det fungerar.
Låt oss ta reda på hur du följer ankarlänkar på en sida i Blogger. Allt är ganska enkelt.
Låt oss skapa en enkel meny, där vi som länkparameter ställer in id för blocken som rullning ska ske till. Något som det här
För att inte lura dig igen kommer jag att ge dig hela koden direkt. Du kan kopiera den och prova den på din sida i en testblogg genom att byta till HTML-läge i inläggsredigeraren. Och låt oss ta reda på vad som har gjorts här
- Var ska man starta
- Hur göra
- Var kan man få tag på
- Hur man genomför
Var ska man starta
Hur göra
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!
Var kan man få tag på
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!
Hur man genomför
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!
Och HTML-koden, följaktligen lägga till sådana avsnitt av text
Hur man genomför
ALL DIN TEXT KOMMER HÄR
Och här måste jag helt enkelt uppmärksamma er på följande
Om du har angett ankare när du redigerar ett meddelande, byt inte till fliken "Skapa", arbeta och skriv meddelandet i HTML-läge. Då förblir ankarna i sin ursprungliga form. Annars kommer autokorrigering helt enkelt att inträffa (detta är Bloggers nycker).
Det finns något namn här
De kommer att se ut så här
Det vill säga, övergången kommer att göras till en obefintlig sida (som om den skulle vara opublicerad).
Om det fortfarande är svårt att arbeta i HTML-läge och för att allt ska fungera korrekt i det här fallet behöver du bara ändra länken lite så att ankartaggen ser ut så här
Det finns något namn här
Där https://n-t-b-b.blogspot.com/2019/08/blog-post.html finns länken till sidan som kan ses på höger sida av inläggsredigeraren i inställningar här
Det hela är ganska enkelt sådär. Bloggar på Wordpress har en speciell plugin för sådana ändamål. På Blogger implementeras detta enkelt med hjälp av följande kod. Lycka till allihopa.
Hej kompisar. Och en annan webbplatskarta för dig idag. Den har legat i mina "soptunnor" länge, och då råkade jag råka på en bortglömd gammal. Kanske någon kommer att gilla den här. Den här är designad i dragspelsstil.
Vad kommer vi att ha på en sådan karta -
Alla etiketter (rubriker, avsnitt) visas på vänster sida.
När du klickar på pilen till höger öppnas alla inlägg i denna genväg.
Etikettuppsättning - nytt meddelande.
Enkel designanpassning för att passa dina stilar.
Enkel installation på sidan.
För att se den fungerande versionen, gå till testbloggen.
.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 transparent transparent;transition:all .3s lätthet)
.table-of-content .toc-header.active(color:#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(marginal: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)
.innehållsförteckning a:hover,.innehållsförteckning a:besökt:hover(färg:#ffc937!viktigt;textdekoration:ingen;övergång:initial)
.post ol li:before(display:none)
var toc_config = (
url: "https://"+window.location.hostname,
containerId: "innehållsförteckning",
visaNytt: 15,
newText: "ny",
sortera alfabetiskt: (
panelen: sant,
theList: sant
},
maxresultat: 9999,
activePanel: 1,
slideSpeed: (
ner: 400,
upp: 400
},
slideEasing: (
ner: null,
upp: null
},
slideCallback: (
ner: function() (),
upp: function() ()
},
clickCallback: function()(),
jsonCallback: "_toc",
!function(e,o)(var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("huvud"),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);för (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+="
Du kan omedelbart kopiera hela koden. Gå till bloggadminpanel - sidflik - skapa sida. Byt omedelbart till HTML-läge i sidredigeraren, klistra in den kopierade koden och publicera.
Det är det, du behöver inte göra något annat. Detta genereras genom ditt bloggflöde. I koden markerade jag den allmänna bakgrundsfärgen som grå, men du kan enkelt ändra den till önskad. Här är färgerna. Men som många andra stilar - typsnitt, ramar, skuggor osv.
Snabbt, enkelt, bekvämt, vackert.
Jag önskar er alla lycka till och vi ses snart.
prenumerera på nya cheat sheets
Med hjälp av grafikprogram som Photoshop, Gimp och andra kan du skapa animerade bilder i GIF-format. I den här artikeln vill jag visa dig hur du skapar blinkande element från text och bilder med CSS3 och Javascript.
Att välja CSS3 är bättre än javascript, eftersom det inte nämnvärt saktar ner öppningen av webbläsarsidan. Den här inställningen kan vara intressant för att markera ett specifikt stycke, eller för att stimulera att klicka på något element.
För tydlighetens skull kommer jag att dela in inlägget i 4 avsnitt:
blinkande bilder med CSS
blinkande text med Javascript
blinkande bild med hjälp av Javascript
För individuella behov kan du också lägga till länkar.
gå med på bloggarens cheat sheet Facebook-sida
.blink_text(
animation: 1s blinker linjär oändlig;
färg: #00f;
font-size:18px;
font-weight:bold;
}
.blink_text a (färg:#f00;)
@keyframes blinker (
0 % ( opacitet: 1,0; )
50 % ( opacitet: 0,0; )
100 % (opacitet: 1,0; )
}
Ändra texten och adressen till sidan https://www.facebook.com/ViktoryBarad/ i enlighet med detta.
Det här är textstilarna
färg: #00f;
font-size:18px;
font-weight:bold;
Animationstiden är inställd på 1 sekund (anpassningsbar)
2. Ett exempel på en blinkande bild på CSS
Jag är på Twitter
Koda
.blink_text(
animation: 1s blinker linjär oändlig;
}
@keyframes blinker (
0 % ( opacitet: 1,0; )
50 % ( opacitet: 0,0; )
100 % (opacitet: 1,0; )
}
Inställningarna är liknande - din adress och en bild i png-format.
Låt oss nu se hur man implementerar samma effekter med hjälp av javascript.
1. Blinkande text i javascript
Prenumerera på bloggarens cheat sheets-funktion blink_one() ( document.getElementById("blink").style.visibility="visible"; setTimeout("blink_two()",700); ) funktion blink_two() ( document.getElementById(" blink ").style.visibility="hidden"; setTimeout("blink_one()",700); ) blink_one();
Ändra den till din feedadress och skriv din text.
