Kuidas ehitada kolmetasandiline kujundus CSS-is

CSS paigutus nõuab, et te arvate oma veebisaidi kujundusest tervikuna, seejärel võta need kokku ja pane need kokku. Lugege, kuidas ehitada lihtne kolmekohaline paigutus CSS-iga.

01 of 09

Joonista oma kujundus

J Kyrnin

Võite joonistada oma kujunduse paberil või graafikaprogrammis . Kui sul on juba traadistraami või veelgi ulatuslikum disain, siis lihtsusta see lehe moodustavate aluste kastiga. Sellel versioonil on sellel disainil põhisisu ala kolm peamist kolonni, samuti päis ja jalus. Kui vaatate tähelepanelikult, näete, et kolm veergu pole laiusega võrdsed.

Kui olete paigutuse välja tõmmatud, võite hakata mõtlema mõõtmetele. Sellisel näitemudelil on järgmised põhimõõdud:

02 09

Kirjuta põhi HTML / CSS ja loo konteineri element

Kuna see leht on kehtiv HTML-dokument, alustage tühja HTML-kontekstiga

Untitled Document </ title> </ head> <body> </ body> </ html> <p> Lisage põhilised CSS-i stiilid, et <a href="https://et.eyewated.com/kasutage-css-i-oma-marginaalide-ja-piiride-nullimiseks/">tühjendada lehe marginaale, piire ja lahtreid</a> . Kuigi uute dokumentide jaoks on olemas ka teisi <a href="https://et.eyewated.com/tutvuge-selle-css-i-cheat-lehtga-kaskaaditavate-stiilide-lehtedega/">standardseid CSS-i stiile</a> , on need stiilid minimaalsed, mis vajavad puhast kujundust. Lisage need dokumendi pea juurde: </p> <style type = "text / css"> html, body {margin: 0px; padding: 0px; piiri: 0px; } </ style> <p> Paigutuse ehitamise alustamiseks pane see konteineri elementi. Mõnikord juhtub, et saate hiljem konteinerist vabaneda, kuid enamiku fikseeritud laiusega paigutustega muudab konteineri element lihtsamaks erinevate veebibrauserite haldamisel. Nii et keha panna see: </p> <div id = "container"> </ div> <p> Ja CSS-i stiilil, pane: </p> #container {} <p> <strong>03 alates 09</strong> </p> <h3> Stiil konteinerit </h3><p> Konteiner määratleb, kui ulatuslik on veebilehe sisu, samuti kõik välised väljad ja sisepinnad. Selle dokumendi jaoks on konteiner 870 pikslit lai ja vasakul asuv 20 pikslitäpik. Veekraan on seadistatud margin-stiilis, kuid konteineri polsterdus on nullist väljas, et vältida elementide võimalikult suurt mahtu. </p> #container {width: 870px; marginaal: 0 0 0 20px; / * üleval paremal all vasakul * / padding: 0; } <p> Kui salvestate oma dokumendi kohe, on konteinerit raske näha, sest selles pole midagi. Kui lisate kohatäiendi teksti, saate konteineri elemendi selgemini näha. </p> <p> <strong>04 09</strong> </p> <h3> Kasuta pealkirja pealkirja </h3><p> Kuidas te otsustate päise rea stiili, sõltub sellest palju, mis seal on. Kui päise reas on lihtsalt logo graafika ja pealkiri, siis on pealkirja (<h1>) kasutamine mõistlikum kui <div> kasutamine. Pealkirja saab stiili samamoodi nagu divi stiili kujundada ja vältida kõrvalisi silte. </p> <p> Pealkirida HTML asub konteineri ülaosas ja näeb välja selline: </p> <h1> Minu päise rida </ h1> <p> Seejärel lisati sellele stiile, lisati põhjale punane piir, et saaksite näha, kus see lõpeb, margid ja polsterid tühjendati nulliga, laius oli 100% ja kõrgus 150 pikslit: </p> #container h1 {margin: 0; padding: 0; laius: 100%; kõrgus: 150px; ujuk: vasakule; border-bottom: # c00 solid 3px; } <p> Ärge unustage seda elementi ujukiga hõljuma: vasakule; vara. CSS-skeemide kirjutamise võtmeks on kõik hõljumine - isegi asjad, mis on konteineris sama laiusega. Nii saate alati teada, kus elemendid asuvad lehel. </p> <p> <a href="https://et.eyewated.com/mis-on-css-i-jaerglaste-valija/">CSS järeltulija selektor</a> kohaldas stiile ainult #container-elemendi H1 elementidele. </p> <p> <strong>05 09</strong> </p> <h3> Kolm veergu saamiseks, alustage kahte veergu ehitades </h3><p> Kui ehitate CSS-iga kolmekohalise paigutuse, peate oma paigutuse jagama kaheks rühmaks. Nii et kolmekordne paigutus, keskmine ja parempoolne veerg ning grupeeritud ja asetatud kahekohalise paigutuse vasakpoolse veeru kõrval, kus vasakpoolne veerg on 250 pikslit lai ja parempoolne veerg on laius 610 pikslit (mõlema veeru puhul 300 , pluss 10 pikslit nende vahel oleva vihmaveeremi vahel). </p> <p> HTML näeb välja selline: </p> <div id = "col1"> <p> Ut aliquip ex ea commodo consequat. Kui soovite maksta rohkem kui ühe minuti võrra, siis lohutage seda oma ametikohale. In reprehenderit in volupate quis nostrud exercice eu fugiat nulla pariatur. Kui soovite, et tööriistariba oleks võimalikult kiiresti töödelda, siis võite jätkata ka järgnevat. </ P> </ div> <div id = "col2outer"> <p> Ut enim ad minim veniam, see on eilsmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Saate otse alla laadida, et saada rohkem teavet. </ P> </ div> <p> Veergude kohatäidete tekst muudab need katsetamisel nähtavamaks. CSS näeb välja selline: </p> #container # col1 {width: 250px; ujuk: vasakule; } #container # col2outer {width: 610px; ujuk: parem; marginaal: 0; padding: 0; } <p> Vasakpoolse veeru vasakule laieneb, teine ​​aga vasakule paremale. Kuna mõlema veeru kogu laius on 860 pikslit, on nendevaheline 10px rätik. </p> <p> <strong>06 alates 09</strong> </p> <h3> Lisage kaks veergu teises veerus </h3><p> Kolme veeru loomiseks lisage kaks laiemat teise veergu, nagu ka viimases sammus konteinerjooni sisestasite 2 divi. HTML näeb välja selline: </p> <div id = "col2outer"> <div id = "col2mid"> <p> Enam kui minimaalsed vennad, siis on see aeg, mis on seotud tööjaamadega. Ut labore et dolore magna aliqua. Palun sisestage oma e-maili aadressi. </ P> </ div> <div id = "col2side"> <p> Nam libero tempore, qui voluptas istuda aspernatur dicta sunt explicabo. Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itake Kõrva rerum on kümme aastat vana, kuid see on ilmselgelt oluline, kuna see on alati pikk ja töökord. </ P> </ div> </ div> <p> Ja CSS näeb välja selline: </p> # col2outer # col2mid {width: 300px; ujuk: vasakule; } # col2outer # col2side {width: 300px; ujuk: parem; } <p> Kuna need kaks 300px laiad kastid asuvad 610px laias lahtris, jääb nende vahel uuesti 10px kanal. </p> <p> <strong>07 09</strong> </p> <h3> Lisage jalusesse </h3><p> Nüüd, kui ülejäänud leht on stiilitud, saate jalusesse lisada. Kasutage viimast divi koos "jaluse" idiga ja lisage sisu, nii et saate seda näha. Samuti saate lisada ülaosale piiri, nii et saate teada, kus see käivitub. </p> <p> HTML: </p> <div id = "footer"> <p> Copyright © 2017 </ p> </ div> <p> CSS: </p> #container #footer {float: vasak; laius: 870 pikslit; border-top: # c00 solid 3px; } <p> <strong>08, 09</strong> </p> <h3> Lisage oma isiklikud stiilid ja sisu </h3><p> Nüüd, kui teil on paigutus valmis, võite alustada oma isiklike stiilide ja sisu lisamist. Pidage meeles, et päisesse ja jalusesse lisati piirid, mis näitavad paigutussektsioonid, mitte just disaini jaoks. </p> <p> <strong>09 09</strong> </p> <h3> Lõplik HTML / CSS </h3><p> Siin on kogu dokument, HTML ja CSS: </p> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <meta http-equiv =" Content-Type "content =" text / html; charset = utf-8 "/> <title> Untitled Document </ title> <style type = "text / css"> html, body {margin: 0px; padding: 0px; piiri: 0px; } #container {width: 870px; marginaal: 0 0 0 20px; / * üleval paremal all vasakul * / padding: 0; taustavärv: #fff; } #container h1 {margin: 0; padding: 0; laius: 100%; kõrgus: 150px; ujuk: vasakule; border-bottom: # c00 solid 3px; } #container # col1 {width: 250px; ujuk: vasakule; } #container # col2outer {width: 610px; ujuk: parem; marginaal: 0; padding: 0; } # col2outer # col2mid {width: 300px; ujuk: vasakule; } # col2outer # col2side {width: 300px; ujuk: parem; } #container #footer {float: vasak; laius: 870 pikslit; border-top: # c00 solid 3px; } </ style> </ head> <body> <div id = "container"> <h1> Minu päise rida </ h1> <div id = "col1"> <p> Ut aliquip ex ea commodo consequat. </ p> </ div> <div id = "col2outer"> <div id = "col2mid"> <p> Ut enim ad minim veniam. </ p> </ div> <div id = "col2side"> <p> Nam libero tempore. </ P> </ div> </ div> <div id = "footer"> <p> Copyright © 2008 </ p> </ div> </ div> </ body> </ html> </div> <div class="amp-related-wrapper"> <h2>Alike posts</h2> <div class="amp-related-content"> <a href="https://et.eyewated.com/kuidas-css-i-kasutades-fonte-veebisaitidel-muuta/"> <amp-img src="https://exse.eyewated.com/pict/2290be1f74fa346f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/kuidas-css-i-kasutades-fonte-veebisaitidel-muuta/">Kuidas CSS-i kasutades fonte veebisaitidel muuta?</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/kuidas-css-i-stiiliframeerid/"> <amp-img src="https://exse.eyewated.com/pict/5be1398d50bb300a-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/kuidas-css-i-stiiliframeerid/">Kuidas CSS-i stiiliframeerid</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/lugege-mida-css-valija/"> <amp-img src="https://exse.eyewated.com/pict/6fe96cd6b2ae3300-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/lugege-mida-css-valija/">Lugege, mida CSS-valija</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/mis-on-css-selectorsi-komaga/"> <amp-img src="https://exse.eyewated.com/pict/2fec7cdccd2f38f7-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/mis-on-css-selectorsi-komaga/">Mis on CSS Selectorsi komaga?</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/absoluutne-vs-suhteline-css-i-positsioneerimise-selgitamine/"> <amp-img src="https://exse.eyewated.com/pict/fefb982d13993023-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/absoluutne-vs-suhteline-css-i-positsioneerimise-selgitamine/">Absoluutne vs suhteline - CSS-i positsioneerimise selgitamine</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/korduma-kippuvad-kuesimused-veebi-disaini-html-i-css-i-ja-veebiarenduse-kohta/">Korduma kippuvad küsimused veebi disaini, HTML-i, CSS-i ja veebiarenduse kohta</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/css-i-kommentaari-sisestamine/"> <amp-img src="https://exse.eyewated.com/pict/eb475c938ddb317f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/css-i-kommentaari-sisestamine/">CSS-i kommentaari sisestamine</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/kuidas-luua-vahekaartidega-navigeerimist-koos-css-i-ja-piltidega/"> <amp-img src="https://exse.eyewated.com/pict/eb474ee61b403f7b-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/kuidas-luua-vahekaartidega-navigeerimist-koos-css-i-ja-piltidega/">Kuidas luua vahekaartidega navigeerimist koos CSS-i ja piltidega</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/xml-dokumentide-kujundamine-css-i-abil/"> <amp-img src="https://exse.eyewated.com/pict/2445473108f83557-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/xml-dokumentide-kujundamine-css-i-abil/">XML-dokumentide kujundamine CSS-i abil</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>See Newest</h2> <div class="amp-related-content"> <a href="https://et.eyewated.com/kuidas-tuua-windows-10-kogemus-ios-i-ja-android-i/"> <amp-img src="https://exse.eyewated.com/pict/f122b91aabc836b7-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/kuidas-tuua-windows-10-kogemus-ios-i-ja-android-i/">Kuidas tuua Windows 10 kogemus iOS-i ja Android-i</a></h3> <div class="amp-related-meta"> Tarkvara ja rakendused </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/groovesharki-uelevaade-online-muusikateabeteenus/"> <amp-img src="https://exse.eyewated.com/pict/9a6b74d18f5132fb-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/groovesharki-uelevaade-online-muusikateabeteenus/">Groovesharki ülevaade - online muusikateabeteenus</a></h3> <div class="amp-related-meta"> Tarkvara ja rakendused </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/oppige-saatma-yahoo-mailis-rikas-vorminguga-isikupaerastatud-kirju/"> <amp-img src="https://exse.eyewated.com/pict/c00db43229443028-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/oppige-saatma-yahoo-mailis-rikas-vorminguga-isikupaerastatud-kirju/">Õppige saatma Yahoo Mailis rikas vorminguga isikupärastatud kirju</a></h3> <div class="amp-related-meta"> E-post ja sõnumside </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/network-attached-storage-nas-sissejuhatus-nasi/"> <amp-img src="https://exse.eyewated.com/pict/b8eadf37eaa83ef8-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/network-attached-storage-nas-sissejuhatus-nasi/">Network Attached Storage - NAS - Sissejuhatus NASi</a></h3> <div class="amp-related-meta"> Internet ja võrk </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/high-resolution-audio-versus-portability/"> <amp-img src="https://exse.eyewated.com/pict/463c4c283eca346e-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/high-resolution-audio-versus-portability/">High-Resolution Audio Versus Portability</a></h3> <div class="amp-related-meta"> Autotehnika </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/parimad-sonic-the-hedgehog-maengud-androidile/"> <amp-img src="https://exse.eyewated.com/pict/f2e2ec491e763399-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/parimad-sonic-the-hedgehog-maengud-androidile/">Parimad Sonic the Hedgehog mängud Androidile</a></h3> <div class="amp-related-meta"> Mängimine </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>Sapid posts</h2> <div class="amp-related-content"> <a href="https://et.eyewated.com/veebitoeoestuse-efektiivsema-ettekande-parimad-tavad/"> <amp-img src="https://exse.eyewated.com/pict/bf5182b8de7033b1-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/veebitoeoestuse-efektiivsema-ettekande-parimad-tavad/">Veebitööstuse efektiivsema ettekande parimad tavad</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/mis-on-telegrami-rakendus/"> <amp-img src="https://exse.eyewated.com/pict/a3ed6ba18e083284-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/mis-on-telegrami-rakendus/">Mis on Telegrami rakendus?</a></h3> <div class="amp-related-meta"> Uus & Järgmine </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/mis-teeb-nutitelefoni-nutikas/"> <amp-img src="https://exse.eyewated.com/pict/0825a79d9ead2f9a-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/mis-teeb-nutitelefoni-nutikas/">Mis teeb nutitelefoni nutikas?</a></h3> <div class="amp-related-meta"> Uus & Järgmine </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/kuemme-viisi-wii-u-paremaks-kui-wii/"> <amp-img src="https://exse.eyewated.com/pict/aabc86bb19823210-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/kuemme-viisi-wii-u-paremaks-kui-wii/">Kümme viisi Wii U paremaks kui Wii</a></h3> <div class="amp-related-meta"> Mängimine </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/hdshredderi-uelevaade-v5/"> <amp-img src="https://exse.eyewated.com/pict/480e067bf3cf349d-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/hdshredderi-uelevaade-v5/">HDShredderi ülevaade (v5)</a></h3> <div class="amp-related-meta"> Tarkvara ja rakendused </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/kuidas-luua-veebisaidi-tagant-nuppu/"> <amp-img src="https://exse.eyewated.com/pict/acfe8603dc623610-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/kuidas-luua-veebisaidi-tagant-nuppu/">Kuidas luua veebisaidi tagant nuppu</a></h3> <div class="amp-related-meta"> Veebiotsing </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/9-parimat-avatud-maailmale-moeldud-ps4-maengud-2018-aastal/">9 parimat avatud maailmale mõeldud PS4 mängud 2018. aastal</a></h3> <div class="amp-related-meta"> Juhendite ostmine </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/kui-veendunud-et-olete-turvaline/"> <amp-img src="https://exse.eyewated.com/pict/05efa069670a35f8-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/kui-veendunud-et-olete-turvaline/">Kui veendunud, et olete turvaline?</a></h3> <div class="amp-related-meta"> Veebiotsing </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/installeeri-ubuntu-cinnamon-desktop/"> <amp-img src="https://exse.eyewated.com/pict/d17526d25e24347e-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/installeeri-ubuntu-cinnamon-desktop/">Installeeri Ubuntu Cinnamon Desktop</a></h3> <div class="amp-related-meta"> Linux </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/facebooki-kustutamine-voi-desaktiveerimine-mis-vahe-on/"> <amp-img src="https://exse.eyewated.com/pict/1735569fa8902fd6-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/facebooki-kustutamine-voi-desaktiveerimine-mis-vahe-on/">Facebooki kustutamine või desaktiveerimine: mis vahe on?</a></h3> <div class="amp-related-meta"> Sotsiaalmeedia </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/ermahgerd-mida-see-taehendab/"> <amp-img src="https://exse.eyewated.com/pict/0f6e16322812317c-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/ermahgerd-mida-see-taehendab/">Ermahgerd! Mida see tähendab?</a></h3> <div class="amp-related-meta"> Internet ja võrk </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/youtubei-videote-teisendamine-mpl-vormingusse-kasutades-vlc-media-playerit/"> <amp-img src="https://exse.eyewated.com/pict/e1e23125d1a035af-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/youtubei-videote-teisendamine-mpl-vormingusse-kasutades-vlc-media-playerit/">YouTube'i videote teisendamine MPL-vormingusse, kasutades VLC Media Playerit</a></h3> <div class="amp-related-meta"> Tarkvara ja rakendused </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/tasuta-animatsiooni-toeoeriistad/"> <amp-img src="https://exse.eyewated.com/pict/3fc194bd48c94aeb-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/tasuta-animatsiooni-toeoeriistad/">Tasuta animatsiooni tööriistad</a></h3> <div class="amp-related-meta"> Tarkvara ja rakendused </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/parimad-iphone-sports-kingitused-harjutamiseks/"> <amp-img src="https://exse.eyewated.com/pict/9dab7022872235f3-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/parimad-iphone-sports-kingitused-harjutamiseks/">Parimad iPhone Sports Kingitused harjutamiseks</a></h3> <div class="amp-related-meta"> Juhendite ostmine </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/lenovo-essential-h535-lauaarvuti-uelevaade/"> <amp-img src="https://exse.eyewated.com/pict/090451ca61c431a7-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/lenovo-essential-h535-lauaarvuti-uelevaade/">Lenovo Essential H535 lauaarvuti ülevaade</a></h3> <div class="amp-related-meta"> Juhendite ostmine </div> </div> </div> <div class="amp-related-content"> <a href="https://et.eyewated.com/kontrollnimekiri-mis-kirjutab-teie-blogi-postituste-jaoks-parimad-pealkirjad/"> <amp-img src="https://exse.eyewated.com/pict/4a0272c1cb743608-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://et.eyewated.com/kontrollnimekiri-mis-kirjutab-teie-blogi-postituste-jaoks-parimad-pealkirjad/">Kontrollnimekiri, mis kirjutab teie blogi postituste jaoks parimad pealkirjad</a></h3> <div class="amp-related-meta"> Veebiotsing </div> </div> </div> </div></article> <footer class="amp-wp-footer"> <div class="amp-wp-footer-inner"> <a href="#" class="back-to-top">Back to top</a> <p class="copyright"> © 2024 et.eyewated.com </p> <div class="amp-wp-social-footer"> <a href="#" class="jeg_facebook"><i class="fa fa-facebook"></i> </a><a href="#" class="jeg_twitter"><i class="fa fa-twitter"></i> </a><a href="#" class="jeg_google-plus"><i class="fa fa-google-plus"></i> </a><a href="#" class="jeg_pinterest"><i class="fa fa-pinterest"></i> </a><a href="" class="jeg_rss"><i class="fa fa-rss"></i> </a> </div> </div> </footer> <div id="statcounter"> <amp-pixel src="https://c.statcounter.com/12022999/0/02d06b5d/1/"> </amp-pixel> </div> </body> </html> <!-- Dynamic page generated in 1.231 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2019-10-03 21:56:11 --> <!-- 0.002 -->