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
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:
- Không rộng hơn 900 pixel
- 20 px máng xối bên trái
- 10 px giữa các cột và hàng
- Các cột có kích thước 250px, 300px và rộng 300px
- Hàng trên cùng cao 150px
- Hàng dưới cùng cao 100px
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
Thêm các kiểu CSS cơ bản để không có lề trang, đường viền và các phần đệm . Mặc dù có các kiểu CSS chuẩn khác 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: