Susun atur CSS memerlukan bahawa anda memikirkan susun atur laman web anda secara keseluruhan, dan kemudian mengambil kepingan dan meletakkannya bersama-sama. Ketahui cara membina susun atur 3-lajur mudah dengan CSS.
01 dari 09
Lukiskan Layout Anda J Kyrnin Anda boleh menarik susun atur anda di atas kertas atau dalam program grafik . Jika anda sudah mempunyai rangka dawai atau reka bentuk yang lebih luas dalam fikiran, memudahkannya ke kotak asas yang membentuk laman web ini. Reka bentuk yang menyertai artikel ini mempunyai tiga lajur di kawasan kandungan utama, serta tajuk dan kaki. Jika anda melihat dengan teliti, anda dapat melihat bahawa tiga lajur tidak sama lebarnya.
Selepas anda membuat susun atur anda, anda boleh mula memikirkan dimensi. Reka contoh contoh ini akan mempunyai dimensi asas berikut:
Tidak melebihi 900 piksel 20 px longkang di sebelah kiri 10 px antara tiang dan baris Lajur yang 250px, 300px, dan 300px lebar Baris teratas adalah 150px tinggi Barisan bawah adalah 100px tinggi 02 dari 09
Tulis Asas HTML / CSS Asas dan Buat Elemen Kontena Oleh kerana halaman ini akan menjadi dokumen HTML yang sah, Mula dengan bekas HTML kosong
tajuk> </ head> <body> </ body> </ html> <p> Tambahkan dalam gaya CSS asas untuk <a href="https://ms.eyewated.com/gunakan-css-untuk-zero-out-margin-dan-borders-anda/">menjauhkan margin halaman, sempadan, dan paddings</a> . Walaupun terdapat <a href="https://ms.eyewated.com/dapatkan-ketahui-lembaran-gaya-cascading-dengan-lembaran-cheat-css-ini/">gaya CSS standard lain</a> untuk dokumen baru, gaya ini adalah minimum yang anda perlukan untuk mendapatkan susun atur yang bersih. Tambahnya ke kepala dokumen anda: </p>
<style type = "text / css"> html, body {margin: 0px; padding: 0px; sempadan: 0px; } </ style> <p> Untuk mula membina susun atur, masukkan ke dalam elemen kontena. Kadang-kadang berlaku bahawa anda boleh menyingkirkan bekas kemudian, tetapi untuk kebanyakan susun atur tetap, mempunyai unsur kontainer memudahkan untuk mengurus pelayar web yang berbeza. Oleh itu, dalam tubuh, letakkan ini: </p>
<div id = "container"> </ div> <p> Dan dalam helaian gaya CSS, letakkan: </p>
#container {} <p> <strong>03 dari 09</strong> </p>
<h3> Gaya Container </h3><p> Kontena mendefinisikan sejauh mana kandungan laman web, serta apa-apa margin sekitar luar dan padding di bahagian dalam. Untuk dokumen ini, bekas itu adalah 870px lebar dengan lubang 20 piksel di sebelah kiri. Tangki ini didirikan dengan gaya margin, tetapi padding di dalam bekas dilepaskan untuk mengelakkan unsur-unsur dari selebar kontainer. </p>
#container {width: 870px; margin: 0 0 0 20px; / * bahagian kanan atas kiri * / padding: 0; } <p> Jika anda menyimpan dokumen anda sekarang, sukar untuk melihat bekas itu kerana ia tidak mempunyai apa-apa di dalamnya. Jika anda menambah teks pemegang tempat, anda akan dapat melihat elemen bekas dengan lebih jelas. </p>
<p> <strong>04 dari 09</strong> </p>
<h3> Gunakan Headline Tag untuk Header </h3><p> Bagaimana anda membuat keputusan untuk gaya barisan tajuk bergantung banyak pada apa yang ada di dalamnya. Jika baris pengepala hanya akan mempunyai grafik grafik dan tajuk, maka menggunakan tag tajuk (<h1>) lebih masuk akal daripada menggunakan <div>. Anda boleh gaya tajuk dengan cara yang sama anda menstabilkan div, dan anda mengelakkan teg luaran. </p>
<p> HTML untuk baris pengepala akan berada di bahagian atas bekas dan kelihatan seperti ini: </p>
<h1> Row Header saya </ h1> <p> Kemudian, untuk menetapkan gaya di atasnya, sempadan merah ditambah di bahagian bawah supaya anda dapat melihat di mana ia berakhir, margin dan padding telah dilepaskan, lebar ditetapkan kepada 100% dan ketinggian hingga 150px: </p>
#container h1 {margin: 0; padding: 0; lebar: 100%; ketinggian: 150px; terapung: kiri; sempadan bawah: # c00 pepejal 3px; } <p> Jangan lupa untuk mengapungkan elemen ini dengan float: kiri; harta. Kunci untuk menulis susun atur CSS adalah untuk melayang segalanya - bahkan perkara yang sama lebarnya sebagai bekas. Dengan cara itu, anda sentiasa tahu di mana unsur-unsur akan terletak pada halaman. </p>
<p> <a href="https://ms.eyewated.com/apa-itu-pemilih-keturunan-css/">Pemilih keturunan CSS</a> menggunakan gaya hanya untuk elemen H1 yang berada di dalam elemen #container. </p>
<p> <strong>05 dari 09</strong> </p>
<h3> Untuk Dapatkan Tiga Lajur, Mulakan dengan Membangun Dua Lajur </h3><p> Apabila anda membina susun atur tiga lajur dengan CSS, anda perlu membahagikan susun atur anda ke dalam kumpulan dua. Jadi untuk susun atur tiga lajur ini, lajur tengah dan kanan dan dikelompokkan dan diletakkan di sebelah lajur kiri dalam susun atur dua lajur di mana lajur kiri adalah 250px lebar, dan lajur kanannya adalah 610px lebar (300 setiap dua lajur , ditambah 10px untuk saluran di antara mereka). </p>
<p> HTML kelihatan seperti ini: </p>
<div id = "col1"> <p> Ut aliquip ex ea commodo consequat. Anda akan mendapat lebih banyak wang untuk mendapatkannya, tetapi jika anda mahu. Dalam reprehenderit dalam latihan yang tidak dapat dilakukan, anda perlu mengatasi masalah ini. </ P> </ div> <div id = "col2outer"> <p> Untuk mendapatkan maklumat lanjut, kami akan terus berusaha untuk mengatasi masalah ini. Ut labore et dolore magna aliqua. Anda akan mendapat lebih banyak wang daripada anda. </ P> </ div> <p> Teks pemampan di lajur menjadikannya lebih kelihatan semasa ujian. CSS kelihatan seperti ini: </p>
#container # col1 {lebar: 250px; terapung: kiri; } #container # col2outer {width: 610px; terapung: betul; margin: 0; padding: 0; } <p> Lajur di sebelah kiri terapung ke kiri, manakala yang lain diapungkan ke kanan. Oleh kerana lebar lebar kedua-dua lajur adalah 860px, terdapat 10 lajur di antara mereka. </p>
<p> <strong>06 dari 09</strong> </p>
<h3> Tambah Dua Lajur Di dalam Lebar Kedua Lebar </h3><p> Untuk membuat tiga lajur, tambahkan dua div di dalam lajur kedua yang lebih luas, sama seperti anda menambah 2 div di dalam lajur kontena dalam langkah terakhir. HTML kelihatan seperti ini: </p>
<div id = "col2outer"> <div id = "col2mid"> <p> Untuk mendapatkan maklumat lanjut, kami akan menggunakannya untuk masa depan. Ut labore et dolore magna aliqua. </ P> </ div> <div id = "col2side"> <p> Nam libero tempore, quia voluptas sit aspernatur dicta sunt explicabo. Ullam corporis suscipit laboriosam, memainkan peranan penting. Anda boleh menggunakan perkhidmatan ini untuk mendapatkan maklumat lanjut, tetapi anda tidak boleh melihat semua perkara yang berlaku di dalam komputer anda. </ P> </ div> </ div> <p> Dan CSS kelihatan seperti ini: </p>
# col2outer # col2mid {lebar: 300px; terapung: kiri; } # col2outer # col2side {width: 300px; terapung: betul; } <p> Memandangkan kedua-dua kotak lebar 300px itu berada di dalam kotak lebar 610px, akan ada lagi saluran 10px di antara mereka. </p>
<p> <strong>07 dari 09</strong> </p>
<h3> Tambah di Footer </h3><p> Sekarang bahawa seluruh halaman ditata, anda boleh menambah di footer. Gunakan div terakhir dengan id "footer", dan tambahkan kandungan supaya anda dapat melihatnya. Anda juga boleh menambah sempadan di bahagian atas, jadi anda akan tahu di mana ia bermula. </p>
<p> HTML: </p>
<div id = "footer"> <p> Copyright © 2017 </ p> </ div> <p> CSS: </p>
#container #footer {float: left; lebar: 870px; border-top: # c00 solid 3px; } <p> <strong>08 dari 09</strong> </p>
<h3> Tambah dalam Gaya dan Kandungan Peribadi Anda </h3><p> Sekarang bahawa anda mempunyai susun atur selesai, anda boleh mula menambah gaya dan kandungan peribadi anda sendiri. Ingat bahawa sempadan di tajuk dan footer ditambah untuk menunjukkan bahagian susun atur, tidak khusus untuk reka bentuk. </p>
<p> <strong>09 dari 09</strong> </p>
<h3> HTML / CSS Akhir </h3><p> Inilah seluruh dokumen, HTML dan CSS: </p>
<! DOCTYPE html AWAM "- // W3C // DTD XHTML 1.0 Peralihan // 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> tajuk> <style type = "text / css"> html, body {margin: 0px; padding: 0px; sempadan: 0px; } #container {width: 870px; margin: 0 0 0 20px; / * bahagian kanan atas kiri * / padding: 0; warna latar belakang: #fff; } #container h1 {margin: 0; padding: 0; lebar: 100%; ketinggian: 150px; terapung: kiri; sempadan bawah: # c00 pepejal 3px; } #container # col1 {lebar: 250px; terapung: kiri; } #container # col2outer {width: 610px; terapung: betul; margin: 0; padding: 0; } # col2outer # col2mid {lebar: 300px; terapung: kiri; } # col2outer # col2side {width: 300px; terapung: betul; } #container #footer {float: left; lebar: 870px; border-top: # c00 solid 3px; <body> </ head> <body> <div id = "container"> <h1> Row Header </ h1> <div id = "col1"> < <p> </ div> <div id = "col2side"> <p> <div id = "col2outer"> <div id = "col2mid" Nam libero tempore. </ P> </ div> </ div> <div id = "footer"> <p> Copyright © 2008 </ p>
</div>
<div class="amp-related-wrapper">
<h2>Alike posts</h2>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/elakkan-gaya-dalam-talian-untuk-css/">Elakkan Gaya Dalam Talian untuk CSS</a></h3>
<div class="amp-related-meta">
Reka Bentuk Web & Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/ketahui-cara-tambah-kesan-glow-cepat-dan-mudah-dengan-css3/">
<amp-img src="https://exse.eyewated.com/pict/5b9a32b5c36a3de7-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/ketahui-cara-tambah-kesan-glow-cepat-dan-mudah-dengan-css3/">Ketahui Cara Tambah Kesan Glow Cepat dan Mudah Dengan CSS3</a></h3>
<div class="amp-related-meta">
Reka Bentuk Web & Dev </div>
</div>
</div>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/gunakan-css-untuk-pusat-dokumen-dengan-layout-lebar-tetap/">Gunakan CSS untuk Pusat Dokumen dengan Layout Lebar Tetap</a></h3>
<div class="amp-related-meta">
Reka Bentuk Web & Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/apakah-jenis-font-fon-generik-dalam-css/">
<amp-img src="https://exse.eyewated.com/pict/a7fe27e18190322c-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/apakah-jenis-font-fon-generik-dalam-css/">Apakah jenis font fon generik dalam CSS?</a></h3>
<div class="amp-related-meta">
Reka Bentuk Web & Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/bagaimana-mengubah-warna-font-laman-web-dengan-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://ms.eyewated.com/bagaimana-mengubah-warna-font-laman-web-dengan-css/">Bagaimana Mengubah Warna Font Laman Web Dengan CSS</a></h3>
<div class="amp-related-meta">
Reka Bentuk Web & Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/cara-pautan-gaya-dengan-css/">
<amp-img src="https://exse.eyewated.com/pict/b692757fd2c52f2c-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/cara-pautan-gaya-dengan-css/">Cara Pautan Gaya Dengan CSS</a></h3>
<div class="amp-related-meta">
Reka Bentuk Web & Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/gaya-garis-css/">
<amp-img src="https://exse.eyewated.com/pict/b99552b45c483465-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/gaya-garis-css/">Gaya Garis CSS</a></h3>
<div class="amp-related-meta">
Reka Bentuk Web & Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/definisi-harta-css/">
<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://ms.eyewated.com/definisi-harta-css/">Definisi Harta CSS</a></h3>
<div class="amp-related-meta">
Reka Bentuk Web & Dev </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/cara-membina-layout-3-column-dalam-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://ms.eyewated.com/cara-membina-layout-3-column-dalam-css/">Cara Membina Layout 3-Column dalam CSS</a></h3>
<div class="amp-related-meta">
Reka Bentuk Web & Dev </div>
</div>
</div>
</div>
<div class="amp-related-wrapper">
<h2>See Newest</h2>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/bagaimana-menggunakan-kamera-video-ipod-nano/">
<amp-img src="https://exse.eyewated.com/pict/5bcc0267e0d23607-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/bagaimana-menggunakan-kamera-video-ipod-nano/">Bagaimana Menggunakan Kamera Video iPod nano</a></h3>
<div class="amp-related-meta">
IPhone & iPod </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/kajian-projek-optoma-hd28dse-bahagian-2-foto/">
<amp-img src="https://exse.eyewated.com/pict/5dd2642bc73f3792-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/kajian-projek-optoma-hd28dse-bahagian-2-foto/">Kajian Projek Optoma HD28DSE - Bahagian 2 - Foto</a></h3>
<div class="amp-related-meta">
Ulasan Produk </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/psp-anda-boleh-lakukan-lebih-banyak-daripada-main-video-games/">
<amp-img src="https://exse.eyewated.com/pict/0e6ee184c7ea3430-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/psp-anda-boleh-lakukan-lebih-banyak-daripada-main-video-games/">PSP Anda Boleh Lakukan Lebih Banyak daripada Main Video Games</a></h3>
<div class="amp-related-meta">
Membeli Panduan </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/bagaimana-melaksanakan-ujian-lampu-untuk-mengesahkan-kuasa/">
<amp-img src="https://exse.eyewated.com/pict/563e8d50ba033a89-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/bagaimana-melaksanakan-ujian-lampu-untuk-mengesahkan-kuasa/">Bagaimana Melaksanakan Ujian Lampu untuk Mengesahkan Kuasa</a></h3>
<div class="amp-related-meta">
Windows </div>
</div>
</div>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/cara-mengkonfigurasi-keselamatan-internet-explorer/">Cara Mengkonfigurasi Keselamatan Internet Explorer</a></h3>
<div class="amp-related-meta">
Internet & Rangkaian </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/apa-itu-reality/">
<amp-img src="https://exse.eyewated.com/pict/56ae907c8a4d362e-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/apa-itu-reality/">Apa itu Reality?</a></h3>
<div class="amp-related-meta">
Baru & Seterusnya </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://ms.eyewated.com/menggunakan-gimps-select-by-color-tool/">Menggunakan GIMP's Select By Color Tool</a></h3>
<div class="amp-related-meta">
Perisian </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/apakah-earbud-smart/">
<amp-img src="https://exse.eyewated.com/pict/eaf88520a9e633f8-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/apakah-earbud-smart/">Apakah Earbud Smart?</a></h3>
<div class="amp-related-meta">
Ulasan Produk </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/11-little-tricks-mencari-google-yang-harus-anda-ketahui/">
<amp-img src="https://exse.eyewated.com/pict/d092c58ced8c3150-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/11-little-tricks-mencari-google-yang-harus-anda-ketahui/">11 Little Tricks Mencari Google yang Harus Anda Ketahui</a></h3>
<div class="amp-related-meta">
Carian sesawang </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/menggunakan-run-as-di-windows/">
<amp-img src="https://exse.eyewated.com/pict/f98f03ab54882fd5-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/menggunakan-run-as-di-windows/">Menggunakan 'Run As' di Windows</a></h3>
<div class="amp-related-meta">
Carian sesawang </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/luruskan-horizon-dengan-gimp/">
<amp-img src="https://exse.eyewated.com/pict/e5932b61acf83511-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/luruskan-horizon-dengan-gimp/">Luruskan Horizon dengan GIMP</a></h3>
<div class="amp-related-meta">
Perisian </div>
</div>
</div>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/kajian-alat-alat-ekspor-incredimail-backup/">Kajian Alat Alat Ekspor Incredimail Backup</a></h3>
<div class="amp-related-meta">
E-mel & Pesanan </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/big-boy-nintendo-3ds-slide-pad-circle-pad-pro-review/">
<amp-img src="https://exse.eyewated.com/pict/adb9380d52d132b6-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/big-boy-nintendo-3ds-slide-pad-circle-pad-pro-review/">Big Boy: Nintendo 3DS Slide Pad, Circle Pad Pro Review</a></h3>
<div class="amp-related-meta">
Ulasan Produk </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/siri-permainan-video-perang-dunia-ii/">
<amp-img src="https://exse.eyewated.com/pict/5a8d8c63a049347a-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/siri-permainan-video-perang-dunia-ii/">Siri Permainan Video Perang Dunia II</a></h3>
<div class="amp-related-meta">
Permainan </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/tujuh-cara-simpan-wang-ketika-membeli-komputer/">
<amp-img src="https://exse.eyewated.com/pict/c001ac6650a43135-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/tujuh-cara-simpan-wang-ketika-membeli-komputer/">Tujuh Cara Simpan Wang Ketika Membeli Komputer</a></h3>
<div class="amp-related-meta">
Membeli Panduan </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/the-elder-scrolls-iv-oblivion-pc-npc-codes/">
<amp-img src="https://exse.eyewated.com/pict/8d138f6612743e27-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/the-elder-scrolls-iv-oblivion-pc-npc-codes/">The Elder Scrolls IV: Oblivion PC NPC Codes</a></h3>
<div class="amp-related-meta">
Permainan </div>
</div>
</div>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/bagaimana-untuk-menghapus-kawalan-activex-internet-explorer-7/">Bagaimana Untuk Menghapus Kawalan ActiveX Internet Explorer 7</a></h3>
<div class="amp-related-meta">
Pelayar </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/apakah-kunci-penyulitan-swasta/">
<amp-img src="https://exse.eyewated.com/pict/6cfc8952fb5744bd-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/apakah-kunci-penyulitan-swasta/">Apakah Kunci Penyulitan Swasta?</a></h3>
<div class="amp-related-meta">
Windows </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/top-6-percuma-dan-tip-muat-turun-filem/">
<amp-img src="https://exse.eyewated.com/pict/f1ea8aac3ecc38c1-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/top-6-percuma-dan-tip-muat-turun-filem/">Top 6 Percuma dan Tip Muat turun Filem</a></h3>
<div class="amp-related-meta">
Perisian & Aplikasi </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/bagaimana-menggunakan-prioriti-mesej-e-mel-berkesan/">
<amp-img src="https://exse.eyewated.com/pict/a7eaba1fb8722f78-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/bagaimana-menggunakan-prioriti-mesej-e-mel-berkesan/">Bagaimana Menggunakan Prioriti Mesej E-mel Berkesan</a></h3>
<div class="amp-related-meta">
E-mel & Pesanan </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/apakah-fail-ade/">
<amp-img src="https://exse.eyewated.com/pict/71fd333012282ff5-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/apakah-fail-ade/">Apakah Fail ADE?</a></h3>
<div class="amp-related-meta">
Windows </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://ms.eyewated.com/cara-hapus-panes-pilihan-dari-mac-anda/">
<amp-img src="https://exse.eyewated.com/pict/fe6b65ef76a83563-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://ms.eyewated.com/cara-hapus-panes-pilihan-dari-mac-anda/">Cara Hapus Panes Pilihan Dari Mac Anda</a></h3>
<div class="amp-related-meta">
Mac </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 ms.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.2 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2019-10-03 23:29:50 -->
<!-- 0.002 -->