Cách tạo bố cục 3 cột trong CSS

Bố cục CSS yêu cầu bạn nghĩ về bố cục trang web của mình nói chung và sau đó lấy các phần và đặt chúng lại với nhau. Tìm hiểu cách xây dựng bố cục 3 cột đơn giản với CSS.

01/09

Vẽ bố cục của bạn

J Kyrnin

Bạn có thể vẽ bố trí của bạn trên giấy hoặc trong một chương trình đồ họa . Nếu bạn đã có một khung dây hoặc thiết kế rộng rãi hơn trong tâm trí, đơn giản hóa nó vào các hộp cơ bản tạo nên trang web. Thiết kế này đi kèm với bài viết này có ba cột trong khu vực nội dung chính, cũng như đầu trang và chân trang. Nếu bạn nhìn kỹ, bạn có thể thấy rằng ba cột không bằng chiều rộng.

Sau khi bạn đã bố trí xong bố cục, bạn có thể bắt đầu nghĩ về kích thước. Thiết kế ví dụ này sẽ có các thứ nguyên cơ bản sau:

02/09

Viết HTML / CSS cơ bản và tạo phần tử vùng chứa

Vì trang này sẽ là tài liệu HTML hợp lệ, hãy bắt đầu bằng một vùng chứa HTML trống

