CSS mizanpajı, web sitesi düzeninizi bir bütün olarak düşünmenizi ve ardından parçaları alıp birleştirmenizi gerektirir. CSS ile basit 3 sütun düzenini nasıl oluşturacağınızı öğrenin.
01/09
Yerleşiminizi Çizin J Kyrnin Düzeninizi kağıda veya grafik programında çizebilirsiniz. Zaten bir tel çerçeve veya daha geniş bir tasarıma sahipseniz, siteyi oluşturan temel kutulara basitleştirin. Bu makaleye eşlik eden bu tasarım, ana içerik alanında, ayrıca bir üstbilgi ve altbilgi olmak üzere üç sütuna sahiptir. Eğer yakından bakarsanız, üç sütunun genişliğe eşit olmadığını görebilirsiniz.
Düzeninizi çizdikten sonra, boyutları düşünmeye başlayabilirsiniz. Bu örnek tasarım aşağıdaki temel boyutlara sahip olacak:
En fazla 900 piksel genişliğinde Solda 20 px oluk Sütunlar ve satırlar arasında 10 px 250px, 300px ve 300px genişliğindeki sütunlar En üst sırada 150px boyunda Alt sıra 100px boyunda 02/09
Temel HTML / CSS Yaz ve Bir Kapsayıcı Öğesi Oluştur Bu sayfa geçerli bir HTML belgesi olacağından, boş bir HTML kabıyla başlayın
Untitled Document </ başlık> </ head> <body> </ body> </ html> <p> <a href="https://tr.eyewated.com/kenar-bosluklarinizi-ve-kenarliklarinizi-sifirlamak-icin-cssyi-kullanin/">Sayfa kenar boşluklarını, kenarlıkları ve dolguları sıfırlamak</a> için temel CSS stillerini ekleyin. Yeni belgeler için başka <a href="https://tr.eyewated.com/bu-css-cheat-sheet-ile-basamakli-stil-sayfalarini-tanima/">standart CSS stilleri</a> olsa da, bu stiller temiz bir düzen elde etmek için gereken minimum değerlerdir. Bunları belgenizin başına ekleyin: </p>
<stil türü = "metin / css"> html, gövde {marj: 0px; dolgu malzemesi: 0px; kenarlık: 0px; } </ style> <p> Düzeni oluşturmaya başlamak için bir kapsayıcı öğeye koyun. Bazen kapsayıcıdan daha sonra kurtulabileceğiniz, ancak sabit genişlikli düzenlerin çoğu için, kapsayıcı öğenin farklı Web tarayıcılarında yönetilmesini kolaylaştırdığı görülür. Yani vücutta şunu koydu: </p>
<div id = "container"> </ div> <p> Ve CSS stil sayfasında şunları yapın: </p>
#container {} <p> <strong>03/09</strong> </p>
<h3> Kapsayıcıyı Stil Oluştur </h3><p> Kap, web sayfası içeriğinin ne kadar geniş olacağını ve ayrıca içerideki kenarların ve içerideki dolguların ne kadar genişleyeceğini tanımlar. Bu belge için kap, solda 20 piksel oluklu 870 piksel genişliğindedir. Cilt payı bir kenar boşluğu stili ile oluşturulur, ancak kabın üzerindeki dolgu, öğelerin kabın kadar geniş olmasını önlemek için sıfırlanır. </p>
#container {genişlik: 870 piksel; kenar boşluğu: 0 0 0 20px; / * sağ üst sol * / dolgu: 0; } <p> Belgenizi şimdi kaydederseniz, kapsayıcıyı görmesi zor olacaktır çünkü içinde hiçbir şey yoktur. Yer tutucu metni eklerseniz, konteyner öğesini daha net bir şekilde görebileceksiniz. </p>
<p> <strong>04/09</strong> </p>
<h3> Başlık için bir Başlık Etiketi kullanın </h3><p> Üstbilgi satırını stillemeye nasıl karar verdiğinizde ne olduğuna dair çok şey var. Başlık satırı sadece bir grafik grafik ve başlık olacaksa, bir başlık etiketi (<h1>) kullanarak bir <div> kullanmaktan daha mantıklıdır. Başlığı, bir stil stiliyle aynı şekilde stilleyebilir ve gereksiz etiketlerden kaçınabilirsiniz. </p>
<p> Başlık satırı için HTML, kapsayıcının üst kısmına gider ve şöyle görünür: </p>
<h1> Başlık Satırı </ h1> <p> Daha sonra, üzerine stilleri ayarlamak için, altta kırmızı bir sınır eklendi, böylece nerede bittiğini görebilecektiniz, kenar boşlukları ve dolgu sıfırlandı, genişlik% 100 ve yükseklik 150 piksele ayarlandı: </p>
#container h1 {margin: 0; dolgu malzemesi: 0; genişlik:% 100; yükseklik: 150px; yüzer: sol; kenar-alt: # c00 katı 3px; } <p> Bu öğeyi float ile yüzmeyi unutmayın: sol; özelliği. CSS mizanpajlarını yazmanın anahtarı, her şeyi yüzdürmektir - hatta konteyner ile aynı genişlikte olan şeyler. Böylece, her zaman öğelerin sayfada nerede duracağını biliyorsunuz. </p>
<p> Bir <a href="https://tr.eyewated.com/css-descendant-secici-nedir/">CSS soyundan gelen seçici,</a> stilleri #container öğesinin içindeki H1 öğelerine uygular. </p>
<p> <strong>05/09</strong> </p>
<h3> Üç Sütun Almak İçin, İki Sütun Yaparak Başlayın </h3><p> CSS ile üç sütunlu bir yerleşim oluşturduğunuzda, düzeninizi iki kişilik gruplara ayırmanız gerekir. Bu üç sütun düzeni için, orta ve sağ sütun için ve sol sütunun 250 piksel genişliğinde ve sağ sütun 610 piksel genişliğinde (iki sütun için 300) iki sütunlu bir düzende sol sütunun yanına yerleştirilir ve gruplanır ve artı aralarında oluk için 10px). </p>
<p> HTML böyle görünüyor: </p>
<div id = "col1"> <p> Ut aliquip ex ea commodo sonuçlanır. Velit esse cillum dolore ut enim ad minim veniam, lorem ipsum dolor sit amet. Voluptate quis nostrud exercitation eu fugiat nulla pariatur içinde reprehenderit. Velit esse cillum dolore ullamco emeği nüansal esprilerle sonuçlanır. </ P> </ div> <div id = "col2outer"> <p> En küçük ve en önemlisi, en ufak bir şeydir. Evet, labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. </ P> </ div> <p> Sütunlardaki yer tutucu metin, test edilirken daha görünür olmasını sağlar. CSS şöyle görünüyor: </p>
#container # col1 {genişlik: 250 piksel; yüzer: sol; } #container # col2outer {genişlik: 610 piksel; Sağa çık; kenar boşluğu: 0; dolgu malzemesi: 0; } <p> Soldaki sütun sola, diğeri sağa doğru süzülür. Her iki sütunun toplam genişliği 860px olduğundan, aralarında 10px oluk var. </p>
<p> <strong>06/09</strong> </p>
<h3> Geniş İkinci Sütunun İçine İki Sütun Ekleme </h3><p> Üç sütunu oluşturmak için, son adımda kap sütununun içine 2 div eklediğiniz gibi, daha geniş ikinci sütunun içine iki div ekleyin. HTML böyle görünüyor: </p>
<div id = "col2outer"> <div id = "col2mid"> <p> Reklam minim vmaamını en üst düzeye çıkarın, eiusmod tempor incididunt ullamco laboris nisi. Evet, labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. </ P> </ div> <div id = "col2side"> <p> Nam libero tempore, quia voluptas, aspernatur dicta sunt explicabo'ya oturur. Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaca earum rerum hic tenetur bir sapiente delectus, sed ut perspiciatis unde omnis tempora incidunt ut labore ve dolore. </ P> </ div> </ div> <p> Ve CSS şöyle görünüyor: </p>
# col2outer # col2mid {genişlik: 300 piksel; yüzer: sol; } # col2outer # col2side {genişlik: 300 piksel; Sağa çık; } <p> Bu iki 300px geniş kutu 610 piksel genişliğinde bir kutu içinde olduğundan, yine 10px'lik bir oluk olacaktır. </p>
<p> <strong>07/09</strong> </p>
<h3> Altbilgiye Ekle </h3><p> Artık sayfanın geri kalanı stillenmiş, altbilgiye ekleyebilirsiniz. Bir "altbilgi" kimliğine sahip son bir div kullanın ve içeriği görebilmeniz için içerik ekleyin. En üstte bir sınır da ekleyebilirsiniz, böylece nerede başladığını bilirsiniz. </p>
<p> HTML: </p>
<div id = "altbilgi"> <p> Copyright © 2017 </ p> </ div> <p> CSS: </p>
#container #footer {float: left; genişlik: 870 piksel; kenarlık: # c00 katı 3px; } <p> <strong>08/09</strong> </p>
<h3> Kişisel Stillerinizi ve İçeriğinizi Ekleme </h3><p> Artık düzen bittiğinde, kendi kişisel stillerinizi ve içeriğinizi eklemeye başlayabilirsiniz. Özellikle tasarım için değil, düzen bölümlerini göstermek için üstbilgi ve altbilgideki kenarlıkların eklendiğini unutmayın. </p>
<p> <strong>09/09</strong> </p>
<h3> Son HTML / CSS </h3><p> İşte tüm belge, HTML ve 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 =" İçerik Türü "content =" text / html; charset = utf-8 "/> <title> Untitled Document </ title> <style type = "text / css"> html, body {kenar boşluğu: 0px; dolgu malzemesi: 0px; kenarlık: 0px; } #container {genişlik: 870 piksel; kenar boşluğu: 0 0 0 20px; / * sağ üst sol * / dolgu: 0; arkaplan rengi: #fff; } #container h1 {margin: 0; dolgu malzemesi: 0; genişlik:% 100; yükseklik: 150px; yüzer: sol; kenar-alt: # c00 katı 3px; } #container # col1 {genişlik: 250 piksel; yüzer: sol; } #container # col2outer {genişlik: 610 piksel; Sağa çık; kenar boşluğu: 0; dolgu malzemesi: 0; } # col2outer # col2mid {genişlik: 300 piksel; yüzer: sol; } # col2outer # col2side {genişlik: 300 piksel; Sağa çık; } #container #footer {float: left; genişlik: 870 piksel; kenarlık: # c00 katı 3px; } </ style> </ head> <body> <div id = "container"> <h1> Başlığım Satır </ h1> <div id = "col1"> <p> Utquip ex ea commodo olur. </ p> </ div> <div id = "col2outer"> <div id = "col2mid"> <p> Reklam minim veniamı yarat. </ p> </ div> <div id = "col2side"> <p> Nam libero tempore. </ P> </ div> </ div> <div id = "altbilgi"> <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://tr.eyewated.com/css-kalitimina-genel-bir-bakis/">
<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://tr.eyewated.com/css-kalitimina-genel-bir-bakis/">CSS Kalıtımına Genel Bir Bakış</a></h3>
<div class="amp-related-meta">
Web Tasarımı ve Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/import-arasindaki-fark-nedir-ve-css-icin-baglanti-nedir/">
<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://tr.eyewated.com/import-arasindaki-fark-nedir-ve-css-icin-baglanti-nedir/">@import arasındaki fark nedir ve CSS için bağlantı nedir?</a></h3>
<div class="amp-related-meta">
Web Tasarımı ve Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/cssde-ne-anlama-geliyor/">
<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://tr.eyewated.com/cssde-ne-anlama-geliyor/">CSS'de ne anlama geliyor?</a></h3>
<div class="amp-related-meta">
Web Tasarımı ve Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/css-temizle-oezelligini-anlama/">
<amp-img src="https://exse.eyewated.com/pict/61ccce8c56663422-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/css-temizle-oezelligini-anlama/">CSS Temizle Özelliğini Anlama</a></h3>
<div class="amp-related-meta">
Web Tasarımı ve Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/merkez-goeruentueleri-ve-diger-html-nesneleri-icin-cssyi-kullanin/">
<amp-img src="https://exse.eyewated.com/pict/9890204b2b7b31a6-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/merkez-goeruentueleri-ve-diger-html-nesneleri-icin-cssyi-kullanin/">Merkez Görüntüleri ve Diğer HTML Nesneleri için CSS'yi kullanın</a></h3>
<div class="amp-related-meta">
Web Tasarımı ve Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/css-ve-javascript-ile-metin-veya-resimleri-goesterme-ve-gizleme/">
<amp-img src="https://exse.eyewated.com/pict/696c800020b23383-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/css-ve-javascript-ile-metin-veya-resimleri-goesterme-ve-gizleme/">CSS ve JavaScript ile Metin veya Resimleri Gösterme ve Gizleme</a></h3>
<div class="amp-related-meta">
Web Tasarımı ve Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/css-ile-olusturulmus-bir-web-sayfasi-olusturma/">
<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://tr.eyewated.com/css-ile-olusturulmus-bir-web-sayfasi-olusturma/">CSS ile Oluşturulmuş Bir Web Sayfası Oluşturma</a></h3>
<div class="amp-related-meta">
Web Tasarımı ve Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/css-kullanarak-bir-tablo-ortaya-basit-bir-yol/">
<amp-img src="https://exse.eyewated.com/pict/e7f8d4ffa9972f21-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/css-kullanarak-bir-tablo-ortaya-basit-bir-yol/">CSS Kullanarak Bir Tablo Ortaya Basit Bir Yol</a></h3>
<div class="amp-related-meta">
Web Tasarımı ve Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/span-ve-div-html-oegeleri-nasil-kullanilir/">
<amp-img src="https://exse.eyewated.com/pict/fcec918b16533154-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/span-ve-div-html-oegeleri-nasil-kullanilir/">Span ve Div HTML Öğeleri Nasıl Kullanılır</a></h3>
<div class="amp-related-meta">
Web Tasarımı ve Dev </div>
</div>
</div>
</div>
<div class="amp-related-wrapper">
<h2>See Newest</h2>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/ne-kadar-veri-i%CC%87htiyacim-var/">
<amp-img src="https://exse.eyewated.com/pict/fddac179ee723716-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/ne-kadar-veri-i%CC%87htiyacim-var/">Ne Kadar Veri İhtiyacım Var?</a></h3>
<div class="amp-related-meta">
İnternette arama </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/sanal-koeylueler-son/">
<amp-img src="https://exse.eyewated.com/pict/074951e8f8963e8e-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/sanal-koeylueler-son/">Sanal Köylüler: Son</a></h3>
<div class="amp-related-meta">
Kumar </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/windows-icin-icq-7yi-indirin/">
<amp-img src="https://exse.eyewated.com/pict/6f89e2bce5b13243-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/windows-icin-icq-7yi-indirin/">Windows için ICQ 7'yi indirin</a></h3>
<div class="amp-related-meta">
Yazılım ve Uygulamalar </div>
</div>
</div>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/epsonun-perfection-v330-fotograf-tarayici/">Epson'un Perfection V330 Fotoğraf Tarayıcı</a></h3>
<div class="amp-related-meta">
Ürün İncelemeleri </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/ev-sinema-sistemi-hoparloer-arizasi/">
<amp-img src="https://exse.eyewated.com/pict/62a0413bb75d34e0-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/ev-sinema-sistemi-hoparloer-arizasi/">Ev Sinema Sistemi Hoparlör Arızası</a></h3>
<div class="amp-related-meta">
Ev tiyatrosu </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/nintendo-3ds-xl-bir-ac-adaptoer-ile-geliyor-mu/">
<amp-img src="https://exse.eyewated.com/pict/c59bdc5f112136f2-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/nintendo-3ds-xl-bir-ac-adaptoer-ile-geliyor-mu/">Nintendo 3DS XL bir AC adaptör ile geliyor mu?</a></h3>
<div class="amp-related-meta">
Kumar </div>
</div>
</div>
</div>
<div class="amp-related-wrapper">
<h2>Sapid posts</h2>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/windows-emailde-otomatik-olarak-i%CC%87mza-ekleme/">Windows Email'de Otomatik Olarak İmza Ekleme</a></h3>
<div class="amp-related-meta">
E-posta ve Mesajlaşma </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/prvke-pack-maceraci-bir-kameramanin-rueyasi/">
<amp-img src="https://exse.eyewated.com/pict/0fc5e7d06e8239ca-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/prvke-pack-maceraci-bir-kameramanin-rueyasi/">PRVKE Pack, Maceracı Bir Kameramanın Rüyası</a></h3>
<div class="amp-related-meta">
Ürün İncelemeleri </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/photoshop-cc-2017de-kirmizi-goezue-nasil-el-ile-kaldirma/">
<amp-img src="https://exse.eyewated.com/pict/097df366449c2ef9-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/photoshop-cc-2017de-kirmizi-goezue-nasil-el-ile-kaldirma/">Photoshop CC 2017'de Kırmızı Gözü Nasıl El ile Kaldırma</a></h3>
<div class="amp-related-meta">
Yazılım </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/sony-2014-15-icin-uec-yeni-es-ev-sinemasi-alicisini-acikladi/">
<amp-img src="https://exse.eyewated.com/pict/0faa595327b4334c-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/sony-2014-15-icin-uec-yeni-es-ev-sinemasi-alicisini-acikladi/">Sony, 2014/15 için Üç Yeni ES Ev Sineması Alıcısını Açıkladı</a></h3>
<div class="amp-related-meta">
Ürün İncelemeleri </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/microsoft-paint-3d-nedir/">
<amp-img src="https://exse.eyewated.com/pict/282d921fa41533b4-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/microsoft-paint-3d-nedir/">Microsoft Paint 3D Nedir?</a></h3>
<div class="amp-related-meta">
Yeni ve Sonraki </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/php-kullanarak-bircok-belgedeki-html-nasil-eklenir/">
<amp-img src="https://exse.eyewated.com/pict/a0bdfad37a7c3575-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/php-kullanarak-bircok-belgedeki-html-nasil-eklenir/">PHP Kullanarak Birçok Belgedeki HTML Nasıl Eklenir?</a></h3>
<div class="amp-related-meta">
Web Tasarımı ve Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/macin-sueruecuesuenue-klonlamak-icin-disk-yardimci-programini-kullanma/">
<amp-img src="https://exse.eyewated.com/pict/39b49c6015283920-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/macin-sueruecuesuenue-klonlamak-icin-disk-yardimci-programini-kullanma/">Mac'in Sürücüsünü Klonlamak için Disk Yardımcı Programını Kullanma</a></h3>
<div class="amp-related-meta">
Mac'ler </div>
</div>
</div>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/2018-yilinda-satin-alinacak-14-en-i%CC%87yi-android-kiliflari/">2018 yılında satın alınacak 14 En İyi Android Kılıfları</a></h3>
<div class="amp-related-meta">
Satın Alma Kılavuzları </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/macinizdeki-fare-i%CC%87saretcisini-olusturun/">
<amp-img src="https://exse.eyewated.com/pict/697ba1a57f8d30a9-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/macinizdeki-fare-i%CC%87saretcisini-olusturun/">Mac'inizdeki Fare İşaretçisini Oluşturun</a></h3>
<div class="amp-related-meta">
Mac'ler </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/excelde-bir-calisma-sayfasini-gizle-ve-goester/">
<amp-img src="https://exse.eyewated.com/pict/e3ea3637ae8d3727-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/excelde-bir-calisma-sayfasini-gizle-ve-goester/">Excel'de bir Çalışma Sayfasını Gizle ve Göster</a></h3>
<div class="amp-related-meta">
Yazılım </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/kablo-veya-telefon-olmadan-internet-nasil-alinir/">
<amp-img src="https://exse.eyewated.com/pict/6852a9e256473213-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/kablo-veya-telefon-olmadan-internet-nasil-alinir/">Kablo veya telefon olmadan internet nasıl alınır</a></h3>
<div class="amp-related-meta">
</div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/goezden-gecirme-libratone-one-tiklayin-tasinabilir-bluetooth-hoparloer/">
<amp-img src="https://exse.eyewated.com/pict/ec6096fcb5ee2f5c-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/goezden-gecirme-libratone-one-tiklayin-tasinabilir-bluetooth-hoparloer/">Gözden Geçirme: Libratone ONE Tıklayın Taşınabilir Bluetooth Hoparlör</a></h3>
<div class="amp-related-meta">
Ürün İncelemeleri </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/instagram-hikayeleri-vs-snapchat-hikayeleri/">
<amp-img src="https://exse.eyewated.com/pict/9c90d36b576c3120-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/instagram-hikayeleri-vs-snapchat-hikayeleri/">Instagram Hikayeleri vs. Snapchat Hikayeleri</a></h3>
<div class="amp-related-meta">
İnternette arama </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/top-mac-rss-haber-kaynagi-okuyucular-ve-haberler-toplayicilar/">
<amp-img src="https://exse.eyewated.com/pict/69adcd6d753a3d7f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/top-mac-rss-haber-kaynagi-okuyucular-ve-haberler-toplayicilar/">Top Mac RSS Haber Kaynağı Okuyucular ve Haberler Toplayıcılar</a></h3>
<div class="amp-related-meta">
E-posta ve Mesajlaşma </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/jetclean-v1-5-0/">
<amp-img src="https://exse.eyewated.com/pict/e7e641041ca132f6-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/jetclean-v1-5-0/">JetClean v1.5.0</a></h3>
<div class="amp-related-meta">
Yazılım ve Uygulamalar </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://tr.eyewated.com/grand-theft-auto-san-andreas-sistem-gereksinimleri/">
<amp-img src="https://exse.eyewated.com/pict/02b51f3e1f4d3015-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://tr.eyewated.com/grand-theft-auto-san-andreas-sistem-gereksinimleri/">Grand Theft Auto San Andreas Sistem Gereksinimleri</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 tr.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.225 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2019-10-04 00:27:24 -->
<!-- 0.002 -->