Cách bố trí của khối là gì? Làm thế nào để áp đặt một trang duy nhất của trang web của riêng mình?

Có một mong muốn học hỏi để làm cho trang web trang của riêng bạn? Sau đó, chúng ta hãy làm chủ những gì đã bố trí khối. người mới bố trí gặp gỡ một số khó khăn, họ có rất nhiều câu hỏi. Xem xét khối mã hóa là gì.

Một tip quan trọng

Sử dụng trình soạn thảo WYSIWYG, nên tất cả mọi thứ đã rõ ràng hơn. Những người biết HTML tốt, làm việc trong các máy tính xách tay, bởi vì họ hiểu tất cả mọi thứ. Và người mới bắt đầu có thể tận dụng các chương trình như FrontPage hay, ví dụ, Dreamweaver.

Loại trang web layout

Có một số loại bố cục:

1. Bảng.
2. Block.
3. Trộn.

Chúng tôi quan tâm đến cách bố trí khối. nó phân biệt gì từ bảng? Tại bố trí khối sử dụng thẻ DIV có lợi thế nhất định:

1. Tải với thiết kế của các khối nhanh hơn.
2. Nội dung hiển thị khối (không giống như bảng) như việc tải xuống xảy ra. Như được biết, các bảng này sẽ chỉ hiển thị sau khi toàn bộ bảng.
3. Mã với div-s dễ đọc hơn.

Đó là không phải tất cả những ưu điểm, nơi nổi tiếng với cách bố trí khối.

Làm thế nào để thay đổi vị trí div khối?

Điều này sẽ giúp chúng ta nổi - khách sạn này, có khả năng trong các cách sau:

1. Căn trái - trái.
2. Để sắp xếp đúng - đúng.
3. Yếu tố vẫn còn nơi ông, ông sẽ không di chuyển nếu có ai sánh kịp. Giá trị này sẽ là mặc định.

Một tính năng quan trọng mà chúng ta cần - rõ ràng. Anh ta có thể có 4 giá trị:

1. Để cài đặt dưới mục trước, di chuyển sang phải, khối - ngay.
2. bộ trái bên dưới phần tử trước, mà được chuyển sang bên trái.
3. Cả - Lắp đặt khối di dời trước.
4. Không chỉ ra sự vắng mặt của những hạn chế về vị trí của các khối liên quan đến những nhân tố này đang di chuyển.

thí dụ

Xem xét làm thế nào nó sẽ trông giống như một khối div layout. Chúng tôi viết mã của chúng tôi:

Theo mã bạn nhìn thấy kết quả. Như vậy, trên cơ sở một số thuộc tính có thể được kiểm soát sắp xếp khối như mong muốn. Tới thời điểm tiếp theo. Chúng tôi đã sử dụng text-align: center, để gắn kết mỗi khối đối với bất kỳ trình duyệt.

Như bạn có thể thấy, đó là bố trí khối khá đơn giản của trang web. Điều quan trọng là nghiên cứu và thực hành các thuộc tính hơn sẽ tạo ra một cấu trúc linh hoạt hơn của các trang.

Một cái gì đó quan trọng hơn

Có một tính năng phổ biến được sử dụng trong cách bố trí - vị trí, nó được sử dụng để định vị.

Các giá trị cho các thuộc tính của vị trí:

1. Tương đối - thiết đặt vị trí của các yếu tố liên quan đến vị trí ban đầu của họ. Ứng dụng left, top, righ, di chuyển yếu tố dưới theo một hướng nhất định.
2. Tĩnh - mục hiển thị bình thường. Nó làm cho không có ý nghĩa để sử dụng quyền / trái, trên / dưới - nó có thể dẫn đến không có gì.
3. Absolute - tuyệt đối vị trí phần tử.
4. Cố định - tương tự như tuyệt đối. Nó được ràng buộc vào một điểm nào đó trên màn hình, nhưng nó không thay đổi vị trí của nó, ngay cả khi lật trang.

Nhiều bố trí nhận thấy rằng khi sử dụng một vị trí cố định, tuyệt đối và tương đối của các khối được chồng. Và sau đó thú vị để biết được các khối dưới đây, mà ở trên. Để trả lời câu hỏi này, bạn cần sở hữu z-index. Nó mang khối bố trí lên một tầm cao mới. Điều này làm cho nó có thể không chỉ để làm cho vị trí của máy bay, mà còn bằng phương tiện của Z. trục thứ ba Giá trị của một tài sản đó có thể là tích cực hay tiêu cực.

Tạo 3 khối. Tiếp theo, thử nghiệm với vị trí tuyệt đối.

Như bạn thấy, nó rất dễ dàng để thay đổi vị trí của các khối. Trên cơ sở thực tế là bây giờ bạn có thể, để thực hiện bất kỳ trang bố trí khối tiểu học. Áp dụng các thuộc tính hơn, bạn sẽ cải thiện kỹ năng của bạn.