[Thực hành] Tạo bố cục các fixed header và fixed footer

Mục tiêu Luyện tập sử dụng thuộc tính position để tạo fixed menu. Mô tả Một thiết kế menu điều hướng độc đáo sẽ góp phần thu hút người dùng sử dụng và ở lại trên thiết kế web của bạn. Fixed menu là một xu hướng được nhiều trang web lựa chọn vì gọn nhẹ, lại dễ dàng sử dụng.

[Thực hành] Tạo menu ngang

Mục tiêu Luyện tập sử dụng CSS để tạo được các menu ngang cơ bản. Nội dung Với CSS, chúng ta có thể dễ dàng tạo ra một trình đơn (menu) có khả năng thả xuống (dropdown) mỗi khi đưa con trỏ vào một mục chọn trong trình đơn (mục chọn có trình đơn con). Trong

[Thực hành] Tạo menu dọc

Mục tiêu Luyện tập sử dụng CSS để tạo được các hiệu ứng cho menu cơ bản. Nội dung Với CSS, chúng ta có thể dễ dàng tạo ra một trình đơn (menu) có khả năng thả xuống (dropdown) mỗi khi đưa chuột vào một mục chọn trong trình đơn (mục chọn có trình đơn

[Thực hành] Tạo bố cục cơ bản

Mục tiêu Luyện tập việc thiết kế bố cục cho trang web. Mô tả Trong phần hướng dẫn này, bạn sẽ sử dụng thẻ div và các thuộc tính css để tạo bố cục (layout) cho một trang web với nguyên mẫu như sau: Hướng dẫn Trước hết chúng ta cần tạo mới một trang

[Thực hành] Sử dụng box model

Dùng border, background, padding, margin để định dạng kết quả như hình dưới đây: Lần lượt tiến hành theo các bước hướng dẫn sau đây:  Bước 1: Tạo tài liệu mới html gồm đầy đủ các phần head, body. Trong body có sử dụng các thẻ div, p như sau:  Kết quả hiển thị:  Bước

[Bài đọc] RWD Media Queries

Media Queries hoạt động như thế nào? Media Queries sử dụng @media để áp dụng một khối thuộc tính css chỉ khi thoả mãn một điều kiện nào đó. Ví dụ: Trong ví dụ trên, thuộc tính background-color chỉ được áp dụng cho thẻ body trong trường hợp độ rộng của màn hình nhỏ hơn

[Bài đọc] Grid View

Grid-view là gì? Hiện nay, nhiều trang web phân bố nội dung theo dạng một grid-view (lưới), có nghĩa là trang được chia các thành cột: Nhờ sử dụng grid-view mà việc thiết kế trở nên dễ dàng hơn, giúp cho chúng ta dễ đặt các nội dung lên các vùng phù hợp của trang

[Bài đọc] Responsive Web Design

Responsive Web Design (RWD) là gì? RWD (Thiết kế Web Thích ứng) là kỹ thuật được sử dụng để trang web có thể hiển thị tốt trên nhiều loại thiết bị với kích thước của trình duyệt khác nhau. RWD sử dụng CSS và HTML để thay đổi kích thước, ẩn hoặc thêm các thành

Nhúng CSS vào trong tài liệu HTML

Có 3 cách để nhúng mã CSS vào trong một tài liệu HTML, bao gồm: Khai báo trực tiếp ở thẻ HTML (Inline style sheet) Khai báo trong thẻ <style> của tài liệu HTML (Internal style sheet) Khai báo trong file .css riêng biệt (External style sheet) 1. Khai báo trực tiếp ở thẻ HTML

[Thực hành] Tạo layout trong Bootstrap

Mục tiêu Sử dụng các thành phần của Bootstrap để tạo bố cục cơ bản cho một trang web. Mô tả  Hãy sử dụng các thành phần có sẵn của bootstrap để tạo bố cục và nội dung trang web như sau: Các bước thực hiện Bước 1: Tạo file layout.html Phân chia phần body trang