Làm thế nào để Xây dựng một bố cục Trang HTML5 và CSS3 với Định vị Tuyệt đối - núm vú

Bạn có thể sử dụng định vị tuyệt đối để tạo bố cục trang HTML5 và CSS3. Quá trình này liên quan đến một số thương mại. Bạn có xu hướng kiểm soát tốt hơn trang của mình với định vị tuyệt đối (so với các kỹ thuật nổi) nhưng bố cục tuyệt đối đòi hỏi nhiều kế hoạch hơn và chú ý đến chi tiết hơn.

Kỹ thuật tạo bố cục tuyệt đối cũng tương tự như kỹ thuật nổi (theo nghĩa chung).

Tổng quan bố cục tuyệt đối

Trước khi bắt đầu đưa trang của bạn cùng với vị trí tuyệt đối, tốt nhất là lên kế hoạch cho toàn bộ quá trình. Đây là một ví dụ về cách tiến trình nên đi:

1. Lập kế hoạch cho trang web.

   Có một bản vẽ chỉ định bố cục trang web của bạn trông như thế nào thực sự quan trọng. Trong định vị tuyệt đối, quy hoạch của bạn thậm chí còn quan trọng hơn thiết kế nổi vì bạn sẽ cần xác định kích thước và vị trí của mọi phần tử.

2. Chỉ định kích thước tổng thể.

   Kiểu bố cục cụ thể này có kích thước cố định. Tạo một div toàn bộ tất cả các yếu tố khác và xác định kích thước của div này (trong một đơn vị cố định cho bây giờ, thường là px hoặc em).

3. Tạo HTML.

   Trang HTML phải có div được đặt tên cho mỗi phần của trang (vì vậy nếu bạn có tiêu đề, cột và chân trang, bạn cần một div cho mỗi trang).

4. Tạo một bảng kiểu CSS.

   Các kiểu CSS có thể được nội bộ hoặc liên kết, nhưng vì vị trí tuyệt đối có xu hướng đòi hỏi một đánh dấu nhỏ hơn nhiều so với kiểu nổi, các kiểu bên ngoài được ưa thích hơn.

5. Xác định từng yếu tố.

   Bạn dễ dàng nhìn thấy những gì đang xảy ra nếu bạn chỉ định một đường viền màu khác cho mỗi phần tử.

6. Làm cho mỗi yếu tố được định vị hoàn toàn.

   Đặt vị trí: tuyệt đối trong CSS cho mỗi phần tử trong bố cục.

7. Chỉ định kích thước của mỗi phần tử.

   Đặt chiều cao và chiều rộng của mỗi phần tử theo sơ đồ của bạn. (Bạn đã làm một sơ đồ, phải không?) Xác định vị trí của mỗi phần tử.

8. Sử dụng thuộc tính bên trái và phía trên để xác định vị trí của mỗi phần tử trong bố cục.

   Điều chỉnh bố cục của bạn.

9. Bạn có thể muốn điều chỉnh lề và biên. Bạn có thể cần phải làm một số điều chỉnh để làm cho nó tất cả các công việc.

   Cách viết mã HTML

Mã HTML khá đơn giản:

absLayout. html

Giao diện với Định vị Tuyệt đối

Tệp HTML gọi một trang tính ngoài gọi là absLayout. css.

Thêm CSS

Mã CSS dài hơi nhưng không quá khó:

/ * absLayout.css * / #all {border: 1px màu đen rắn; chiều rộng: 800px; chiều cao: 600px; vị trí: tuyệt đối; còn lại: 0px; trên cùng: 0px;} #head {border: 1px màu xanh lá cây; vị trí: tuyệt đối; chiều rộng: 800px; chiều cao: 100px; đầu: 0px; còn lại: 0px; text-align: center;} #menu {border: 1px màu đỏ đậm; vị trí: tuyệt đối; chiều rộng: 140px; chiều cao: 500px; trên cùng: 100px; còn lại: 0px; padding-trái: 5px; padding-right: 5px;} #content {border: 1px xanh dương; vị trí: tuyệt đối; chiều rộng: 645px; chiều cao: 500px; trên cùng: 100px; trái: 150px; padding-left: 5px;}

Bố cục tĩnh được tạo ra với vị trí tuyệt đối có một vài tính năng quan trọng cần lưu ý:

Bạn đã cam kết sắp xếp mọi thứ.

• Sau khi bạn bắt đầu sử dụng định vị tuyệt đối, bạn cần phải sử dụng nó trong suốt trang của bạn. Tất cả các phần tử trang chính yêu cầu định vị tuyệt đối vì cơ chế lưu thông bình thường không còn đúng vị trí. Bạn vẫn có thể sử dụng bố cục thả nổi

  bên trong một phần tử có vị trí tuyệt đối, nhưng tất cả các yếu tố chính (tiêu đề, cột và chân đế) cần phải có vị trí tuyệt đối nếu một trong số đó có. Bạn nên chỉ định kích thước và vị trí.

• Với cách bố trí nổi, bạn vẫn khuyến khích một lượng lưu thông nhất định. Định vị tuyệt đối có nghĩa là bạn đang chịu trách nhiệm về hình dạng và kích thước của mỗi phần mỗi trong bố cục. Định vị tuyệt đối không thích nghi được.

• Với kỹ thuật này, bạn sẽ bị ràng buộc với chiều rộng và chiều cao màn hình cụ thể. Bạn sẽ gặp khó khăn khi thích nghi với máy tính bảng và điện thoại di động. Tất cả các chiều rộng và chiều cao phải thêm lên.

• Khi bạn xác định kích thước của màn hình, tất cả các chiều cao, chiều rộng, lề, đệm và đường viền phải thêm, hoặc bạn sẽ nhận được một số kết quả kỳ lạ. Khi bạn sử dụng định vị tuyệt đối, bạn cũng có thể dành thời gian chất lượng với máy tính của mình, tìm tất cả các chiều rộng và chiều cao.