CSS- aranĝo postulas, ke vi pensu pri via retejo-aranĝo en lia aro, kaj poste prenu la pecojn kaj metu ilin kune. Lernu kiel konstrui simplan 3-kolumnan aranĝon kun CSS.
01 de 09
Eltiru Vian Aranĝon J Kyrnin Vi povas desegni vian aranĝon en papero aŭ en grafika programo . Se vi jam havas kadran kadron aŭ eĉ pli vastan dezajnon en la menso, simpligu ĝin al la bazaj skatoloj, kiuj konsistas en la retejo. Ĉi tiu dezajno, kiu akompanas ĉi tiun artikolon, havas tri kolumnojn en la ĉefa enhavo, same kiel kaplinio kaj piedlinio. Se vi rigardas mallarĝe, vi povas vidi, ke la tri kolumnoj ne estas egale larĝaj.
Post kiam vi havas vian aranĝon, vi povas komenci pensi pri dimensioj. Ĉi tiu ekzemplo dezajno havos la jenajn bazajn dimensiojn:
Ne pli ol 900 pikseloj larĝe 20 px gutteron maldekstre 10 px inter kolumnoj kaj vicoj Kolumnoj, kiuj estas 250px, 300px kaj 300px larĝe La supra vico estas 150px alta La funda vico estas 100px alta 02 de 09
Skribu Bazan HTML / CSS kaj Krei Enhavan Elekton Ĉar ĉi tiu paĝo estos valida HTML-dokumento, Komencu kun malplena HTML-ujo
Untitled Document </ titolo> </ head> <body> </ body> </ html> <p> Aldonu en la bazaj CSS-stiloj por <a href="https://eo.eyewated.com/uzu-css-por-zero-elsuti-viajn-margojn-kaj-landlimojn/">nuligi la paĝajn randojn, limojn kaj paŝojn</a> . Dum ekzistas aliaj <a href="https://eo.eyewated.com/iru-al-scii-kaskadajn-stilfoliojn-kun-ci-tiu-css-trompata-folio/">normaj CSS-stiloj</a> por novaj dokumentoj, ĉi tiuj stiloj estas la minimumo, kiun vi bezonas por havi pura aranĝo. Aldonu ilin al la kapo de via dokumento: </p>
<style type = "text / css"> html, body {margin: 0px; kompletigo: 0px; limo: 0px; } </ style> <p> Por komenci konstrui la aranĝon, enmetu konteneron. Ĝi foje okazas, ke vi povas forigi la ujon poste, sed por la plej multaj fiksaj larĝaj aranĝoj, havante la ujon-elementon faciligas administri tra malsamaj retumiloj. Do en la korpo metis ĉi tion: </p>
<div id = "ujo"> </ div> <p> Kaj en la CSS stilo folio, metu: </p>
#container {} <p> <strong>03an de 09</strong> </p>
<h3> Stilo la Ujo </h3><p> La ujo difinas kiom larĝe la retpaĝaj enhavoj estos, same kiel iuj randoj ĉirkaŭe kaj kompletigantaj interne. Por ĉi tiu dokumento, la ujo estas 870px larĝe kun 20-piksel-gutterilo maldekstre. La guttero estas starigita per rando-stilo, sed la kompletigo sur la ujo estas nuligita por eviti ke iuj elementoj estu tiel larĝaj kiel la ujo. </p>
#container {larĝa: 870px; rando: 0 0 0 20px; / * supre dekstra malsupre maldekstre * / kompletigo: 0; } <p> Se vi nun konservos vian dokumenton, ĝi estos malfacile vidi la ujon ĉar ĝi havas nenion en ĝi. Se vi aldonas lokokupilon, vi povos vidi la ujon elementon pli klare. </p>
<p> <strong>04 de 09</strong> </p>
<h3> Uzu titolitan etikedon por la kaplinio </h3><p> Kiel vi decidas stili la kaplinion, tio dependas tre de tio, kio estas en ĝi. Se la kaplinia vico simple havos logoon grafikan kaj titolon, tiam uzante titola etikedo (<h1>) pli sentas ol uzi <div>. Vi povas stiri la titolon kiel vi stiras div, kaj vi evitas ekstranajn etikedojn. </p>
<p> La HTML por la kaplinia vico iras ĉe la supro de la ujo kaj aspektas tiel: </p>
<h1> Mia kaplinio-vico </ h1> <p> Tiam, por agordi la stilojn sur ĝi, ruĝa limo estis aldonita sur la fundo, por ke vi povu vidi, kie ĝi finiĝas, la randoj kaj kompletigoj estis nulaj, la larĝa aro al 100% kaj la alteco ĝis 150px: </p>
#container h1 {rando: 0; Plenigado: 0; larĝa: 100%; alteco: 150px; flosas: maldekstre; limo-fundo: # c00 solid 3px; } <p> Ne forgesu flosi ĉi tiun elementon per la kaleŝego: maldekstre; proprieto. La ŝlosilo por skribi CSS-aranĝojn estas flosi ĉion - eĉ aĵojn, kiuj estas la sama larĝo kiel la ujo. Tiel vi ĉiam scias, kie la elementoj kuŝos sur la paĝo. </p>
<p> <a href="https://eo.eyewated.com/kio-estas-css-descendenta-elektanto/">CSS-descendanta elektilo</a> aplikis stilojn nur al H1-elementoj, kiuj estas ene de la elemento #container. </p>
<p> <strong>05 de 09</strong> </p>
<h3> Akiri Tri Kolumnojn, Komencu per Konstruado Du Kolumnoj </h3><p> Kiam vi konstruas tri-kolumnan aranĝon kun CSS, vi devas dividi vian aranĝon en grupoj de du. Do por ĉi tiu tri-kolumna aranĝo, la meza kaj dekstra kolumno kaj kolektu kaj metu apud la maldekstra kolumno en du-kolumna aranĝo kie la maldekstra kolumno estas 250px larĝa, kaj la dekstra kolumno estas 610px larĝa (300 ĉiu por la du kolumnoj , pli 10px por la guttero inter ili). </p>
<p> La HTML aspektas tiel: </p>
<div id = "col1"> <p> Ut aliquip ex ea commodo consequat. Vi povas uzi vin por malpli ol malpli da tempo, Sed mi estas tre ŝatata. En reprehenderit en la plezuro, iu ajn ekspluatado estas senpaga. Ĉi tio estas nur sekureco. </ P> </ div> <div id = "col2outer"> <p> Ut enim ad minim veniam, sed do eiusmod tempor incididunt ullamco laboris nisi. Kiel labori kaj dolore granda. Ĉi tiu kategorio estas senpaga. </ P> </ div> <p> Lokokupla teksto en la kolumnoj faras ilin pli videblaj dum provado. La CSS aspektas tiel: </p>
#container # col1 {larĝa: 250px; flosas: maldekstre; } #container # col2outer {larĝa: 610px; flosi: dekstre; rando: 0; Plenigado: 0; } <p> La kolumno maldekstre flosas maldekstre, dum la alia flosas dekstre. Ĉar la tuta larĝo de ambaŭ kolumnoj estas 860px, ekzistas 10px gutter inter ili. </p>
<p> <strong>06 de 09</strong> </p>
<h3> Aldonu Du Kolumnojn En la Larĝa Dua Kolumno </h3><p> Por krei la tri kolumnojn, aldonu du divojn ene de la pli larĝa dua kolumno, same kiel vi aldonis 2 divojn ene de la uza kolumno en la lasta paŝo. La HTML aspektas tiel: </p>
<div id = "col2outer"> <div id = "col2mid"> <p> Ut enim ad minim veniam, sed do eiusmod tempor incididunt ullamco laboris nisi. Kiel labori kaj dolore granda. Velit esse cillum dolore eu fugiat nulla pariatur. </ P> </ div> <div id = "col2side"> <p> Nam libero tempore, quia voluptas sit aspernatur dicta est explicabo. Plej multekosta estas provizita por labori, Kaj postulas multajn interesojn. Ĉi tie, ĉi tie, ĝi havas la plej bonan delecton, sed tiel informas, ke ĉiu tempo provokas laboron kaj doloron. </ P> </ div> </ div> <p> Kaj la CSS aspektas tiel: </p>
#col2outer #col2mid {larĝa: 300px; flosas: maldekstre; } #col2outer # col2side {larĝa: 300px; flosi: dekstre; } <p> Ĉar ĉi tiuj du 300px larĝaj skatoloj estas ene de 610px larĝa skatolo, tie denove estos 10px gutter inter ili. </p>
<p> <strong>07 de 09</strong> </p>
<h3> Aldonu en la Piedo </h3><p> Nun ke la resto de la paĝo estas stiligita, vi povas aldoni en la piedlinio. Uzu lastan div kun "piedlinio" id, kaj aldonu enhavon por ke vi povu vidi ĝin. Vi ankaŭ povas aldoni limon ĉe la supro, do vi scios, kie ĝi komenciĝas. </p>
<p> La HTML: </p>
<div id = "footer"> <p> Kopirajto © 2017 </ p> </ div> <p> La CSS: </p>
#container #footer {flosas: maldekstre; larĝa: 870px; limo-supro: # c00 solid 3px; } <p> <strong>08 de 09</strong> </p>
<h3> Aldonu en Viaj Personaj Stiloj kaj Enhavo </h3><p> Nun, ke vi havas la aranĝon finitan, vi povas komenci aldoni viajn proprajn personajn stilojn kaj enhavon. Memoru, ke la limoj sur la kaplinio kaj piedlinio aldoniĝis por montri la aranĝajn sekciojn, ne specife por dezajno. </p>
<p> <strong>09 de 09</strong> </p>
<h3> La Fina HTML / CSS </h3><p> Jen la tuta dokumento, HTML kaj 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; kompletigo: 0px; limo: 0px; } #container {larĝa: 870px; rando: 0 0 0 20px; / * supre dekstra malsupre maldekstre * / kompletigo: 0; fonkoloro: #fff; } #container h1 {rando: 0; Plenigado: 0; larĝa: 100%; alteco: 150px; flosas: maldekstre; limo-fundo: # c00 solid 3px; } #container # col1 {larĝa: 250px; flosas: maldekstre; } #container # col2outer {larĝa: 610px; flosi: dekstre; rando: 0; Plenigado: 0; } #col2outer #col2mid {larĝa: 300px; flosas: maldekstre; } #col2outer # col2side {larĝa: 300px; flosi: dekstre; } #container #footer {flosas: maldekstre; larĝa: 870px; limo-supro: # c00 solid 3px; } </ style> </ head> <body> <div id = "container"> <h1> Mia kaplinio Row </ 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> Por libera tempo. </ P> </ div> </ div> <div id = "footer"> <p> Kopirajto © 2008 </ p> </ div> </ div> </ body> </ html>
</div>
<div class="amp-related-wrapper">
<h2>Alike posts</h2>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/kio-estas-la-diferenco-inter-import-kaj-ligilo-por-css/">
<amp-img src="https://exse.eyewated.com/pict/e1ef7baeb7f72ff1-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/kio-estas-la-diferenco-inter-import-kaj-ligilo-por-css/">Kio estas la diferenco inter @import kaj ligilo por CSS?</a></h3>
<div class="amp-related-meta">
TTT-ejo kaj dezajno </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/difino-de-css-proprieto/">
<amp-img src="https://exse.eyewated.com/pict/3a2920899cf83249-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/difino-de-css-proprieto/">Difino de CSS Proprieto</a></h3>
<div class="amp-related-meta">
TTT-ejo kaj dezajno </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/kiel-uzi-css-kolumnojn-por-multi-kolumno-retejo-layouts/">
<amp-img src="https://exse.eyewated.com/pict/e20233b2c6ba3161-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/kiel-uzi-css-kolumnojn-por-multi-kolumno-retejo-layouts/">Kiel Uzi CSS Kolumnojn por Multi-Kolumno Retejo Layouts</a></h3>
<div class="amp-related-meta">
TTT-ejo kaj dezajno </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/kiel-sangi-retejon-tiparoj-koloroj-kun-css/">
<amp-img src="https://exse.eyewated.com/pict/fdc3944c7bf13405-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/kiel-sangi-retejon-tiparoj-koloroj-kun-css/">Kiel ŝanĝi retejon Tiparoj Koloroj Kun CSS</a></h3>
<div class="amp-related-meta">
TTT-ejo kaj dezajno </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/krei-scrollable-enhavo-en-html5-kaj-css3-sen-marquee/">
<amp-img src="https://exse.eyewated.com/pict/049d95d89eac3a60-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/krei-scrollable-enhavo-en-html5-kaj-css3-sen-marquee/">Krei Scrollable Enhavo en HTML5 kaj CSS3 Sen MARQUEE</a></h3>
<div class="amp-related-meta">
TTT-ejo kaj dezajno </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/kiel-enmeti-css-komento/">
<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://eo.eyewated.com/kiel-enmeti-css-komento/">Kiel Enmeti CSS Komento</a></h3>
<div class="amp-related-meta">
TTT-ejo kaj dezajno </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/css3-linearaj-gradientoj/">
<amp-img src="https://exse.eyewated.com/pict/1aec286b282b332c-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/css3-linearaj-gradientoj/">CSS3 Linearaj Gradientoj</a></h3>
<div class="amp-related-meta">
TTT-ejo kaj dezajno </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/kio-estas-grava-mezuro-en-css/">
<amp-img src="https://exse.eyewated.com/pict/d08b62f6c7f73033-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/kio-estas-grava-mezuro-en-css/">Kio estas! Grava Mezuro en CSS?</a></h3>
<div class="amp-related-meta">
TTT-ejo kaj dezajno </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/stiliganta-notepad-kreita-retpagon-kun-css/">
<amp-img src="https://exse.eyewated.com/pict/4b7ab57836bf3365-120x86.gif" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/stiliganta-notepad-kreita-retpagon-kun-css/">Stiliganta Notepad Kreita Retpaĝon kun CSS</a></h3>
<div class="amp-related-meta">
TTT-ejo kaj dezajno </div>
</div>
</div>
</div>
<div class="amp-related-wrapper">
<h2>See Newest</h2>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/listo-de-band-hero-song/">
<amp-img src="https://exse.eyewated.com/pict/98a8b645990c3310-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/listo-de-band-hero-song/">Listo de Band Hero Song</a></h3>
<div class="amp-related-meta">
Ludado </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/skribi-en-ciuj-capeloj-venas-krom-gutado/">
<amp-img src="https://exse.eyewated.com/pict/d27376dad5923e85-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/skribi-en-ciuj-capeloj-venas-krom-gutado/">Skribi en Ĉiuj Ĉapeloj Venas Krom Gutado</a></h3>
<div class="amp-related-meta">
Retpoŝto kaj mesaĝado </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/kiel-filtri-mac-adresojn-al-blokaj-aparatoj-en-via-reto/">
<amp-img src="https://exse.eyewated.com/pict/e9c3f66377ce2ed4-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/kiel-filtri-mac-adresojn-al-blokaj-aparatoj-en-via-reto/">Kiel filtri MAC-adresojn al blokaj aparatoj en via reto</a></h3>
<div class="amp-related-meta">
Macoj </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/kiel-aldoni-komandlinajn-parametrojn-al-videoludoj/">
<amp-img src="https://exse.eyewated.com/pict/426edef520a43982-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/kiel-aldoni-komandlinajn-parametrojn-al-videoludoj/">Kiel aldoni komandlinajn parametrojn al videoludoj</a></h3>
<div class="amp-related-meta">
Ludo-konzoloj </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/via-smartphone-ne-eksplodigos-se-vi-uzas-gi-dum-gi-estas-sarganta/">
<amp-img src="https://exse.eyewated.com/pict/6e08d8bf48c53908-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/via-smartphone-ne-eksplodigos-se-vi-uzas-gi-dum-gi-estas-sarganta/">Via Smartphone Ne Eksplodigos Se Vi Uzas Ĝi Dum Ĝi Estas Ŝarĝanta</a></h3>
<div class="amp-related-meta">
TTT-serĉo </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/hp-envy-700-230/">
<amp-img src="https://exse.eyewated.com/pict/eaa36ed155003131-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/hp-envy-700-230/">HP ENVY 700-230</a></h3>
<div class="amp-related-meta">
Aĉetante Gvidiloj </div>
</div>
</div>
</div>
<div class="amp-related-wrapper">
<h2>Sapid posts</h2>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/ci-tiu-apple-watch-band-funkcias-kiel-kurata-monitoro-de-kurata-grado/">
<amp-img src="https://exse.eyewated.com/pict/ed2e340dd3fc37bb-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/ci-tiu-apple-watch-band-funkcias-kiel-kurata-monitoro-de-kurata-grado/">Ĉi tiu Apple Watch Band funkcias kiel Kurata Monitoro de Kurata Grado</a></h3>
<div class="amp-related-meta">
Aĉetante Gvidiloj </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/la-plej-bonaj-swype-klavaroj-por-android/">
<amp-img src="https://exse.eyewated.com/pict/e5eaf498f7dd36b5-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/la-plej-bonaj-swype-klavaroj-por-android/">La Plej bonaj Swype Klavaroj por Android</a></h3>
<div class="amp-related-meta">
Programaro & Programoj </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/kio-estas-emz-dosiero/">
<amp-img src="https://exse.eyewated.com/pict/3cfa4068f8c93388-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/kio-estas-emz-dosiero/">Kio estas EMZ-dosiero?</a></h3>
<div class="amp-related-meta">
Vindozo </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/ge-x2600-revizio/">
<amp-img src="https://exse.eyewated.com/pict/7c9e150646f7348b-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/ge-x2600-revizio/">GE X2600 Revizio</a></h3>
<div class="amp-related-meta">
Produkta Revizioj </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/kiel-bloki-domajnon-en-outlook-posto-sur-la-retejo/">
<amp-img src="https://exse.eyewated.com/pict/f18b2a8c7c2734af-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/kiel-bloki-domajnon-en-outlook-posto-sur-la-retejo/">Kiel Bloki Domajnon en Outlook Poŝto sur la Retejo</a></h3>
<div class="amp-related-meta">
Retpoŝto kaj mesaĝado </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/senpaga-malmola-disko-spaco-kun-disk-purigado/">
<amp-img src="https://exse.eyewated.com/pict/d4f05e56e0732e76-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/senpaga-malmola-disko-spaco-kun-disk-purigado/">Senpaga Malmola Disko-Spaco kun Disk-Purigado</a></h3>
<div class="amp-related-meta">
Vindozo </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/filtrilo-posto-de-specifa-transdono-en-outlook-express/">
<amp-img src="https://exse.eyewated.com/pict/53ebe149a2ac3f87-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/filtrilo-posto-de-specifa-transdono-en-outlook-express/">Filtrilo Poŝto De Specifa Transdono en Outlook Express</a></h3>
<div class="amp-related-meta">
Retpoŝto kaj mesaĝado </div>
</div>
</div>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/aol-por-windows-9-7-retposto-programo/">AOL por Windows 9.7 - Retpoŝto Programo</a></h3>
<div class="amp-related-meta">
Programaro & Programoj </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/kio-estas-automata-batalanta-sistemon/">
<amp-img src="https://exse.eyewated.com/pict/3d28ddf109cd3870-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/kio-estas-automata-batalanta-sistemon/">Kio Estas Aŭtomata Batalanta Sistemon?</a></h3>
<div class="amp-related-meta">
Aŭto-tekniko </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/supraj-postelefonaj-postelefonoj-por-android-kaj-ios/">
<amp-img src="https://exse.eyewated.com/pict/8c5614d9df5a381f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/supraj-postelefonaj-postelefonoj-por-android-kaj-ios/">Supraj Poŝtelefonaj Poŝtelefonoj por Android kaj iOS</a></h3>
<div class="amp-related-meta">
Programaro & Programoj </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/dio-de-milito-iii-remastered-ps4-review/">
<amp-img src="https://exse.eyewated.com/pict/4dadcdfcd60638ad-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/dio-de-milito-iii-remastered-ps4-review/">Dio de Milito III Remastered PS4 Review</a></h3>
<div class="amp-related-meta">
Ludado </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/kio-estas-kodekso-kaj-kial-mi-devas/">
<amp-img src="https://exse.eyewated.com/pict/cf5534f7b75230c3-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/kio-estas-kodekso-kaj-kial-mi-devas/">Kio estas Kodekso kaj Kial Mi Devas?</a></h3>
<div class="amp-related-meta">
Vindozo </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/la-plej-bonaj-iphone-programoj-por-la-blindaj-kaj-vortigitaj/">
<amp-img src="https://exse.eyewated.com/pict/294ecfa7539f36d7-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/la-plej-bonaj-iphone-programoj-por-la-blindaj-kaj-vortigitaj/">La plej bonaj iPhone-Programoj por la Blindaj kaj Vortigitaj</a></h3>
<div class="amp-related-meta">
TTT-serĉo </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/oficejo-donacoj-kaj-tech-gadgets-por-ciu-bugeto/">
<amp-img src="https://exse.eyewated.com/pict/3825b6b4f4223711-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/oficejo-donacoj-kaj-tech-gadgets-por-ciu-bugeto/">Oficejo-Donacoj kaj Tech-Gadgets por Ĉiu Buĝeto</a></h3>
<div class="amp-related-meta">
Programaro </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://eo.eyewated.com/saluton-mondo-projekto-de-via-unua-frambo-pi/">
<amp-img src="https://exse.eyewated.com/pict/81b081c5736131fd-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/saluton-mondo-projekto-de-via-unua-frambo-pi/">Saluton Mondo - Projekto de Via Unua Frambo Pi</a></h3>
<div class="amp-related-meta">
Nova & Sekva </div>
</div>
</div>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://eo.eyewated.com/kiel-resendi-mesagon-en-mac-vin-xa-posto/">Kiel Resendi Mesaĝon en Mac VIN Xa Poŝto</a></h3>
<div class="amp-related-meta">
Macoj </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 eo.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.151 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2019-10-03 21:53:59 -->
<!-- 0.002 -->