Tài liệu không có tiêu đề </ tiêu đề> </ head> <body> </ body> </ html> <p> Thêm các kiểu CSS cơ bản để <a href="https://vi.eyewated.com/su-dung-css-dje-zero-ra-le-va-bien-gioi-cua-ban/">không có lề trang, đường viền và các phần đệm</a> . Mặc dù có các <a href="https://vi.eyewated.com/lam-quen-voi-cac-to-djinh-kieu-xep-tang-voi-to-css-cheat-sheet-nay/">kiểu CSS chuẩn khác</a> cho tài liệu mới, nhưng các kiểu này là mức tối thiểu bạn cần để có bố cục rõ ràng. Thêm chúng vào phần đầu của tài liệu của bạn: </p> <style type = "text / css"> html, body {margin: 0px; padding: 0px; đường viền: 0px; } </ style> <p> Để bắt đầu xây dựng bố cục, hãy đặt vào phần tử vùng chứa. Đôi khi điều đó xảy ra là bạn có thể loại bỏ vùng chứa sau này, nhưng đối với hầu hết các bố cục có chiều rộng cố định, việc có phần tử vùng chứa giúp dễ dàng quản lý trên các trình duyệt web khác nhau. Vì vậy, trong cơ thể đặt này: </p> <div id = "vùng chứa"> </ div> <p> Và trong bảng định kiểu CSS, hãy đặt: </p> #thùng đựng hàng { } <p> <strong>03/09</strong> </p> <h3> Tạo kiểu cho vùng chứa </h3><p> Vùng chứa xác định mức độ rộng của nội dung trang web, cũng như bất kỳ lề nào xung quanh bên ngoài và đệm bên trong. Đối với tài liệu này, vùng chứa rộng 870px với rãnh 20 pixel ở bên trái. Máng xối được thiết lập với kiểu dáng lề, nhưng phần đệm trên thùng chứa được lấy ra để ngăn chặn bất kỳ phần tử nào có chiều rộng như vùng chứa. </p> #container {width: 870px; lề: 0 0 0 20px; / * phía trên bên phải phía dưới bên trái * / padding: 0; } <p> Nếu bạn lưu tài liệu của mình ngay bây giờ, sẽ khó thấy vùng chứa vì nó không có gì trong đó. Nếu bạn thêm văn bản giữ chỗ, bạn sẽ có thể thấy phần tử vùng chứa rõ ràng hơn. </p> <p> <strong>04/09</strong> </p> <h3> Sử dụng Thẻ tiêu đề cho tiêu đề </h3><p> Cách bạn quyết định tạo kiểu cho hàng tiêu đề phụ thuộc rất nhiều vào nội dung trong đó. Nếu hàng tiêu đề chỉ là có một biểu tượng logo và dòng tiêu đề, thì việc sử dụng thẻ tiêu đề (<h1>) sẽ có ý nghĩa hơn việc sử dụng <div>. Bạn có thể tạo kiểu cho tiêu đề giống như cách bạn tạo kiểu div và bạn tránh các thẻ không liên quan. </p> <p> HTML cho hàng tiêu đề nằm ở đầu vùng chứa và trông giống như sau: </p> <h1> Hàng Tiêu đề của tôi </ h1> <p> Sau đó, để đặt kiểu trên đó, đường viền màu đỏ đã được thêm ở dưới cùng để bạn có thể thấy vị trí kết thúc, lề và phần đệm được lấy ra, chiều rộng được đặt thành 100% và chiều cao là 150px: </p> #container h1 {margin: 0; padding: 0; chiều rộng: 100%; chiều cao: 150px; float: trái; border-bottom: # c00 rắn 3px; } <p> Đừng quên nổi yếu tố này với phao: trái; bất động sản. Chìa khóa để viết bố cục CSS là làm nổi bật mọi thứ - ngay cả những thứ có cùng độ rộng với vùng chứa. Bằng cách đó, bạn luôn biết vị trí của các phần tử trên trang. </p> <p> <a href="https://vi.eyewated.com/bo-chon-con-chau-cua-css-la-gi/">Bộ chọn con cháu CSS</a> chỉ áp dụng kiểu cho các phần tử H1 bên trong phần tử #container. </p> <p> <strong>05/09</strong> </p> <h3> Để Nhận Ba Cột, Bắt đầu bằng cách Xây dựng Hai Cột </h3><p> Khi bạn xây dựng bố cục ba cột với CSS, bạn cần chia bố cục thành các nhóm hai. Vì vậy, đối với bố cục ba cột này, cột giữa và bên phải và được nhóm lại và được đặt bên cạnh cột bên trái trong bố cục hai cột, cột bên trái rộng 250px và cột bên phải rộng 610px (300 cột cho hai cột , cộng thêm 10px cho máng xối giữa chúng). </p> <p> HTML trông như thế này: </p> <div id = "col1"> <p> Sử dụng các kết quả cũ. Velit esse cillum dolore ut enim quảng cáo tối thiểu, lorem ipsum dolor ngồi amet. Trong reprehenderit trong voluptate quis nostrud tập thể dục eu fugiat nulla pariatur. Velit esse cillum dolore ullamco is ut ut al ex ex ex ex ea ea ea div div div <<<<<<<<<<div div div div div div div div div div div div div div div div,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, Ut labore và dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. </ P> </ div> <p> Văn bản trình giữ chỗ trong các cột làm cho chúng hiển thị rõ hơn khi thử nghiệm. CSS trông như thế này: </p> #container # col1 {width: 250px; float: trái; } #container # col2outer {width: 610px; float: đúng; lề: 0; padding: 0; } <p> Cột bên trái được thả sang trái, còn cột còn lại được thả sang phải. Bởi vì tổng chiều rộng của cả hai cột là 860px, có khoảng cách 10px giữa chúng. </p> <p> <strong>06/09</strong> </p> <h3> Thêm hai cột bên trong cột rộng thứ hai </h3><p> Để tạo ba cột, thêm hai div trong cột thứ hai rộng hơn, giống như bạn đã thêm 2 div vào bên trong cột vùng chứa trong bước cuối cùng. HTML trông như thế này: </p> <div id = "col2outer"> <div id = "col2mid"> <p> Sử dụng tối thiểu quảng cáo, sed do eiusmod tempor incididunt ullamco laboris nisi. Ut labore và dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. </ P> </ div> <div id = "col2side"> <p> Nam giải phóng tempore, quia voluptas ngồi aspernatur dicta sunt explicabo. Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur một sapiente delectus, có nghĩa là không có tác dụng của nó và do đó có thể được sử dụng trong labore et dolore. </ P> </ div> </ div> <p> Và CSS trông như thế này: </p> # col2outer # col2mid {width: 300px; float: trái; } # col2outer # col2side {width: 300px; float: đúng; } <p> Vì hai hộp rộng 300px này nằm trong một hộp rộng 610px, một lần nữa sẽ có máng xối 10px giữa chúng. </p> <p> <strong>07/09</strong> </p> <h3> Thêm vào chân trang </h3><p> Bây giờ phần còn lại của trang được tạo kiểu, bạn có thể thêm vào chân trang. Sử dụng div cuối cùng có id "chân trang" và thêm nội dung để bạn có thể xem nó. Bạn cũng có thể thêm đường viền ở trên cùng, vì vậy bạn sẽ biết nó bắt đầu ở đâu. </p> <p> HTML: </p> <div id = "footer"> <p> Bản quyền © 2017 </ p> </ div> <p> CSS: </p> #container #footer {float: left; chiều rộng: 870px; border-top: # c00 rắn 3px; } <p> <strong>08/09</strong> </p> <h3> Thêm vào phong cách và nội dung cá nhân của bạn </h3><p> Bây giờ bạn đã hoàn tất bố cục, bạn có thể bắt đầu thêm phong cách và nội dung cá nhân của riêng bạn. Hãy nhớ rằng các đường viền trên đầu trang và chân trang đã được thêm vào để hiển thị các phần bố trí, chứ không phải dành riêng cho thiết kế. </p> <p> <strong>09/09</strong> </p> <h3> HTML / CSS cuối cùng </h3><p> Đây là toàn bộ tài liệu, HTML và CSS: </p> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Chuyển tiếp // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <meta http-equiv =" Nội dung kiểu "nội dung =" văn bản / html; charset = utf-8 "/> <title> Tài liệu không có tiêu đề </ title> <style type = "text / css"> html, body {margin: 0px; padding: 0px; đường viền: 0px; } #container {width: 870px; lề: 0 0 0 20px; / * phía trên bên phải phía dưới bên trái * / padding: 0; màu nền: #fff; } #container h1 {margin: 0; padding: 0; chiều rộng: 100%; chiều cao: 150px; float: trái; border-bottom: # c00 rắn 3px; } #container # col1 {width: 250px; float: trái; } #container # col2outer {width: 610px; float: đúng; lề: 0; padding: 0; } # col2outer # col2mid {width: 300px; float: trái; } # col2outer # col2side {width: 300px; float: đúng; } #container #footer {float: left; chiều rộng: 870px; border-top: # c00 rắn 3px; } </ style> </ head> <body> <div id = "container"> <h1> Hàng tiêu đề của tôi </ h1> <div id = "col1"> <p> Sử dụng kết quả cũ của hàng hoá. </ p> </ div> <div id = "col2outer"> <div id = "col2mid"> <p> Sử dụng tối thiểu quảng cáo. </ p> </ div> <div id = "col2side"> <p> Nam libero tempore. </ P> </ div> </ div> <div id = "footer"> <p> Bản quyền © 2008 </ p> </ div> </ div> </ body> </ html> </div> <div class="amp-related-wrapper"> <h2>Alike posts</h2> <div class="amp-related-content"> <a href="https://vi.eyewated.com/su-khac-biet-giua-display-none-va-visibility-hidden-trong-css/"> <amp-img src="https://exse.eyewated.com/pict/75b8a97b6ad9352e-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/su-khac-biet-giua-display-none-va-visibility-hidden-trong-css/">Sự khác biệt giữa "display: none" và "visibility: hidden" trong CSS</a></h3> <div class="amp-related-meta"> Thiết kế web & Dev </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/cac-cau-hoi-thuong-gap-ve-thiet-ke-web-html-css-va-phat-trien-web/">Các câu hỏi thường gặp về thiết kế web, HTML, CSS và phát triển web</a></h3> <div class="amp-related-meta"> Thiết kế web & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/hieu-3-kieu-css-styles/"> <amp-img src="https://exse.eyewated.com/pict/4623841739de33b0-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/hieu-3-kieu-css-styles/">Hiểu 3 kiểu CSS Styles</a></h3> <div class="amp-related-meta"> Thiết kế web & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/lam-the-nao-dje-chan-mot-trang-web-tu-in-an-voi-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://vi.eyewated.com/lam-the-nao-dje-chan-mot-trang-web-tu-in-an-voi-css/">Làm thế nào để chặn một trang web từ in ấn với CSS</a></h3> <div class="amp-related-meta"> Thiết kế web & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/cach-su-dung-nhieu-lop-css-tren-mot-phan-tu-djon/"> <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://vi.eyewated.com/cach-su-dung-nhieu-lop-css-tren-mot-phan-tu-djon/">Cách sử dụng nhiều lớp CSS trên một phần tử đơn</a></h3> <div class="amp-related-meta"> Thiết kế web & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/djinh-nghia-cua-css-property/"> <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://vi.eyewated.com/djinh-nghia-cua-css-property/">Định nghĩa của CSS Property</a></h3> <div class="amp-related-meta"> Thiết kế web & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/ho-phong-chu-chung-trong-css-la-gi/"> <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://vi.eyewated.com/ho-phong-chu-chung-trong-css-la-gi/">Họ phông chữ chung trong CSS là gì?</a></h3> <div class="amp-related-meta"> Thiết kế web & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/tien-to-nha-cung-cap-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://vi.eyewated.com/tien-to-nha-cung-cap-css/">Tiền tố nhà cung cấp CSS</a></h3> <div class="amp-related-meta"> Thiết kế web & Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/gioi-thieu-ve-css3/"> <amp-img src="https://exse.eyewated.com/pict/1ff4661d0ba8312e-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/gioi-thieu-ve-css3/">Giới thiệu về CSS3</a></h3> <div class="amp-related-meta"> Thiết kế web & Dev </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>See Newest</h2> <div class="amp-related-content"> <a href="https://vi.eyewated.com/tim-ung-dung-tren-google-play/"> <amp-img src="https://exse.eyewated.com/pict/fd6eef91dd4e3582-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/tim-ung-dung-tren-google-play/">Tìm ứng dụng trên Google Play</a></h3> <div class="amp-related-meta"> Android </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/tim-hieu-cach-nhan-dang-va-vo-hieu-hoa-bien-nhan-dja-djoc-cua-whatsapp/"> <amp-img src="https://exse.eyewated.com/pict/dfecd37de83f345a-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/tim-hieu-cach-nhan-dang-va-vo-hieu-hoa-bien-nhan-dja-djoc-cua-whatsapp/">Tìm hiểu cách nhận dạng và vô hiệu hoá biên nhận đã đọc của WhatsApp</a></h3> <div class="amp-related-meta"> Email & Nhắn tin </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/ban-se-mat-du-lieu-hoac-ung-dung-ipad-cua-minh-neu-ban-nang-cap/"> <amp-img src="https://exse.eyewated.com/pict/aa3e1240ab4c3d82-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/ban-se-mat-du-lieu-hoac-ung-dung-ipad-cua-minh-neu-ban-nang-cap/">Bạn sẽ mất dữ liệu hoặc ứng dụng iPad của mình nếu bạn nâng cấp?</a></h3> <div class="amp-related-meta"> IPad </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/7-may-hut-bui-tot-nhat-dje-mua-vao-nam-2018/"> <amp-img src="https://exse.eyewated.com/pict/97aa256919ee339d-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/7-may-hut-bui-tot-nhat-dje-mua-vao-nam-2018/">7 máy hút bụi tốt nhất để mua vào năm 2018</a></h3> <div class="amp-related-meta"> Hướng dẫn mua hàng </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/tong-quan-nhanh-ve-ip-mang-192-1-1/"> <amp-img src="https://exse.eyewated.com/pict/de1aa65cb4c236ea-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/tong-quan-nhanh-ve-ip-mang-192-1-1/">Tổng quan nhanh về IP mạng 192.1.1</a></h3> <div class="amp-related-meta"> Mạng internet </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/lam-the-nao-dje-hien-thi-windows-taskbar-tab-xem-truoc-trong-firefox/"> <amp-img src="https://exse.eyewated.com/pict/f8a01a5d18633455-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/lam-the-nao-dje-hien-thi-windows-taskbar-tab-xem-truoc-trong-firefox/">Làm thế nào để hiển thị Windows Taskbar Tab xem trước trong Firefox</a></h3> <div class="amp-related-meta"> Trình duyệt </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>Sapid posts</h2> <div class="amp-related-content"> <a href="https://vi.eyewated.com/phan-mem-tao-nhac-mien-phi-hang-djau/"> <amp-img src="https://exse.eyewated.com/pict/36ad76af0cdd33fc-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/phan-mem-tao-nhac-mien-phi-hang-djau/">Phần mềm tạo nhạc miễn phí hàng đầu</a></h3> <div class="amp-related-meta"> Phần mềm & ứng dụng </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/mot-so-ke-hoach-sao-luu-truc-tuyen-co-thuc-su-cho-phep-du-lieu-khong-gioi-han-khong/"> <amp-img src="https://exse.eyewated.com/pict/fd40d2992819333d-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/mot-so-ke-hoach-sao-luu-truc-tuyen-co-thuc-su-cho-phep-du-lieu-khong-gioi-han-khong/">Một số kế hoạch sao lưu trực tuyến có thực sự cho phép dữ liệu không giới hạn không?</a></h3> <div class="amp-related-meta"> Phần mềm & ứng dụng </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/top-5-ung-dung-cong-thuc-cho-nguoi-an-chay-va-nguoi-an-chay/"> <amp-img src="https://exse.eyewated.com/pict/5f6b55eb6603346e-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/top-5-ung-dung-cong-thuc-cho-nguoi-an-chay-va-nguoi-an-chay/">Top 5 ứng dụng công thức cho người ăn chay và người ăn chay</a></h3> <div class="amp-related-meta"> Phần mềm & ứng dụng </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/djua-mot-co-so-du-lieu-vao-bieu-mau-binh-thuong-thu-ba-3nf/"> <amp-img src="https://exse.eyewated.com/pict/a58c63e1923d3464-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/djua-mot-co-so-du-lieu-vao-bieu-mau-binh-thuong-thu-ba-3nf/">Đưa một cơ sở dữ liệu vào biểu mẫu bình thường thứ ba (3NF)</a></h3> <div class="amp-related-meta"> Phần mềm </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/nhan-chat-luong-am-nhac-tot-hon-tren-ung-dung-spotify-cho-iphone/"> <amp-img src="https://exse.eyewated.com/pict/3bced07039763627-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/nhan-chat-luong-am-nhac-tot-hon-tren-ung-dung-spotify-cho-iphone/">Nhận chất lượng âm nhạc tốt hơn trên ứng dụng Spotify cho iPhone</a></h3> <div class="amp-related-meta"> Phần mềm & ứng dụng </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/giai-phau-cua-apple-ipad-2/"> <amp-img src="https://exse.eyewated.com/pict/2ccc4891a7a031e4-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/giai-phau-cua-apple-ipad-2/">Giải phẫu của Apple iPad 2</a></h3> <div class="amp-related-meta"> IPad </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/cach-yeu-cau-khoa-san-pham-windows-moi/"> <amp-img src="https://exse.eyewated.com/pict/d7071e10824b47df-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/cach-yeu-cau-khoa-san-pham-windows-moi/">Cách yêu cầu khóa sản phẩm Windows mới</a></h3> <div class="amp-related-meta"> Các cửa sổ </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/ung-dung-twitter-tot-nhat-cho-ipad/">Ứng dụng Twitter tốt nhất cho iPad</a></h3> <div class="amp-related-meta"> Phần mềm & ứng dụng </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/sfsg-co-nghia-la-gi/">"SFSG" có nghĩa là gì?</a></h3> <div class="amp-related-meta"> Truyền thông xã hội </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/yeu-cau-bien-nhan-dja-djoc-cho-thu-trong-outlook-express/"> <amp-img src="https://exse.eyewated.com/pict/0dafcba5288030a0-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/yeu-cau-bien-nhan-dja-djoc-cho-thu-trong-outlook-express/">Yêu cầu biên nhận đã đọc cho thư trong Outlook Express</a></h3> <div class="amp-related-meta"> Email & Nhắn tin </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/nvm-co-nghia-la-gi/"> <amp-img src="https://exse.eyewated.com/pict/c457b4f67a3a3459-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/nvm-co-nghia-la-gi/">"NVM" có nghĩa là gì?</a></h3> <div class="amp-related-meta"> Truyền thông xã hội </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/cach-kiem-tra-viec-su-dung-du-lieu-iphone-cua-ban/"> <amp-img src="https://exse.eyewated.com/pict/6986bc138bc3327a-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/cach-kiem-tra-viec-su-dung-du-lieu-iphone-cua-ban/">Cách kiểm tra việc sử dụng dữ liệu iPhone của bạn</a></h3> <div class="amp-related-meta"> IPhone và iPod </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/nha-xuat-ban-micrsoft-2010-cai-nhin-djau-tien/"> <amp-img src="https://exse.eyewated.com/pict/4b699144da2d3a0d-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/nha-xuat-ban-micrsoft-2010-cai-nhin-djau-tien/">Nhà xuất bản Micrsoft 2010 - Cái nhìn đầu tiên</a></h3> <div class="amp-related-meta"> Phần mềm </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/nhung-cau-hoi-thuong-gap-ve-ipad-2/"> <amp-img src="https://exse.eyewated.com/pict/a10c9c076e1833f2-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/nhung-cau-hoi-thuong-gap-ve-ipad-2/">Những câu hỏi thường gặp về iPad 2</a></h3> <div class="amp-related-meta"> IPad </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/winutilities-diskdefrag-v1-8/"> <amp-img src="https://exse.eyewated.com/pict/48d1f1162667370d-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/winutilities-diskdefrag-v1-8/">WinUtilities DiskDefrag v1.8</a></h3> <div class="amp-related-meta"> Phần mềm & ứng dụng </div> </div> </div> <div class="amp-related-content"> <a href="https://vi.eyewated.com/goi-djien-thoai-di-djong-mien-phi-tren-tango-voi-3g-4g-va-wifi/"> <amp-img src="https://exse.eyewated.com/pict/244fd359882f32fe-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://vi.eyewated.com/goi-djien-thoai-di-djong-mien-phi-tren-tango-voi-3g-4g-va-wifi/">Gọi điện thoại di động miễn phí trên Tango với 3G, 4G và Wifi</a></h3> <div class="amp-related-meta"> Phần mềm & ứng dụng </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"> © 2021 vi.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.233 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2019-10-04 00:33:51 --> <!-- 0.003 -->