Si të krijoni një Layout 3-Column në CSS

CSS layout kërkon që ju të mendoni layout faqen tuaj te internetit si një e tërë, dhe pastaj të marrë pjesë dhe të vënë ato së bashku. Mësoni si të ndërtoni një paraqitje të thjeshtë me 3 kolona me CSS.

01 nga 09

Draw Layout juaj

J Kyrnin

Ju mund ta vizatoni paraqitjen tuaj në letër ose në një program grafike . Nëse tashmë keni një dizajn tela apo edhe dizajn më të gjerë, thjeshtosni atë në kutitë bazë që përbëjnë faqen. Ky dizajn që shoqëron këtë artikull ka tre kolona në zonën kryesore të përmbajtjes, si dhe një kokë dhe footer. Nëse shikoni nga afër, mund të shihni se të tre shtyllat nuk janë të barabarta në gjerësi.

Pasi ta keni tërhequr planin tuaj, mund të filloni të mendoni për përmasa. Ky dizajn shembull do të ketë dimensionet e mëposhtme themelore:

02 nga 09

Shkruani HTML / CSS themelore dhe Krijo një Element Kontenier

Meqë kjo faqe do të jetë një dokument i vlefshëm HTML, Filloni me një enë të zbrazët HTML

titulli> </ head> <body> </ body> </ html> <p> Shtoni në stilet CSS bazë për të <a href="https://sq.eyewated.com/perdorni-css-per-zero-out-your-margins-and-borders/">zhdukur kufijtë, kufijtë dhe paddings faqe</a> . Ndërsa ka <a href="https://sq.eyewated.com/get-to-know-cascading-style-sheets-me-kjo-css-cheat-sheet/">stile të</a> tjera <a href="https://sq.eyewated.com/get-to-know-cascading-style-sheets-me-kjo-css-cheat-sheet/">standarde CSS</a> për dokumente të reja, këto stile janë minimumi që ju nevojitet për të marrë një plan urbanistik të pastër. Shtoni ato në krye të dokumentit tuaj: </p> <style type = "text / css"> html, trupi {margin: 0px; mbushje: 0px; kufiri: 0px; } </ style> <p> Për të filluar ndërtimin e faqosjes, vihet në një element enë. Ndonjëherë ndodh që ju të mund të shpëtoheni më vonë nga kontejneri, por për shumicën e formave me gjerësi fikse, duke pasur elementin e enës, e bën më të lehtë për të menaxhuar nëpër shfletues të ndryshëm të uebit. Pra, në trup vendosni këtë: </p> <div id = "enë"> </ div> <p> Dhe në fletën e stilit CSS, vendosni: </p> #container {} <p> <strong>03 nga 09</strong> </p> <h3> Stili i kontejnerit </h3><p> Kontejneri përcakton se sa i gjerë do të jetë përmbajtja e faqes së internetit, si dhe çdo kufij rreth jashtme dhe mbushje brenda. Për këtë dokument, kontejneri është 870px i gjerë me një kanal 20 piksel në të majtë. Rrjedha është ngritur me një stil diferencë, por mbushja në enë është zeroed për të parandaluar çdo element të jetë aq i gjerë sa enë. </p> #container {width: 870px; margjina: 0 0 0 20px; / * lart e djathtë në fund të majtë * / mbushje: 0; } <p> Nëse e ruan dokumentin tani, do të jetë e vështirë të shohësh enën sepse nuk ka asgjë në të. Nëse shtoni tekstin e vendndodhjes, do të mund ta shihni më qartë elementin e kontejnerit. </p> <p> <strong>04 nga 09</strong> </p> <h3> Përdorni një Titull Titull për Header </h3><p> Si vendosni të stiloni rreshtin e kokës varet shumë nga ajo që është në të. Nëse rreshtimi i kokës do të ketë një logo dhe titull, atëherë përdorimi i një titulli titull (<h1>) ka më shumë kuptim se sa duke përdorur një <div>. Ju mund të stilit të titullit në të njëjtën mënyrë që ju të stilit të një div, dhe ju shmangni tags pa lidhje. </p> <p> HTML për rreshtin e kokës shkon në krye të enës dhe duket kështu: </p> <h1> Rreshti i kokës sime </ h1> <p> Pastaj, për të vendosur stilet në të, një kufi i kuq u shtua në fund kështu që ju mund të shihni se ku përfundon, kufijtë dhe mbushje u zeroed, gjerësia e vendosur në 100% dhe lartësia deri në 150px: </p> #container h1 {margin: 0; mbushje: 0; gjerësia: 100%; lartësia: 150px; noton: majtas; fundja e kufirit: # c00 solid 3px; } <p> Mos harroni të notoj këtë element me noton: majtas; pronës. Çelësi për të shkruar Layouts CSS është të notoj gjithçka - madje edhe gjëra që janë të njëjta gjerësi si enë. Në këtë mënyrë, gjithmonë e dini se ku do të shtrihen elementet në faqe. </p> <p> Një <a href="https://sq.eyewated.com/cila-eshte-selektuesi-pasardhes-i-css/">përzgjedhës pasardhës i CSS</a> aplikohet vetëm për elementët H1 që janë brenda elementit #container. </p> <p> <strong>05 nga 09</strong> </p> <h3> Për të marrë tri kolona, ​​filloni duke ndërtuar dy kolona </h3><p> Kur ndërtoni një shtrirje me tre kolona me CSS, duhet të ndani paraqitjen tuaj në grupe prej dy. Pra, për këtë shtrirje me tre kolona, ​​kolona e mesme dhe e djathtë dhe grupuar dhe vendosur pranë kolonës së majtë në një shtrirje me dy kolona ku kolona e majtë është 250px e gjerë dhe kolona e djathtë është 610px e gjerë (300 secila për dy kolonat , plus 10px për hendekun mes tyre). </p> <p> HTML duket kështu: </p> <div id = "col1"> <p> Aplikacioni është i pakuptimtë. Ju mund të merrni një maksimum të vogël të vogël, por ju do të keni një ulje të mirë. Në reprehenderit në voluptate quis nostrud ushtrimi eu fugiat nulla pariatur. Në këtë mënyrë, ju do të keni një rezultat më të ulët, por jo më pak se </ p> </ div> <div id = "col2outer"> <p> Ju lutemi dhe të ndjehen keq. Kjo është një e keqe e madhe dhe e pandryshueshme. </ P> </ div> <p> Teksti i placeholder në kolona i bën ata më të dukshëm gjatë testimit. CSS duket kështu: </p> #container # col1 {width: 250px; noton: majtas; } #container # col2outer {width: 610px; noton: e drejtë; margjina: 0; mbushje: 0; } <p> Kolona në të majtë fluturohet në të majtë, ndërsa tjetra lëviz në të djathtë. Për shkak se gjerësia e përgjithshme e të dy kolonave është 860px, ekziston një hendek 10px mes tyre. </p> <p> <strong>06 nga 09</strong> </p> <h3> Shto dy kolona brenda shtyllës së dytë të gjerë </h3><p> Për të krijuar tre kolona, ​​shtoni dy div brenda kolonës së dytë të dytë, ashtu siç keni shtuar 2 div brenda kolonës së enëve në hapin e fundit. HTML duket kështu: </p> <div id = "col2outer"> <div id = "col2mid"> <p> Ju faleminderit shumë pak, por nuk bëjmë më të mirën e përkohshme të punës. Ju lutemi dhe të ndjehen keq. </ P> </ div> <div id = "col2side"> </ p> </ span> </ span> </ span> </ span> </ div> </ div> </ div> </ div> </ div> Ullam corpus suscipit laboriosam, magnam aliquam quaerat voluptatem. </ P> </ div> </ span> </ div> </ div> </ div> </ div> <p> Dhe CSS duket kështu: </p> # col2outer # col2mid {width: 300px; noton: majtas; } # col2outer # col2side {width: 300px; noton: e drejtë; } <p> Meqë këto dy kuti të gjera 300px janë brenda një kuti të gjerë 610px, përsëri do të ketë një kanal 10px mes tyre. </p> <p> <strong>07 nga 09</strong> </p> <h3> Shtoni në Footer </h3><p> Tani që pjesa tjetër e faqes është vetëquajtur, ju mund të shtoni në footer. Përdorni divin e fundit me një id "footer" dhe shtoni përmbajtje në mënyrë që ta shihni atë. Ju gjithashtu mund të shtoni një kufi në krye, kështu që ju do të dini se ku fillon. </p> <p> HTML: </p> <div id = "footer"> <p> Copyright © 2017 </ p> </ div> <p> CSS: </p> #container #footer {float: left; gjerësia: 870px; kufiri i sipërm: # c00 solid 3px; } <p> <strong>08 nga 09</strong> </p> <h3> Shtoni në Stilet dhe Përmbajtjet tuaja personale </h3><p> Tani që keni përfunduar faqosjen, mund të filloni të shtoni stilet dhe përmbajtjen tuaj personale. Mos harroni se kufijtë në header dhe footer janë shtuar për të treguar seksione layout, jo në mënyrë specifike për dizajn. </p> <p> <strong>09 nga 09</strong> </p> <h3> HTML / CSS përfundimtar </h3><p> Këtu është i gjithë dokumenti, HTML dhe CSS: </p> <! DOCTYPE html PUBLIKE "- // 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 =" Përmbajtja-Type "content =" text / html; charset = utf-8 "/> <title> titulli> <style type = "text / css"> html, trupi {margin: 0px; mbushje: 0px; kufiri: 0px; } #container {width: 870px; margjina: 0 0 0 20px; / * lart e djathtë në fund të majtë * / mbushje: 0; background-color: #fff; } #container h1 {margin: 0; mbushje: 0; gjerësia: 100%; lartësia: 150px; noton: majtas; fundja e kufirit: # c00 solid 3px; } #container # col1 {width: 250px; noton: majtas; } #container # col2outer {width: 610px; noton: e drejtë; margjina: 0; mbushje: 0; } # col2outer # col2mid {width: 300px; noton: majtas; } # col2outer # col2side {width: 300px; noton: e drejtë; } #container #footer {float: left; gjerësia: 870px; kufiri i sipërm: # c00 solid 3px; </ h1> <div id = "col1"> </ p> <b> </ h1> <div id = "col1"> </ h1> <body> <div id = "container"> <h1> </ div> <div id = "col2side"> <p> </ div> </ div> </ div> </ div> <div id = "col2outer"> <div id = "col2mid" </ Div> </ div> </ div> </ div> </ div> </ span> </ div> </ div> </div> <div class="amp-related-wrapper"> <h2>Alike posts</h2> <div class="amp-related-content"> <a href="https://sq.eyewated.com/prefixet-e-shitesit-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://sq.eyewated.com/prefixet-e-shitesit-css/">Prefixet e shitësit CSS</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/si-ta-ndryshoni-fontin-ne-faqet-e-internetit-duke-perdorur-css/"> <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://sq.eyewated.com/si-ta-ndryshoni-fontin-ne-faqet-e-internetit-duke-perdorur-css/">Si ta ndryshoni fontin në faqet e internetit duke përdorur CSS</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/si-te-shtoni-linjat-e-brendshme-kufijte-ne-nje-tabele-me-css/"> <amp-img src="https://exse.eyewated.com/pict/7f87f6e4dd1c2fa7-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/si-te-shtoni-linjat-e-brendshme-kufijte-ne-nje-tabele-me-css/">Si të shtoni linjat e brendshme (kufijtë) në një tabelë me CSS</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/z-index-ne-css/"> <amp-img src="https://exse.eyewated.com/pict/a94683f8de32307d-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/z-index-ne-css/">Z-Index në CSS</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/diferenca-midis-css2-dhe-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://sq.eyewated.com/diferenca-midis-css2-dhe-css3/">Diferenca midis CSS2 dhe CSS3</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/nje-pasqyre-e-trashegimise-css/"> <amp-img src="https://exse.eyewated.com/pict/357261af990f3b51-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/nje-pasqyre-e-trashegimise-css/">Një pasqyrë e Trashëgimisë CSS</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/mesoni-rreth-opacity-css3/"> <amp-img src="https://exse.eyewated.com/pict/9f46defb47b433c7-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/mesoni-rreth-opacity-css3/">Mësoni Rreth Opacity CSS3</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/si-te-ndryshoni-ngjyrat-e-faqeve-te-internetit-me-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://sq.eyewated.com/si-te-ndryshoni-ngjyrat-e-faqeve-te-internetit-me-css/">Si të ndryshoni ngjyrat e faqeve të internetit me CSS</a></h3> <div class="amp-related-meta"> Web Design & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/si-te-fut-nje-koment-css/"> <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://sq.eyewated.com/si-te-fut-nje-koment-css/">Si të Fut një Koment CSS</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://sq.eyewated.com/luaj-flac-audio-files-ne-iphone-ne-ios-10-dhe-me-heret/"> <amp-img src="https://exse.eyewated.com/pict/bbde0b1f38f83208-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/luaj-flac-audio-files-ne-iphone-ne-ios-10-dhe-me-heret/">Luaj FLAC Audio Files në iPhone në iOS 10 dhe më herët</a></h3> <div class="amp-related-meta"> IPhone dhe iPod </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/kuptimi-i-formatit-avchd-videokamera/"> <amp-img src="https://exse.eyewated.com/pict/56429a744b3c33cb-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/kuptimi-i-formatit-avchd-videokamera/">Kuptimi i formatit AVCHD Videokamera</a></h3> <div class="amp-related-meta"> Kamera dixhitale </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/si-te-fshini-llogarine-tuaj-te-uber-per-te-mire/"> <amp-img src="https://exse.eyewated.com/pict/41c34ace4b23342a-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/si-te-fshini-llogarine-tuaj-te-uber-per-te-mire/">Si të fshini llogarinë tuaj të Uber për të mirë</a></h3> <div class="amp-related-meta"> E re dhe e ardhshme </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/nymgo-dhe-dirt-thirrje-te-lira-nderkombetare/"> <amp-img src="https://exse.eyewated.com/pict/546b0cd6139934ae-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/nymgo-dhe-dirt-thirrje-te-lira-nderkombetare/">Nymgo dhe Dirt Thirrje të lira ndërkombëtare</a></h3> <div class="amp-related-meta"> Email & Mesazhimi </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/royalty-free-muzike-dhe-efektet-sound-resurset-per-animators/"> <amp-img src="https://exse.eyewated.com/pict/da729606408733f1-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/royalty-free-muzike-dhe-efektet-sound-resurset-per-animators/">Royalty-Free Muzikë dhe Efektet Sound Resurset për Animators</a></h3> <div class="amp-related-meta"> Program </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/si-te-caktivizoni-kutine-e-pamjes-ne-windows-mail-dhe-outlook/"> <amp-img src="https://exse.eyewated.com/pict/c6413d7927804507-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/si-te-caktivizoni-kutine-e-pamjes-ne-windows-mail-dhe-outlook/">Si të çaktivizoni kutinë e pamjes në Windows Mail dhe Outlook</a></h3> <div class="amp-related-meta"> Email & Mesazhimi </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>Sapid posts</h2> <div class="amp-related-content"> <a href="https://sq.eyewated.com/vendos-tekst-ne-nje-rruge-ose-ne-nje-forme-ne-adobe-photoshop-cc/"> <amp-img src="https://exse.eyewated.com/pict/974b0107d2ff30f0-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/vendos-tekst-ne-nje-rruge-ose-ne-nje-forme-ne-adobe-photoshop-cc/">Vendos tekst në një rrugë ose në një formë në Adobe Photoshop CC</a></h3> <div class="amp-related-meta"> Program </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/si-te-instaloni-dropbox-ne-ubuntu/"> <amp-img src="https://exse.eyewated.com/pict/ba93e28f1bc431d4-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/si-te-instaloni-dropbox-ne-ubuntu/">Si të Instaloni Dropbox Në Ubuntu</a></h3> <div class="amp-related-meta"> Linux </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/21-lojerat-me-te-mira-buxhetore-per-pc/"> <amp-img src="https://exse.eyewated.com/pict/b510c63734ac336f-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/21-lojerat-me-te-mira-buxhetore-per-pc/">21 Lojërat më të mira buxhetore për PC</a></h3> <div class="amp-related-meta"> Kumar </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/si-te-fshini-apps-nga-iphone-juaj/"> <amp-img src="https://exse.eyewated.com/pict/eaa3abe748a0326e-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/si-te-fshini-apps-nga-iphone-juaj/">Si të fshini Apps nga iPhone juaj</a></h3> <div class="amp-related-meta"> IPhone dhe iPod </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/si-te-hyni-ne-nje-llogari-mail-falas-gmx-ne-mac-os-x-mail/"> <amp-img src="https://exse.eyewated.com/pict/26ccf7d1a7e832c2-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/si-te-hyni-ne-nje-llogari-mail-falas-gmx-ne-mac-os-x-mail/">Si të hyni në një Llogari Mail falas GMX në Mac OS X Mail</a></h3> <div class="amp-related-meta"> Macs </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/beni-tekstin-te-dale-ne-photoshop-elements/"> <amp-img src="https://exse.eyewated.com/pict/42f212324b3431d6-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/beni-tekstin-te-dale-ne-photoshop-elements/">Bëni tekstin të dalë në Photoshop Elements</a></h3> <div class="amp-related-meta"> Program </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/si-te-dergoni-nje-shtojce-te-dokumentit-me-outlook-com/"> <amp-img src="https://exse.eyewated.com/pict/0cf3cf7e15e833c8-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/si-te-dergoni-nje-shtojce-te-dokumentit-me-outlook-com/">Si të dërgoni një shtojcë të dokumentit me Outlook.com</a></h3> <div class="amp-related-meta"> Email & Mesazhimi </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/metodat-e-sanitizimit-te-te-dhenave/"> <amp-img src="https://exse.eyewated.com/pict/8641f63d8fb14826-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/metodat-e-sanitizimit-te-te-dhenave/">Metodat e Sanitizimit të të Dhënave</a></h3> <div class="amp-related-meta"> Windows </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/perdorimi-i-kutise-se-preferencave-te-kursimit-te-energjise/"> <amp-img src="https://exse.eyewated.com/pict/bbf723177954353b-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/perdorimi-i-kutise-se-preferencave-te-kursimit-te-energjise/">Përdorimi i Kutisë së Preferencave të Kursimit të Energjisë</a></h3> <div class="amp-related-meta"> Macs </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/vendosni-dhe-shihni-nje-id-mjekesor-te-iphone/"> <amp-img src="https://exse.eyewated.com/pict/21ba00d8f96230c1-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/vendosni-dhe-shihni-nje-id-mjekesor-te-iphone/">Vendosni dhe shihni një ID mjekësor të iPhone</a></h3> <div class="amp-related-meta"> IPhone dhe iPod </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/imac-upgrade-guide/"> <amp-img src="https://exse.eyewated.com/pict/3cd469520e2c3023-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/imac-upgrade-guide/">IMac Upgrade Guide</a></h3> <div class="amp-related-meta"> Macs </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/kerkesat-e-shpejtesise-se-internetit-per-transmetimin-e-videos/"> <amp-img src="https://exse.eyewated.com/pict/5dd83d4e9046378f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/kerkesat-e-shpejtesise-se-internetit-per-transmetimin-e-videos/">Kërkesat e shpejtësisë së internetit për transmetimin e videos</a></h3> <div class="amp-related-meta"> Internet & Rrjet </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/diy-siguria-e-teknologjise-se-larte-per-banesen-tuaj/"> <amp-img src="https://exse.eyewated.com/pict/616b99ab38f338cb-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/diy-siguria-e-teknologjise-se-larte-per-banesen-tuaj/">DIY Siguria e teknologjisë së lartë për banesën tuaj</a></h3> <div class="amp-related-meta"> E re dhe e ardhshme </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/marvel-ultimate-aleanca-2-cheats-xbox-360/"> <amp-img src="https://exse.eyewated.com/pict/fe05c8f44e993817-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/marvel-ultimate-aleanca-2-cheats-xbox-360/">Marvel: Ultimate Aleanca 2 Cheats-Xbox 360</a></h3> <div class="amp-related-meta"> Kumar </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/si-te-beni-outlook-dergoni-dhe-te-merrni-periodikisht-dhe-ne-fillimin/"> <amp-img src="https://exse.eyewated.com/pict/c1131a1c2e7530b5-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/si-te-beni-outlook-dergoni-dhe-te-merrni-periodikisht-dhe-ne-fillimin/">Si të Bëni Outlook dërgoni dhe të merrni periodikisht dhe në fillimin</a></h3> <div class="amp-related-meta"> Email & Mesazhimi </div> </div> </div> <div class="amp-related-content"> <a href="https://sq.eyewated.com/resident-evil-4-mashtrojne-per-ps2/"> <amp-img src="https://exse.eyewated.com/pict/4063de3b2276336c-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://sq.eyewated.com/resident-evil-4-mashtrojne-per-ps2/">Resident Evil 4 mashtrojnë për PS2</a></h3> <div class="amp-related-meta"> Kumar </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 sq.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.304 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2019-10-04 00:05:51 --> <!-- 0.003 -->