Chèn ảnh nền Full màn hình với Html và CSS

Chèn ảnh nền Full màn hình với Html và CSS

css, Html
Đặt ảnh Background full màn hình Đối với một số bạn đã biết về css thì sẽ biết, khá đơn giản để đặt hình nền cho một đối tượng bất kì, chỉ cần sử dụng thuộc tính background cho thẻ đó là được. Ví dụ đặt ảnh cho toàn trang body {   background: url(địa chỉ ảnh); } nhưng như đoạn mã trên thì ảnh sẻ chỉ nằm ở một góc mà chứ không tràn ra toàn trang web, một số bạn thì thường cho thêm thuộc tính repeat vào nữa thì ảnh sẽ lặp lại the chiều ngăng chiều dọc gì đó, một số bạn lại kiếm một ảnh cỡ đại bự để chèn vào. Nhưng kiểu nào cũng vậy mình thấy hầu hết nó cũng thấy nó xấu…
Read More
Thiết lập chiều rộng tối ưu cho website

Thiết lập chiều rộng tối ưu cho website

Html
Thiết lập chiều rộng tối ưu cho website là một việc quan trọng phải làm. Ngày nay người  dùng truy cập website trên nhiều thiết bị khác nhau, để đảm bảo trải nghiệm  tốt nhất cho người dùng, bạn phải chú ý đế vấn đề chiều rộng tối ưu cho website, nếu như không muốn người dùng đóng website của bạn sau 2 giây. Khai báo meta viewport <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> Đoạn  meta này có nghĩa là chiều rộng website sẽ theo chiều rộng  thiết bị, bạn nên sử dụng đoạn meta này cho website, vào  thẻ <head> của mình.  Với đoạn code này, website của bạn luôn ở kích thước vừa với màn hình thiết bị, không bị thu phóng và người dùng không thể dùng tay…
Read More
Code ẩn hiện (Đóng/mở) nội dung bài viết bằng html

Code ẩn hiện (Đóng/mở) nội dung bài viết bằng html

Html
Nói thế nào nhỉ, nó là một đoạn code để ẩn hiện những nội dung bạn cần ẩn hiện (Spoiler). Lúc bình thường một đoạn nội dung (text, văn bản, hình ảnh...) sẽ ẩn dưới một button, bấm vào button toàn bộ nội dung sẽ mở ra. Chức năng này có sẵn ở một vài plugin, nhưng bạn hoàn toàn có thể tự code chúng. Demo: Bấm đây xem Demo thực tế (Bạn kéo xuống xem đoạn "Xem thêm nội dung, hình ảnh" đó) Đây là code được sử dụng: <div><div align="center"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ẩn nội dung'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Hiện nội dung'; }" style="font-size: 13px; margin: 0px; padding: 10px; width: 100%;" type="button"…
Read More