CSS Schimbați culoarea substituentului. Apariția numelor câmpurilor sau modul de schimbare a substituentului

Într-un efort de a reduce formularul și de a reduce zgomotul vizual, eticheta designerilor Înlocuiți atributul de substituenți, mărind astfel sarcina pe memoria pe termen scurt. Persoanele cu insuficiență de vedere este dificil de citit. Loc mai bun direct deasupra câmpului de introducere. Câmpul gol este mai ușor de recunoscut ca un element care necesită umplere.

rău

Bine

Stylizare: Schimbați substituentul culorilor CSS

Modificați stilul câmpului de intrare cu CSS de substituent

rău

Efectul de subvenție pentru

Atributul de plasină funcționează numai pentru și Chiar dacă alte etichete sunt specificate de atributul contentend.</p> <style> .raz { height: 3em; border: 1px solid; } </style> <div contentEditable placeholder="Puteți introduce text" class="raz"></div> <style> .raz { height: 3em; border: 1px solid; } .raz:empty:not(:focus)::before { <i>/* хак: если div задать и placeholder , то и.raz:empty:not(:placeholder-shown)::before будет работать */ </i> content: attr(data-placeholder); opacity: .5; } </style> <div contentEditable data-placeholder="Puteți introduce text" class="raz"></div> <h2>Metoda de memorie antică Schimbarea valorii JavaScript</h2> <input onblur="this.value=(this.value==" Onfocus \u003d."this.value=(this.value==this.title)?" value="E-mail" title="E-mail"> <input onblur="this.value=(this.value=="")?this.title:this.value;" onfocus="this.value=(this.value==this.title)?"":this.value;" value="E-mail" title="E-mail" /> <p>Atributul de plasină este utilizat pentru a crea solicitări în câmpurile de introducere goale (etichete <input> și <textarea>). În acest articol, voi lua în considerare modalități de colectiere elegante de jucători, precum și cum să le facem mai convenabil de utilizat.</p> <p>Să începem cu exemplul celor care încă nu știu ce este Playsholder și cum să-l folosească:</p> <input type= "email" placeholder= "example@gmail.com." > <p> <input type="email" placeholder="example@gmail.com." class="demo-css-placeholders-input"></p> <p>La dezvoltarea interfețelor, ar trebui luate în considerare caracteristicile comportamentului jucătorilor. Textul jucătorului dispare de îndată ce începe intrarea. Acesta este motivul pentru care nu este necesar să le folosiți pentru a transmite informații despre câmpul de intrare în sine (câte caractere trebuie să conțină). În aceste scopuri, este mai bine să utilizați eticheta <label> sau paragraf cu un sfat mic. Aflați mai multe despre caracteristicile utilizării colectivilor de jucători pot fi citite.</p> <h2>Stilizare</h2> <p>Următoarele reguli sunt utilizate pentru a stiliza colectoarele playerului:</p> :: - WebKit-Input-placeholder (culoare: albastru;) :: - Placeholder Moz (culoare: albastru;) / * Firefox 19+ * /: -Moz-placeholder (culoare: albastru;) / * Firefox 18- * /: -m-input-deținător (culoare: albastru;) <p>Pare teribil, nu? Și există un motiv pentru acest lucru - până acum, regulile CSS pentru deținătorii de joc nu au fost standardizate și implementarea în fiecare browser este diferită. Citiți mai multe despre toate prefixele necesare pot fi găsite la CANUSE.</p> <p>Dacă utilizați un preprocesor CSS, atunci cel mai probabil, pentru utilizarea stilurilor la filme, veți fi cel mai convenabil pentru a scrie o simplă amestecare. Exemplu pe SASS:</p> Placetul de substituent @Mixin (&: - WebKit-Inputholder-placeholder (@Content;) &: - substituentul Moz (@content;) &: - Placeholder Moz (@content; ;)) <p>În funcție de contextul amestecării, puteți utiliza atât aplicația globală a stilurilor, cât și a articolelor individuale (încercați pe Sassmeister):</p> <span>// la nivel global pentru fiecare câmp de intrare</span>@ Placeholder (culoare: albastru;) <span>// Pentru anumite câmpuri de introducere</span>.input (@include substituent (culoare: verde;)) <h4>Exemplu</h4> <p>Textul albastru pentru placi (nu face niciodată):</p> .BLUE-Text :: - WebKit-Inputholder-placeholder (culoare: # 2e8ece;) .ble-text: -Moz-placeholder (culoare: # 2e8ece;). ;). Blue-text: -ms-input-deținător (culoare: # 2e8ece;) <p> <input type="text" placeholder="Începeți să tastați aici" class="demo-css-placeholders-input pl-blue-text"></p> <h2>Proprietăți acceptate</h2> <p>Nu fiecare proprietate CSS poate fi utilizată cu PlayCold. Iată o listă completă a proprietăților acceptate:</p> <ul><li>font și toate proprietățile aferente (dimensiune font, font-familie etc.)</li> <li>fundal și toate proprietățile aferente (fundal, imagine de fundal etc.)</li> <li>opacitate</li> <li>text-liniuță.</li> <li>text-overflow.</li> <li>culoare</li> <li>transformare text</li> <li>inaltimea liniei</li> <li>cuvânt-spațiere</li> <li>spațiul dintre litere</li> <li>text-decorare.</li> <li>vertical-align.</li> </ul><h2>Animaţie</h2> <p>Ideile de animație aparțin lui HTML5.by blog.</p> <p>Toate exemplele următoare sunt scrise utilizând preprocesorul SASS. Fiecare este atașat cu un link către Sassmeister, pe care îl puteți găsi codul CSS compilat.</p> <p>Cel mai probabil, doriți să aplicați animații la filme atunci când se concentrează pe câmpul de introducere. Toate acestea se fac destul de simplu. Doar doar de câteva ori utilizați de către substituentul mixin anterior:</p> .input (@include placeholder (placeholder ( <span>// stiluri pentru starea normală</span> ) &: Focus (@include substituent ( <span>// stiluri după eveniment de focalizare</span> } } } <h3>Schimbați transparența</h3> . Input (culoare: #aa; opacitate: 1; tranziție: opacitate 300ms;) & focus (@include placeholder (opacitate: 0;))) <p> <input type="text" placeholder="Demo: schimbarea transparenței" class="demo-css-placeholders-input pl-opacity"></p> <h3>Treceți la dreapta și la stânga</h3> <p>Cu cât este mai mare lățimea câmpului de intrare, cu atât trebuie să fie mai mare valoarea proprietății liniuței text. Pentru câmpul de introducere standard, 500px va fi suficient, pentru că este necesar să se ridice manual. Din lățimea câmpului de introducere și valoarea liniei de text depinde de viteza animației. Pentru a schimba, trebuie să utilizați valori negative, de exemplu -500px.</p><p> <input type="text" placeholder="Demo: trecerea la dreapta" class="demo-css-placeholders-input pl-shift-right"><input type="text" placeholder="Demo: Shift la stânga" class="demo-css-placeholders-input pl-shift-left"></p> <h3>Trecerea în jos</h3> <p>Ca și în ultimul exemplu, animația depinde de mărimea voinței de intrare, dar în acest caz atenția este plătită înălțimii. Pentru câmpurile de introducere majoritate covârșitoare, valoarea dorită de înălțime a liniei va fi în termen de 100px. Din păcate, folosind proprietatea înălțimii liniei, este imposibil să se implementeze efectul de schimbare, deoarece proprietatea nu acceptă valori negative.</p> . Input (liniuță text: 0px; tranziție: text-liniuță 300ms;) & focus (pensiune de substituent (liniuță text: 500px;))) <p> <input type="text" placeholder="Demo: treceți în jos" class="demo-css-placeholders-input pl-shift-down"></p> <h3>Împreună</h3> <p>Pentru a utiliza codul de animație pentru PlayColders, a fost plăcut și convenabil, puteți scrie o mică bibliotecă de amestecuri pentru orice preprocesor. Biblioteca arată ca aceasta ():</p> @ Placeholetholder (&: - Webkit-Inputholder-Placeholder (@Content) &: - Moz-placeholder (@Content) &: - Moz-placeholder (@Content) & SM-Inputholder (@Content)) @ Mixin PL-Shift ($ Side: Stânga, $ Poziția: 500px, $ DurataRyholder) (@include deținător (liniuță de text: 0; tranziție: Tendicație de liniuță de $;) &: Focus (Plancludent dependent (liniuță text: dacă ($ lateral \u003d\u003d stânga, - $ POZIȚIE, $ POZIȚIE);)) Linie-înălțime $ Durata;) &: Focus (@include Placeholder (înălțime de linie: $;))) @mixin PL-Fade-out ($ Durata: 200ms) (@ Placeholder de placere (opacitate: 1; tranziție: Opacitate $ Durata;) &: Focus (@include placeholder (opacitate: 0;))) <p>Este foarte simplu să o utilizați. Este suficient să conectați amestecarea dorită la orice câmp de introducere a câmpului sau pur și simplu să creați o regulă globală pentru toate salariile de pe pagină:</p> <span>// pentru elemente individuale</span>.pl-shift-dreapta (@include pl-schimbare (dreapta);) .pl-out (@include pl-fade-out;) <span>// pentru restul</span>@include pl-schimbare (stânga); <h2>Autoprefixer.</h2> <p>Dacă nu utilizați preprocesorul și încă nu doriți ca fișierul CSS sursă să se transforme în terci de la prefixe pentru toate browserele posibile, apoi acordați atenție la autoprefixer. Cu aceasta, CSS pur poate fi murdar (dar deja într-un alt fișier) prin adăugarea tuturor prefixelor necesare tuturor proprietăților. Pentru a forța pluginul să lucreze cu pasioane, este suficient să utilizați un Pseudo-Element :: Placeholder:</p> :: Placetul (culoare: portocaliu;). Intrare :: Placeholder (culoare: albastru;) <p>După parsarea bateriei, Autoprefixer va crea un fișier CSS separat, care va scrie toate prefixele necesare pentru tot browserul pe care l-ați specificat.</p> <h2>Ce urmeaza</h2> <p>Așa cum am scris deja mai sus, tot ceea ce este legat de utilizarea stilurilor în interpretarea cuvintelor nu este încă standardizat. Acesta va fi corectat în curând. Specificația selectorului 4 a fost adăugată Pseudo-Class: prezentată de plasare, care va duce în cele din urmă la standardul întregului amestec de pseudoclass și pseudo-elemente care există acum. Puteți urma suportul pentru CANUSE (acum nu este acceptat în niciun browser).</p> <p>Aplicați stiluri cu: Placeholder-afișat va fi mult mai simplu:</p> . Input: prezentat substituent (culoare: albastru;) <p>Atributul de substituent este utilizat pentru a solicita acțiuni în interiorul introducerii elementelor goale și a textului. În acest articol, vom lua în considerare capacitatea de a mobiliza substituentul textului - A, precum și unele trucuri care o vor face mai confortabile și funcționale.</p> <p>Deci, să începem cu exemplul pentru cei care nu știu ce este deținător.</p> <h4>hTML.</h4> <input type="text" placeholder="Lăsați mesajul aici"> <p>Stilul de plasină-un stil poate fi modificat folosind un astfel de set de reguli CSS:</p> <h4>css.</h4> :: - WebKit-Input-Placeholder (culoare: # C0392B ;: - Placeholder Moz (Culoare: # C0392B; 18- * /: -MS-Plaprindere (culoare: # C0392B;) <p>Se pare înfricoșător, nu-i așa? Faptul este că acest lucru nu este încă în standarde. Fiecare browser a implementat suport pentru stilizarea substituentului.</p> <p>În IE și vechiul Firefox (până la al 18-lea) este considerat un pseudolas și în noul Firefox, Webkit și Blink - Pseudo-Element.</p> <p>Ne uităm la ceea ce sa întâmplat:</p> <p>Trebuie spus că nu sunt acceptate toate proprietățile CSS posibile. Cele mai multe browsere moderne vă permit să schimbați:</p> <ul><li>font (și proprietăți conexe)</li> <li>fundal (și proprietăți conexe)</li> <li>culoare</li> <li>cuvânt-spațiere</li> <li>spațiul dintre litere</li> <li>text-decorare.</li> <li>vertical-align.</li> <li>transformare text</li> <li>inaltimea liniei</li> <li>text-liniuță.</li> <li>text-overflow.</li> <li>opacitate</li> </ul><h2>Și dacă înlocuitorul nu se potrivește?</h2> <p>Câteodată câmpurile de intrare pe teren sunt reduse cu lățimea datorită caracteristicilor Laota, în special pe dispozitivele mobile. În acest caz, textul lung al substituentului-A va fi tăiat urât. Pentru a preveni acest lucru, puteți utiliza overflow text: elipsis. O astfel de sintaxă va funcționa în toate browserele noi.</p> <h4>css.</h4> Intrare (text-overflow: elipsis;) Intrare :: - Placeholder Moz (text-overflow: elipsis;) Intrare: -Moz-Placeholder (text-overflow: Ellipsis;) Intrare: -ms-Inputholder (Exploata de introducere a textului : elipsis;) <h2>Cum să ascundeți substituentul în focalizare?</h2> <p>Ascunderea substituentului este diferită.</p> <ol><li>În unele browsere la primirea focalizării în incintă</li> <li>În alte browsere, dacă aveți cel puțin un simbol introdus</li> </ol><p>Îmi place prima opțiune. Pentru a solicita un astfel de comportament în toate browserele care suportă substituentul, definim următoarele reguli CSS:</p> <h4>css.</h4> : Focus: - WebKit-Inputholder (Culoare: Transparent): Focus :: - Placeholetholder Moz: Focus: -Moz-Placeholder (Culoare: Transparent): Focus: -ms-Inputholder (Culoare: Transparent) <h2>Ascundeți substituentul frumos</h2> <p>De asemenea, puteți adăuga tranziția să apară și să ascundă substituentul-A:</p> <h4>css.</h4> / * Schimbarea netedă a transparenței accelerației atunci când Focus * / .input1: - WebKit-Inputholder (Opacitate: 1; tranziție: Opacitate 0.3s Ușor;) .input1 :: - Placeholder Moz (opacitate: 1; tranziție: Opacitate Ușurința de 0.3) FOCUS :: - WebKit-Input-Syntolder (Opacitate: 0; Tranziție: Opacitate 0.3s Ușor;). Input1: Focus: - Placetul Moz (Opacitate: 0; Tranziție: Opacitate 0.3s Ușor;). -Moz-placeholetholder (opacitate: 0; tranziție: Opacitate 0.3s ușurință;) / .input2 :: - WebKit-Inputholder (liniuță) Ușurință;) .input2: -Moz-placeholder (liniuță de text: 0px; tranziție: liniuță de liniuță 0.3S;). Input2: -ms-Input-Places R (liniuță text: 0px; Tranziție: liniuță de text 0.3). TEXT-liniuță: 500px; Tranziție: liniuță de text 0.3s ușurință;). Input2: Focus: -Moz-placeholder (liniuță text: 500px; Tranziție: liniuță de liniuță 0.3). Input2: Focus: - Focus Inputholder de intrare (text-liniuță: 500px; tranziție: liniuță de text 0.3s ușurință;) / * Shiftholder de plasare-a în jos când focalizați * / .input3 :: - Webkit-Inputholder-placeholder (linia-înălțime: 20px; Tranziție: Line-înălțime 0.5s ușurință;). Input3 :: - Placeholder Moz (linia-înălțime: 20px; Tranziție: Line-înălțime 0.5). Input3: -Moz-placeholder (linia-înălțime: 20px; Tranziție: Linie -Height 0.5s ușurință;). Input3: -MS-Inputholder (înălțimea de intrare: 20px, tranziție: Line-înălțime 0.5). Input3: Focus: - Webkit-Inputs-Placeholder (înălțimea liniei: 100px; Tranziție: Line-înălțime 0.5) Er (înălțimea liniei: 100px; Tranziție: Line-înălțime 0.5s ușurință;) .input3: Focus: -ms-Inputholder (linia-înălțime: 100px; Tranziție: Line-înălțime 0.5s Ușurință;) <p>Sper că va veni la îndemână. Scrieți comentarii și sugestii în comentarii.</p> <p>PlayCoaler este un element al câmpului de intrare în care puteți plasa un indiciu. Când utilizatorul începe să introducă date, textul auxiliar dispare pentru a nu interfera. Fiecare browser are propriul său aviz cu privire la modul în care acest element ar trebui să fie afișat și, uneori, stilurile implicite rupe întregul design. Pentru a le gestiona, trebuie să utilizați regula specială a substituentului CSS.</p> <h2>Unde este Playcoolder?</h2> <p>Problema este că argumentul câmpului de intrare este ascuns în mod sigur în umbra DOM și nu este atât de ușor să ajungi la ea. Acest lucru utilizează un substituent special non-standard :: substituent. Cu aceasta, puteți controla proprietățile promptului.</p> <p>Stylizarea substituentului pe CSS arată astfel:</p><p>Intrare :: Placetul (culoare: roșu, opacitate: 1; font-stil: italic;)</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/39768/2606908.jpg' width="100%" loading=lazy loading=lazy></p> <h2>Sprijiniți browserele</h2> <p>Pseudo-elementul Plaseholder CSS este bine procesat de toate browserele moderne și să susțină browserele vechi, puteți utiliza prefixele:</p> <ul><li>:: - WebKit-Input-Placeholder - pentru browserul Webkit (Safari, Chrome, Opera);</li> <li>:: - Moz-placeholder - pentru browserele Firefox de peste 19 versiuni;</li> <li>: -Minholder - pentru vechiul Firefox;</li> <li>: -Ms-Input-Sutholder - pentru Internet Explorer peste 10 versiune.</li> </ul><p>După cum se poate observa, browserele vechi Mozilla, precum și anume, consideră că PSS-Pseudoclass, nu un element pseudo-element. Nu vom argumenta cu ei, luăm în considerare acest aspect atunci când se stilul câmpului de introducere.</p> <p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/39768/2606909.jpg' width="100%" loading=lazy loading=lazy></p> <h2>Oportunități de stilizare</h2> <p>Pentru un substituent Pseudo-Element în CSS puteți seta următorii parametri:</p> <ul><li>fundal - Blocul de grup de solicitări se aplică tuturor câmpului de introducere. Puteți specifica nu numai culoarea (fundal-color), ci și imaginea (imaginea de fundal).</li> <li>culoarea textului - culoarea;</li> <li>transparență - opacitate;</li> <li>sublinierea, neartergerea sau cu vedere la decorarea textului;</li> <li>Înregistrare - Transformare text;</li> <li>suporturi interne - padding. Nu este acceptată de toate browserele. În ceea ce privește elementele minuscule, indenții superioare și inferioare sunt ignorate.</li> <li>afișaj font - Proprietăți ale fontului, grupului de înălțime de linie și o varietate de liniuțe (text-indidentă, spațierea scrisorii, spațierea cuvintelor);</li> <li>aliniere verticală în șir - alinierea verticală;</li> <li>trimirea textului când recipientul este revărsat - overflow text.</li> </ul> .input1 :: Planul de substituent (var, var, albastru); Culoare: alb;) -Size: 16px; scrisoare-spion: 10px;) <h2>În focalizare</h2> <p>În mod implicit, vârful dispare din câmpul de intrare numai dacă este introdus cel puțin un caracter în el. Dar substituentul vă permite să faceți imediat dispariția atunci când vă concentrați pe câmp. Pentru a face acest lucru, combinați-l cu un Pseudolass: Focus.</p><p>Intrare: Focus :: Placeholder (culoare: transparent;)</p><p>În unele browsere, este permisă ajustarea modificării specificației playerLOLEDER utilizând instrucțiunea de tranziție.</p><p>Intrare :: Placeholder (culoare: negru, tranziție: culoare 1s;) Intrare: Focus :: Placeholder (culoare: alb;)</p><p>În browserul Google Chrome, culoarea solicitărilor atunci când se concentrează pe un astfel de câmp se va schimba fără probleme pentru o secundă.</p> <p>PlayCoaler este un element al câmpului de intrare în care puteți plasa un indiciu. Când utilizatorul începe să introducă date, textul auxiliar dispare pentru a nu interfera. Fiecare browser are propriul său aviz cu privire la modul în care acest element ar trebui să fie afișat și, uneori, stilurile implicite rupe întregul design. Pentru a le gestiona, trebuie să utilizați regula specială a substituentului CSS.</p> <h2>Unde este Playcoolder?</h2> <p>Problema este că argumentul câmpului de intrare este ascuns în mod sigur în umbra DOM și nu este atât de ușor să ajungi la ea. Acest lucru utilizează un substituent Special non-standard Pseudo-Element CSS :: substituent. Cu aceasta, puteți controla proprietățile promptului.</p> <p>Vei fi destinat:</p> <p><img src='https://i0.wp.com/ruud.ru/wp-content/uploads/2018/06/4f1695522eb38124e423c90938dc189d.jpg' width="100%" loading=lazy loading=lazy></p><p>Stylizarea substituentului pe CSS arată astfel:</p> <p>intrare :: Placetul (culoare: roșu, opacitate: 1; font-stil: italic;) <br><img src='https://i0.wp.com/ruud.ru/wp-content/uploads/2018/06/050be174ed3b60dc7c49fe3cd59e15ba.jpg' width="100%" loading=lazy loading=lazy></p><h2>Sprijiniți browserele</h2> <p>Pseudo-elementul Plaseholder CSS este bine procesat de toate browserele moderne și să susțină browserele vechi, puteți utiliza prefixele:</p> <ul><li>:: - WebKit-Input-Placeholder - pentru browserul Webkit (Safari, Chrome, Opera);</li> <li>:: - Moz-placeholder - pentru browserele Firefox de peste 19 versiuni;</li> <li>: -Minholder - pentru vechiul Firefox;</li> <li>: -Ms-Input-Sutholder - pentru Internet Explorer peste 10 versiune.</li> </ul><p>După cum se poate observa, browserele vechi Mozilla, precum și anume, consideră că PSS-Pseudoclass, nu un element pseudo-element. Nu vom argumenta cu ei, luăm în considerare acest aspect atunci când se stilul câmpului de introducere.</p> <p><img src='https://i2.wp.com/ruud.ru/wp-content/uploads/2018/06/7563ac2e917a7adb9324bb1d45af7f8e.jpg' width="100%" loading=lazy loading=lazy></p><h2>Oportunități de stilizare</h2> <p>Pentru un substituent Pseudo-Element în CSS puteți seta următorii parametri:</p> <ul><li>fundal - grup de proprietăți de fundal. Fundalul blocului prompt se aplică întregului câmp de intrare. Puteți specifica nu numai culoarea (fundal-color), ci și imaginea (imaginea de fundal).</li> <li>culoarea textului - culoarea;</li> <li>transparență - opacitate;</li> <li>sublinierea, neartergerea sau cu vedere la decorarea textului;</li> <li>Înregistrare - Transformare text;</li> <li>suporturi interne - padding. Nu este acceptată de toate browserele. În ceea ce privește elementele minuscule, indenții superioare și inferioare sunt ignorate.</li> <li>afișaj font - Proprietăți ale fontului, grupului de înălțime de linie și o varietate de liniuțe (text-indidentă, spațierea scrisorii, spațierea cuvintelor);</li> <li>aliniere verticală în șir - alinierea verticală;</li> <li>trimirea textului când recipientul este revărsat - overflow text.</li> </ul><p>Input1 :: Planul de substituent (var, albastru); Culoare: alb;). Input2 :: Placetul (decorațiuni de text: Line-prin; Culoare: Purpuriu; Greutate font: Bold;). Input3 :: Placeholder (font-dimensiune: 16px; scrisoare-spion: 10px;) .input4 :: Placeholder (fundal: maro, culoare: alb; text-overflow: elipsis;)</p><h2>În focalizare</h2> <p>În mod implicit, vârful dispare din câmpul de intrare numai dacă este introdus cel puțin un caracter în el. Dar elementul Pseudo-element al Placetului CSS vă permite să faceți imediat dispariția atunci când vă concentrați pe câmp. Pentru a face acest lucru, combinați-l cu un Pseudolass: Focus.</p> <p>intrare: Focus :: Placeholder (culoare: transparent;)</p><p>În unele browsere, este permisă ajustarea modificării specificației playerLOLEDER utilizând instrucțiunea de tranziție.</p> <p>intrare :: Placeholder (culoare: negru, tranziție: culoare 1s;) Intrare: Focus :: Placeholder (culoare: alb;)</p><p>În browserul Google Chrome, culoarea solicitărilor atunci când se concentrează pe un astfel de câmp se va schimba fără probleme pentru o secundă.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="dsperelink"> <div class="read-analog"> <style> </style> <style> #perelink-horizontal { vertical-align: top; margin: 0 -5px; text-align: left; } #perelink-horizontal .perelink-horizontal-item { vertical-align: top; display: inline-block; width: 192px; margin: 0 5px 10px; } #perelink-horizontal .perelink-horizontal-item a span { display: block; margin-top: 10px; } #perelink-horizontal img { width: 192px; height: 192px; margin-bottom: 10px; } </style> <div id="perelink-horizontal"> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/ro/reshenie-problem-s-css-pochemu-css-tak-vazhen-gde-ya-mogu-pisat-css.html"> <img src="/uploads/4306f64c6f1cb97663b529633abb0d7a.jpg" height="192" width="192" loading=lazy loading=lazy> <span>De ce CSS este atât de important în cazul în care pot scrie CSS</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/ro/shikarnye-temy-dlya-windows-7-programmy-i-igry-dlya-kompyutera-chto.html"> <img src="/uploads/0e74c6b4d1f4ebd90e1b0a93eed46db5.jpg" height="192" width="192" loading=lazy loading=lazy> <span>Programe și jocuri de calculatoare</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/ro/of-temy-programmy-i-igry-dlya-kompyutera-t-mno-zolotaya-tema-s.html"> <img src="/uploads/b4d3041057d451f9d10537c80266ac68.jpg" height="192" width="192" loading=lazy loading=lazy> <span>Programe și jocuri de calculatoare</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/ro/krasnyi-favikon-universalnyi-sposob-sozdaniya-favikonov-kak-proishodit.html"> <img src="/uploads/4f919e79fcaab3670523aa0fb9f3b4fa.jpg" height="192" width="192" loading=lazy loading=lazy> <span>Mod universal de a crea favonov</span> </a> </div> </div> </div> </div> </div> </article> </div> </section> <aside class="col-xs-12 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"> <div class="mainnavbar side-box clear"> <div id="nav_menu-2" class="side-box_b"> <div class="menu-sidenav-container"> <ul id="menu-sidenav" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ro/category/total/">General</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ro/category/hard-drive/">HDD.</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ro/category/different/">Miscelanene.</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ro/category/windows/">Windows.</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ro/category/apple/">Măr.</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ro/category/android/">Android</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ro/category/browsers/">Browsere</a> </li> </ul> </div> </div> </div> <div class="side-box lastfaq faqli clear"> <span class="title-f">Top 5:</span> <ul class="textw_a clear"> <li><a href="https://olympsb.ru/ro/kak-polzovatsya-gugl-foto-obzor-funkcii-kak-polzovatsya.html">Cum să utilizați "Google Fotografii" și cum este profitabil pentru proprietarul iPhone?</a></li> <li><a href="https://olympsb.ru/ro/skachat-tekstovyi-redaktor-notepad-na-russkom-besplatnye-programmy-dlya-windows.html">Software gratuit pentru descărcare gratuită de Windows</a></li> <li><a href="https://olympsb.ru/ro/yandeks-market-partner-lichnyi-kabinet-vhod-v-lichnyi-kabinet.html">Intrarea în contul dvs. personal Market Yandex</a></li> <li><a href="https://olympsb.ru/ro/neskolko-form-na-raznye-pochty-v-wordpress-wp-mail-smtp-ot-wpforms-ispolzovanie-wordpress.html">Forme multiple pentru diferite mesaje din WordPress</a></li> <li><a href="https://olympsb.ru/ro/udalennaya-rabota-dlya-shkolnikov-kak-zarabotat-shkolniku-ne-vyhodya.html">Cum să câștigați un școală fără a părăsi locuințele - vacanțe pentru minori</a></li> </ul> </div> <div class="side-box lastfaq faqli clear"> <span class="title-f">Materiale recente:</span> <ul> <li> <a href="https://olympsb.ru/ro/vidy-monetizacii-trafika-chto-takoe-monetizaciya-mobilnogo.html" >Ce este monetizarea mobilă a traficului?</a> </li> <li> <a href="https://olympsb.ru/ro/nastroika-chpu-i-ustanovka-komponenta-artio-joomsef-nastroika-chpu-i-ustanovka.html" >Setarea CNC și instalarea componentei Artio Joomsef Totul despre componenta Artio Joomsef</a> </li> <li> <a href="https://olympsb.ru/ro/iskusstvo-neiminga-ili-kak-pridumyvat-nazvaniya-chto-takoe.html" >Ceea ce este un domeniu cum să alegeți și să înregistrați o pedeapsă de nume de domeniu va fi mai strictă dacă aceeași infracțiune a comis un cetățean al Federației Ruse, profitând de poziția sa oficială sau în concordanță cu cineva</a> </li> <li> <a href="https://olympsb.ru/ro/boss-laik-otzyvy-bot-dlya-bosslike-besplatnaya-nakrutka-vk-youtube-instagram-kak-obmenyat.html" >BOSFICK BOT - GRATUIT CHEAT VK, YouTube, Instagram</a> </li> <li> <a href="https://olympsb.ru/ro/skachat-vertikalnoe-menyu-dlya-joomla-3-kak-v-joomla-sdelat-menyu-v-menyu-menyushku-iz.html" >Cum se efectuează un meniu în meniul din Joomla, meniul imaginilor, meniul ascuns</a> </li> </ul> </div> <div class="side-box clear"> <div id="rexuta2" style="height:800px;width:240px;" align="center"></div> </div> </aside> </section> <div class="footer"> <div id="footer_mainnav" class="mainnav collapse navbar-collapse col-xs-12 col-sm-12"> <ul id="menu-mainnav-1" class="nav navbar-nav navi"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ro/category/flash-drives/">Unități flash</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ro/category/total/">General</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ro/category/hard-drive/">HDD.</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ro/category/different/">Miscelanene.</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ro/category/windows/">Windows.</a></li> </ul> </div> <div class="twobl-footer col-xs-12 col-sm-12"> <div class="onef col-xs-12 col-sm-3"> <div class="fool2og log-m_h1"> <img src='/public/logo.png' loading=lazy loading=lazy> </div> <div class="decksite"></div> </div> <div class="twof col-xs-12 col-sm-2"> <ul id="menu-foonav" class="twonavig"> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/ro/category/apple/">Măr.</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/ro/category/android/">Android</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/ro/category/browsers/">Browsere</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/ro/category/flash-drives/">Unități flash</a></li> </ul> </div> <div class="treef col-xs-12 col-sm-4"> <ul class="f-post"> <li><a href="https://olympsb.ru/ro/akeeba-backup-dlya-joomla-ustanovka-i-nastroika-komponenta-rezervnogo.html">AKEBA Backup pentru Joomla, Instalarea și Configurarea componentei Backup Cum de a recupera Joomla de la Backup</a></li> <li><a href="https://olympsb.ru/ro/krasivye-plaginy-dlya-wordpress-top-plaginov-dlya-wordpress-ot-yoast-vol-2-perevod-lyuboi.html">Plugin-uri de top pentru WordPress de la Yoast: Vol</a></li> <li><a href="https://olympsb.ru/ro/zapretit-paginaciyu-dlya-kanonicheskih-url-all-in-one-seo-pack-pravilnaya.html">Toate într-un pachet SEO - Corectarea optimizării CEO-ului CEO-ului dvs. Blogul dvs.</a></li> <li><a href="https://olympsb.ru/ro/vstavka-smailikov-v-kommentarii-kak-pravilno-stavit-smaily-kak.html">Cum să puneți emoticoane cum să adăugați zâmbete</a></li> </ul> </div> <div class="fourf col-xs-12 col-sm-3"> <div class="buth"> <a class="butt-faq buttorang" href="" title="contacte">Contacte</a> </div> <p class="continfo">Computerul ajuta Olympus.</div> </div> <div class="tree-footer col-xs-12 col-sm-12 clear"> © 2021. Olympsb.ru. Computerul ajuta Olympus.</div> </div> <script src="https://olympsb.ru/wp-content/themes/vsepropechen/js/bootstrap.min.js"></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/wp-postratings/postratings-js.js?ver=1.83'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.7.6'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=4.7.6'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/disqus-comment-system/media/js/count.js?ver=4.7.6'></script> <div style="display:none"> <div id="text-3" class="conter-metr"> <div class="textwidget"> </script> </div> </div> </div> <div id="top-link"> <a href="https://olympsb.ru/ro/#top"></a> </div> <script type="text/javascript">  </script><br> <br> </body> </html> </div>