El disseny de CSS requereix que penseu en el disseny del vostre lloc web en conjunt, i després prengui les peces i les uniu. Obteniu informació sobre com crear un disseny simple de 3 columnes amb CSS.
01 de 09
Dibuixa el teu disseny J Kyrnin Podeu dibuixar el disseny en paper o en un programa de gràfics . Si ja teniu en compte un disseny de filferro o un disseny encara més extens, simplifiqueu-lo als quadres bàsics que formen el lloc. Aquest disseny que acompanya aquest article té tres columnes a l'àrea de contingut principal, així com un encapçalament i un peu de pàgina. Si observeu de prop, podeu veure que les tres columnes no són iguals a l'amplada.
Després d'haver dibuixat el disseny, podeu començar a pensar en les dimensions. Aquest disseny d'exemple tindrà les següents dimensions bàsiques:
No més de 900 píxels d'ample Capçalera de 20 px a l'esquerra 10 px entre columnes i files Columnes que són de 250px, 300px i 300px d'ample La fila superior és de 150 píxels d'alçada La fila inferior és de 100 peus d'alçada 02 de 09
Escriure HTML / CSS bàsic i crear un element contenidor Atès que aquesta pàgina serà un document HTML vàlid, Comenceu amb un contenidor HTML buit
Untitled Document </ títol> </ head> <body> </ body> </ html> <p> Afegiu els estils CSS bàsics per <a href="https://ca.eyewated.com/utilitzeu-css-per-extreure-els-marges-i-les-fronteres/">zero dels marges, les vores i els remenes de la pàgina</a> . Si bé hi ha altres <a href="https://ca.eyewated.com/conegui-les-fulles-destil-en-cascada-amb-aquesta-fulla-de-trucs-css/">estils CSS estàndard</a> per a documents nous, aquests estils són el mínim necessari per obtenir un disseny net. Afegiu-los al capdavant del document: </p>
<style type = "text / css"> html, body {margin: 0px; farcit: 0px; frontera: 0 px; } </ style> <p> Per començar a construir el disseny, poseu-vos en un element contenidor. De vegades passa que podeu eliminar l'envàs més endavant, però per a la majoria de dissenys d'amplada fixa, tenir l'element del contenidor fa que sigui més fàcil de gestionar-lo a través de diferents navegadors web. Així que en el cos posem això: </p>
<div id = "container"> </ div> <p> I al full d'estil CSS, poseu: </p>
#container {} <p> <strong>03 de 09</strong> </p>
<h3> Estil del contenidor </h3><p> El contenidor defineix l'amplitud del contingut de la pàgina web, així com els marges que hi ha a l'exterior i el farcit a l'interior. Per a aquest document, el contenidor té 870 píxels d'amplada amb una canaleta de 20 píxels a l'esquerra. El canal està configurat amb un estil de marge, però el farciment al contenidor es posa a zero per evitar que qualsevol element sigui tan ampli com el contenidor. </p>
#container {width: 870px; marge: 0 0 0 20px; / * dalt a la part inferior dreta a l'esquerra * / farcit: 0; } <p> Si guardes el document ara, serà difícil veure el contenidor perquè no té res. Si afegiu text de marcador de posició, podreu veure l'element contenidor amb més claredat. </p>
<p> <strong>04 de 09</strong> </p>
<h3> Utilitzeu una etiqueta principal per al encapçalament </h3><p> La forma en què decideixis d'estil la fila de capçalera depèn molt del que hi ha. Si la fila de capçaleres només tindrà un logotip gràfic i un encapçalament, l'ús d'una etiqueta principal (<h1>) té més sentit que l'ús d'un <div>. Podeu estilear el títol de la mateixa manera que l'estil d'una div, i eviteu etiquetes estranyes. </p>
<p> L'HTML de la fila de capçalera es troba a la part superior del contenidor i es veu així: </p>
<h1> La meva fila de capçalera </ h1> <p> Després, per establir els estils en ell, es va afegir una vora vermella a la part inferior, de manera que es podia veure on finalitzava, els marges i el farciment eren zero, l'amplada fixada al 100% i l'alçada a 150px: </p>
#contenidor h1 {marge: 0; farcit: 0; ample: 100%; alçada: 150px; flota: esquerra; frontera inferior: # c00 sòlid 3px; } <p> No oblideu flotar aquest element amb el flotador: a l'esquerra; propietat. La clau per escriure dissenys CSS és flotar tot, fins i tot les mateixes que el contenidor. D'aquesta manera, sempre sabràs on estaran els elements a la pàgina. </p>
<p> Un <a href="https://ca.eyewated.com/que-es-un-selector-de-descendencia-css/">selector descendent CSS ha</a> aplicat estils només als elements H1 que hi ha a l'interior de l'element #container. </p>
<p> <strong>05 de 09</strong> </p>
<h3> Per obtenir tres columnes, comenceu per construir dues columnes </h3><p> Quan creeu un disseny de tres columnes amb CSS, heu de dividir el disseny en grups de dos. Així doncs, per a aquest disseny de tres columnes, la columna central i dreta s'agrupen i col·loquen al costat de la columna esquerra en un disseny de dues columnes on la columna esquerra té 250 píxels d'ample i la columna dreta és de 610 píxels d'ample (300 cadascun per a les dues columnes , a més de 10px per al canal entre ells). </p>
<p> L'HTML es veu així: </p>
<div id = "col1"> <p> Excepte un complement comú. Velit esse cillum dolore ut en minimum ad veniam, Lorem ipsum dolor sit amet. En reprehenderit in voluptate quis nostru exercitacio eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris sense tenir en compte les seves pròpies conseqüències. </ P> </ div> <div id = "col2outer"> <p> No obstant això, el mínim de venir, no obstant això, no hi ha cap problema. Utilitza el treball i la dolore magna aliqua. Velit esse cillum dolore eu fugiat a la parella </ p> </ div> <p> El text del marcador de posició a les columnes els fa més visibles quan es prova. El CSS és així: </p>
#container # col1 {width: 250px; flota: esquerra; } #container # col2outer {width: 610px; flota: a la dreta; marge: 0; farcit: 0; } <p> La columna de l'esquerra flota cap a l'esquerra, mentre que l'altra flota a la dreta. Com que l'amplada total d'ambdues columnes és de 860 píxels, hi ha un canal de 10 píxels entre ells. </p>
<p> <strong>06 de 09</strong> </p>
<h3> Afegiu dues columnes a l'interior de la segona columna ampla </h3><p> Per crear les tres columnes, afegiu dos divs a la segona columna més ample, igual que heu afegit 2 divs a la columna del contenidor a l'últim pas. L'HTML es veu així: </p>
<div id = "col2outer"> <div id = "col2mid"> <p> Tot seguit, cal tenir-lo en compte amb un altre cop d'ull. Utilitza el treball i la dolore magna aliqua. Velit esse cillum dolore eu fugiat a l'associació. </ P> </ div> <div id = "col2side"> <p> Si us plau, si us plau visiteu el vostre comentari. Ullam corporis suscipit laboratori, magnam aliquam quaerat voluptatem. A continuació, l'alumne té la possibilitat d'obtenir informació sobre el coneixement i la tasca. </ P> </ div> </ div> <p> I el CSS és així: </p>
# col2outer # col2mid {width: 300px; flota: esquerra; } # col2outer # col2side {width: 300px; flota: a la dreta; } <p> Atès que aquestes dues caixes d'ample de 300px es troben dins d'una caixa ampla de 610px, tornaran a haver-hi una canonada de 10px entre elles. </p>
<p> <strong>07 de 09</strong> </p>
<h3> Afegiu al peu de pàgina </h3><p> Ara que la resta de la pàgina està dissenyada, podeu afegir-la al peu de pàgina. Utilitzeu una última div amb un identificador de "peu de pàgina" i afegiu el contingut perquè pugui veure-ho. També podeu afegir un límit a la part superior, de manera que sabreu on comença. </p>
<p> L'HTML: </p>
<div id = "footer"> <p> Copyright © 2017 </ p> </ div> <p> El CSS: </p>
#container #footer {float: left; ample: 870 px; frontera superior: # c00 sòlid 3px; } <p> <strong>08 de 09</strong> </p>
<h3> Afegiu als vostres estils personals i contingut </h3><p> Ara que teniu acabat el disseny, podeu començar a afegir els vostres propis estils i contingut personals. Recordeu que les vores de la capçalera i del peu de pàgina es van afegir per mostrar les seccions de disseny, no específicament per al disseny. </p>
<p> <strong>09 de 09</strong> </p>
<h3> Final HTML / CSS </h3><p> Aquí teniu tot el document, HTML i 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; farcit: 0px; frontera: 0 px; } #container {width: 870px; marge: 0 0 0 20px; / * dalt a la part inferior dreta a l'esquerra * / farcit: 0; background-color: #fff; } #container h1 {margin: 0; farcit: 0; ample: 100%; alçada: 150px; flota: esquerra; frontera inferior: # c00 sòlid 3px; } #container # col1 {width: 250px; flota: esquerra; } #container # col2outer {width: 610px; flota: a la dreta; marge: 0; farcit: 0; } # col2outer # col2mid {width: 300px; flota: esquerra; } # col2outer # col2side {width: 300px; flota: a la dreta; } #container #footer {float: left; ample: 870 px; frontera superior: # c00 sòlid 3px; } </ style> </ head> <body> <div id = "container"> <h1> La meva fila de capçalera </ h1> <div id = "col1"> <p> Excepteu com a consol. </ p> </ div> <div id = "col2outer"> <div id = "col2mid"> <p> A mínim 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://ca.eyewated.com/com-bloquejar-una-pagina-web-des-de-la-impressio-amb-css/">
<amp-img src="https://exse.eyewated.com/pict/ec81fd353f1033a0-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-bloquejar-una-pagina-web-des-de-la-impressio-amb-css/">Com bloquejar una pàgina web des de la impressió amb CSS</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/la-diferencia-entre-css2-i-css3/">
<amp-img src="https://exse.eyewated.com/pict/cf6c8f56be612ece-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/la-diferencia-entre-css2-i-css3/">La diferència entre CSS2 i CSS3</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/com-crear-un-disseny-de-3-columnes-a-css/">
<amp-img src="https://exse.eyewated.com/pict/4b2ea51168c33485-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-crear-un-disseny-de-3-columnes-a-css/">Com crear un disseny de 3 columnes a CSS</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-esbrinar-un-nuvol-detiquetes/">Com esbrinar un núvol d'etiquetes</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/utilitzeu-css-per-extreure-els-marges-i-les-fronteres/">
<amp-img src="https://exse.eyewated.com/pict/dd39682dc1123505-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/utilitzeu-css-per-extreure-els-marges-i-les-fronteres/">Utilitzeu CSS per extreure els marges i les fronteres</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/com-escriu-consultes-de-mitjans-css/">
<amp-img src="https://exse.eyewated.com/pict/4494c19ed3012f92-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-escriu-consultes-de-mitjans-css/">Com escriu consultes de mitjans CSS?</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/prefixos-del-venedor-de-css/">
<amp-img src="https://exse.eyewated.com/pict/dbab36fbadbf3679-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/prefixos-del-venedor-de-css/">Prefixos del venedor de CSS</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/com-sutilitza-el-posicionament-css-per-crear-dissenys-sense-taules/">
<amp-img src="https://exse.eyewated.com/pict/ca4194b55aa73239-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-sutilitza-el-posicionament-css-per-crear-dissenys-sense-taules/">Com s'utilitza el posicionament CSS per crear dissenys sense taules</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/avantatges-i-inconvenients-dels-estils-en-linia-en-css/">
<amp-img src="https://exse.eyewated.com/pict/806d8071a28c2f05-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/avantatges-i-inconvenients-dels-estils-en-linia-en-css/">Avantatges i inconvenients dels estils en línia en CSS</a></h3>
<div class="amp-related-meta">
Disseny web i Dev </div>
</div>
</div>
</div>
<div class="amp-related-wrapper">
<h2>See Newest</h2>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/7-grans-app-per-a-laprenentatge-dapple-tv/">
<amp-img src="https://exse.eyewated.com/pict/d5d7a47955012fd4-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/7-grans-app-per-a-laprenentatge-dapple-tv/">7 Grans app per a l'aprenentatge d'Apple TV</a></h3>
<div class="amp-related-meta">
Programari i aplicacions </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/que-es-un-reproductor-daudio-digital-dap/">
<amp-img src="https://exse.eyewated.com/pict/d5f68caa31713995-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/que-es-un-reproductor-daudio-digital-dap/">Què és un reproductor d'àudio digital (DAP)?</a></h3>
<div class="amp-related-meta">
Web i cerca </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/que-es-umadbro-es-el-mateix-que-you-mad-i-he-mad/">
<amp-img src="https://exse.eyewated.com/pict/fc1d9458a6df2f48-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/que-es-umadbro-es-el-mateix-que-you-mad-i-he-mad/">Què és 'UMADBRO'? És el mateix que "You Mad" i "He Mad '?</a></h3>
<div class="amp-related-meta">
Mitjà de comunicació social </div>
</div>
</div>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-fer-coses-divertides-amb-el-correu-electronic/">Com fer coses divertides amb el correu electrònic</a></h3>
<div class="amp-related-meta">
Correu electrònic i missatgeria </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/com-connectar-un-controlador-midi-a-lipad/">
<amp-img src="https://exse.eyewated.com/pict/b3d65fd384e431c9-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-connectar-un-controlador-midi-a-lipad/">Com connectar un controlador MIDI a l'iPad</a></h3>
<div class="amp-related-meta">
IPad </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/les-6-millores-taules-hoverboes-per-comprar-el-2018/">
<amp-img src="https://exse.eyewated.com/pict/9ff3946c0ea23158-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/les-6-millores-taules-hoverboes-per-comprar-el-2018/">Les 6 Millores Taules Hoverboes per Comprar el 2018</a></h3>
<div class="amp-related-meta">
Guies de compra </div>
</div>
</div>
</div>
<div class="amp-related-wrapper">
<h2>Sapid posts</h2>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/com-arreglar-kernelbase-dll-no-sha-trobat-o-hi-falten-errors/">
<amp-img src="https://exse.eyewated.com/pict/ad9d6a6c64d93915-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-arreglar-kernelbase-dll-no-sha-trobat-o-hi-falten-errors/">Com arreglar Kernelbase.dll No s'ha trobat o hi falten errors</a></h3>
<div class="amp-related-meta">
Windows </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/les-10-millors-aplicacions-de-missatgeria-mobil/">
<amp-img src="https://exse.eyewated.com/pict/df66279b8e0f344e-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/les-10-millors-aplicacions-de-missatgeria-mobil/">Les 10 millors aplicacions de missatgeria mòbil</a></h3>
<div class="amp-related-meta">
Programari i aplicacions </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/per-que-uber-es-tan-polemic/">
<amp-img src="https://exse.eyewated.com/pict/63ee9711df664095-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/per-que-uber-es-tan-polemic/">Per què Uber és tan polèmic</a></h3>
<div class="amp-related-meta">
Mitjà de comunicació social </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/com-installar-codecs-flash-steam-i-mp3-a-fedora-linux/">
<amp-img src="https://exse.eyewated.com/pict/59855b85cfcd3542-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-installar-codecs-flash-steam-i-mp3-a-fedora-linux/">Com instal·lar còdecs Flash, Steam i MP3 a Fedora Linux</a></h3>
<div class="amp-related-meta">
Linux </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/10-tendencies-de-publicacio-de-instagram-i-aplicacions-a-utilitzar/">
<amp-img src="https://exse.eyewated.com/pict/60556df9c5e034c2-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/10-tendencies-de-publicacio-de-instagram-i-aplicacions-a-utilitzar/">10 Tendències de publicació de Instagram i aplicacions a utilitzar</a></h3>
<div class="amp-related-meta">
Mitjà de comunicació social </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/com-obrir-i-iniciar-sessio-a-aim-en-el-correu-aim/">
<amp-img src="https://exse.eyewated.com/pict/91bfd64abf3c30ab-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-obrir-i-iniciar-sessio-a-aim-en-el-correu-aim/">Com obrir i iniciar sessió a AIM en el correu AIM</a></h3>
<div class="amp-related-meta">
Programari i aplicacions </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/com-es-pot-destacar-a-la-pestanya-explores-dinstagram/">
<amp-img src="https://exse.eyewated.com/pict/0d9e9dd925de3388-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-es-pot-destacar-a-la-pestanya-explores-dinstagram/">Com es pot destacar a la pestanya Explore's d'Instagram</a></h3>
<div class="amp-related-meta">
Mitjà de comunicació social </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/com-registrar-el-vostre-vehicle-en-linia/">
<amp-img src="https://exse.eyewated.com/pict/1e09965da9f33953-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-registrar-el-vostre-vehicle-en-linia/">Com registrar el vostre vehicle en línia</a></h3>
<div class="amp-related-meta">
Tech de cotxes </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/els-10-millors-jocs-de-pc-mes-populars/">
<amp-img src="https://exse.eyewated.com/pict/0625f02136bb3920-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/els-10-millors-jocs-de-pc-mes-populars/">Els 10 millors jocs de PC més populars</a></h3>
<div class="amp-related-meta">
Jocs </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/medal-of-honor-allied-assault-demo-per-a-pc/">
<amp-img src="https://exse.eyewated.com/pict/9854403937e2301a-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/medal-of-honor-allied-assault-demo-per-a-pc/">Medal of Honor: Allied Assault Demo per a PC</a></h3>
<div class="amp-related-meta">
Jocs </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/com-formatear-una-targeta-sd/">
<amp-img src="https://exse.eyewated.com/pict/66ad0fcd8fd0300f-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-formatear-una-targeta-sd/">Com formatear una targeta SD</a></h3>
<div class="amp-related-meta">
Windows </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/preguntes-frequeents-sobre-jocs-a-la-carta-de-xbox-360/">
<amp-img src="https://exse.eyewated.com/pict/31fc72c366af337a-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/preguntes-frequeents-sobre-jocs-a-la-carta-de-xbox-360/">Preguntes freqüents sobre jocs a la carta de Xbox 360</a></h3>
<div class="amp-related-meta">
Jocs </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/estalviar-temps-amb-plantilles-a-google-docs/">
<amp-img src="https://exse.eyewated.com/pict/5b68dfcf849e33e1-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/estalviar-temps-amb-plantilles-a-google-docs/">Estalviar temps amb plantilles a Google Docs</a></h3>
<div class="amp-related-meta">
Programari </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/com-utilitzar-els-camins-de-moviment-per-animar-els-grafics-de-powerpoint/">
<amp-img src="https://exse.eyewated.com/pict/c1e2d3947b88324f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/com-utilitzar-els-camins-de-moviment-per-animar-els-grafics-de-powerpoint/">Com utilitzar els camins de moviment per animar els gràfics de PowerPoint</a></h3>
<div class="amp-related-meta">
Programari </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/grand-theft-auto-san-andreas/">
<amp-img src="https://exse.eyewated.com/pict/3eb963b152d632fb-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/grand-theft-auto-san-andreas/">Grand Theft Auto: San Andreas</a></h3>
<div class="amp-related-meta">
Jocs </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ca.eyewated.com/american-sniper-revisio-de-discos-blu-ray/">
<amp-img src="https://exse.eyewated.com/pict/6682a85e77ec3c4d-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ca.eyewated.com/american-sniper-revisio-de-discos-blu-ray/">American Sniper - Revisió de discos Blu-ray</a></h3>
<div class="amp-related-meta">
Comentaris del producte </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 ca.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.193 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2019-10-03 21:41:56 -->
<!-- 0.002 -->