Bài tut net là rất tốt, nhưng tôi có một số chi tiết để chia sẻ. Học Grid960 rất đau đớn đối với tôi. Hầu hết điều này là nhắc lại bài báo tuts net. Điều này cho phép trực giác cho người mới, vì nó là một nhức đầu như:
Tóm tắt
báo và tạp chí hệ thống lưới điện sử dụng với máng xối ở giữa, và nó làm cho trang tìm kiếm nhiều dễ chịu hơn đối với mắt khi bạn sử dụng các kỹ thuật thiết kế. Lưới sẽ hướng dẫn bạn một cách hoàn hảo. Trước khi chúng ta bắt đầu, bạn phải hiểu việc lồng ghép CSS/HTML.
<div class="a">
I include all the items A.
<div class="b">
I include all the items of B with all of A.
</div>
<div class="c">
I include all the items of C with all of A. B is not here, but it is on the same level.
<div class="d">
I include all the items of A with C and D
</div>
</div>
Nhìn vào ví dụ tập tin để xem làm thế nào bạn có thể phá vỡ thiết kế của bạn thành một mạng lưới.
Sử dụng trình kiểm tra bằng cách nhấn F12 trong Chrome + IE + Firefox (Cảm ơn Larry!). Đánh dấu các hộp để xem cách css được chỉnh sửa.Tôi thấy rất khó để đi sâu vào các tệp css của Grid960. Bạn sẽ thấy mỗi lưới được tạo ra như thế nào
Khai báo lưới có kích thước 12 làm div cha. Các div trẻ em phải thêm tối đa 12 và bạn có thể chia nhỏ trang bất kỳ cách nào bạn muốn. Ví dụ: 3 lưới + 3 lưới + 6 lưới = 12 lưới. 3 lưới + 4 lưới + 4 lưới + 1 lưới = 12 lưới. Bạn có thể thấy điều này nếu bạn sử dụng F12 trong Chrome. Đánh dấu lưới trong tệp ví dụ. Đừng quên để thêm div rõ ràng khi bạn đang thực hiện với một hàng và muốn bắt đầu một cái mới.
<div class="container_12">
<div class="grid_12"><a href="images/header.png" alt=""></a></div>
<div class="clear"></div>
<div class="grid_12" id="navbar">A</div>
<div class="clear"> </div>
<div class="grid_7">B</div>
<div class="grid_5">C</div>
<div class="clear"></div>
<div class="grid_12 spacer">D</div>
<div class="clear"></div>
<div class="grid_3">E</div>
<div class="grid_3">F</div>
<div class="grid_3">G</div>
<div class="grid_3">H</div>
<div class="clear"></div>
<div class="grid_12 spacer">I</div>
<div class="clear"></div>
<div class="grid_4">J</div>
<div class="grid_4">K</div>
<div class="grid_4">L</div>
</div>
Suffix và Prefix:
Giả sử bạn muốn lưới của bạn để bắt đầu ở giữa. Nó không đủ để tự khai báo lưới 3. Bạn cần phải cung cấp cho nó một thông tin bổ sung nói rằng tôi muốn nó "trôi nổi". Đây là nơi hậu tố và tiền tố đi vào. Tiền tố có nghĩa là bỏ qua x số lượng div và hậu tố có nghĩa là bỏ qua x lượng div sau đó.
Từ tuts ròng
Alpha và Omega:
Nếu tôi muốn áp dụng một phong cách và có nó đạt trên nhiều lưới bao gồm không gian máng xối. Alpha là đầu tiên và omega là div cuối cùng được áp dụng.
Từ tuts ròng
Đẩy và Kéo
này là dành cho Larry! Đẩy và kéo là dành cho các nhà phát triển muốn sắp xếp lại các trang cho SEO.
http://www.clubosc.com/960-grid-tutorial-understanding-push-and-pull-classes.html
Thông báo như thế nào hồng và lớp vàng được đảo ngược, tuy nhiên divs được sắp xếp theo kiểu ngược lại?
nhưng nơi nào họ giải thích tất cả các selectors bạn có thể sử dụng: .suffix_x .prefix_x .push_x .pull_x .clear .clear_fix – ajsie