Xây dựng trang web siêu tốc với Foundation 5 [Hướng dẫn]

 tiêu đề lề-dưới: 2em;  .p Phổ biến-bổ sung h4 font-size: 1.125em; lề trên: 0,4em;  .row .row.p Phổ biến-chính lề-dưới: 1,5em;  

Vì Foundation 5 sử dụng các đơn vị tương đối, chúng ta cần sử dụng “em”-s hoặc “còn lại”-s thay vì pixel để theo kịp các quy tắc. (Bạn có thể đọc về các đơn vị CSS: Pixels vs ems vs% tại đây.) Tôi đã sử dụng tiện ích mở rộng Firebird của Firefox để xác định nơi tôi phải ghi đè quy tắc CSS của Foundation 5, bạn có thể sử dụng bất kỳ tiện ích mở rộng trình duyệt phát triển web nào khác nếu bạn muốn.

Ở đây trong đoạn mã CSS ngắn này, chúng tôi chỉ phải ghi đè CSS mặc định của Foundation chỉ một lần, ở quy tắc cuối cùng (.row .row.p phổ biến-chính). Đây là những gì trang web demo bây giờ trông như thế nào:

4.4 Thêm một số nội dung khác

Sử dụng các quy tắc tương tự như trước đây, chúng tôi sẽ thêm một số nội dung vào phần chính của trang. Nội dung mà chúng tôi sẽ thêm bây giờ sẽ là Bài viết mới nhất với hình thu nhỏ.

Foundation 5 có các kiểu hình thu nhỏ được chuẩn bị trước thực sự tuyệt vời mà chúng ta sẽ sử dụng trong Bước này. Hình thu nhỏ nền tảng sử dụng một lớp CSS dựng sẵn được gọi là “thứ” rằng chúng ta cần thêm vào hình ảnh mà chúng ta muốn hiển thị dưới dạng hình thu nhỏ theo cách bạn có thể nhìn thấy nó trong đoạn mã dưới đây.

Đối với mỗi Bài đăng mới nhất, chúng tôi thêm một hàng mới bên dưới Bảng điều khiển phổ biến với lớp CSS tùy chỉnh được gọi là “bài đăng Mới nhất”.

Trên kích thước máy tính bảng và máy tính để bàn, chúng tôi sẽ hiển thị một hình thu nhỏ nhỏ bằng lớp hình thu nhỏ của Foundation ở bên trái, tiêu đề và mô tả ngắn ở bên phải. Trên thiết bị di động, tiêu đề và mô tả sẽ nằm bên dưới hình thu nhỏ.

Bây giờ tôi đã sử dụng “3 cột vừa” và “cột trung bình 9” các lớp để làm cho chúng chia màn hình thành 1: 3, 25% cho hình ảnh và 75% cho văn bản lên từ kích thước trung bình.

Chèn đoạn mã sau bên dưới Bảng điều khiển phổ biến ba lần (cho ba Bài đăng mới nhất). Ở đây tôi chỉ bao gồm mã của một hàng Bài đăng mới nhất, vì tất cả chúng đều sử dụng cùng một đánh dấu HTML, chỉ có nội dung khác nhau.

 
 
    
 
 
Tiêu đề của bài mới nhất
 
Nội dung của bài mới nhất 
 
 
 

Tệp CSS tùy chỉnh của chúng tôi được tạo trong Bước 4.3, app.css cũng có một số quy tắc phong cách mới để giữ vẻ gọn gàng của bản demo. chú thích: Nếu bạn muốn thêm CSS tùy chỉnh của riêng mình vào Foundation, đừng bao giờ quên kiểm tra, với công cụ phát triển web, nơi bạn phải ghi đè các quy tắc mặc định.

Trong đoạn mã CSS bên dưới, chúng ta cần ghi đè chúng theo quy tắc đầu tiên (.row .row.latest-post). Trong quy tắc thứ hai, chỉ cần sử dụng bộ chọn tùy chỉnh của chúng tôi (.latest-post h4) là đủ.

 .hàng .row.latest-post lề-bottom: 1.5em;  .latest-post h4 lề-top: 0; cỡ chữ: 1.125em; 

Nguyên mẫu của chúng tôi bây giờ trông như thế này:

4.5 Thêm phân trang

Trong bước này, chúng tôi sẽ thêm một phân trang thú vị bên dưới Bài viết mới nhất. Foundation 5 giúp chúng tôi hỗ trợ bởi các lớp phân trang tiện lợi, sẵn sàng sử dụng. Chúng tôi sử dụng cùng một mã trong bước này mà bạn có thể tìm thấy trong “Nâng cao” phần bên trong Tài liệu phân trang.

 
 
 
«
 
1
 
2
 
3
 
4
 
Giáo dục 
 
12
 
13
 
»
 
 
 

Dưới đây là những bài viết mới nhất với phần Pagination mới được thêm vào:

5. Điền vào Sidebar

Bây giờ chúng tôi đã sẵn sàng với nội dung chính của trang web demo của mình, đã đến lúc đưa vào thanh bên phải. Thanh bên phải sẽ trượt bên dưới nội dung chính trên kích thước điện thoại di động và máy tính bảng.

Bạn cần chèn tất cả các đoạn mã trong phần này bên trong