Cách tạo style cho các bài viết tại trang index

Bài này dành cho mấy anh hay nghịch vọc vạch 😛 có chút kinh nghiệm về css thiêt kế lại bố cục sắp xếp các bài viết tại trang chủ hay tại một trang bất kỳ thuộc nhóm trang index. Các bài viết có thể là một, hai hay ba bài viết đầu tiên có tác dụng làm nổi bật hoặc trang trí cho đẹp mắt. 😃

Hai dạng bài viết mẫu các bạn tham khảo mình viết css cho ba bài viết đầu tiên

+ Dạng 1: https://www.nhipsong24h.net

+ Dạng 2: https://ns24h.blogspot.com/search/label/magazine

Điểm mấu chốt có thể thiết kế được là đánh số thứ tự cho class, ví dụ với class .post

Copy

.post:nth-of-type(1)

.post:nth-of-type(2)

.post:nth-of-type(3)

....

Bên cạnh đó các bạn có thể kết hợp với kích thước màn hình chẳng hạn với kích thước màn hình nhỏ nhất 800px mới tạo style

Copy

@media (min-width: 800px) {

#Đặt css trong đây

}

Một điều nữa bạn có thể sử dụng điều kiện cho một trang cụ thể chẳng hạn như trang Label

Copy

<b:if cond='data:view.isLabelSearch'>

<style>

@media (min-width: 800px) {

#Đặt css trong đây

}

</style>

</b:if>

Ví dụ về cách viết css cho trang Label đặt css trên </head>

Copy

<b:if cond='data:view.isLabelSearch'>

<style>

@media (min-width: 800px) {

.post:nth-of-type(1){width:60%;border-bottom:none}

.post:nth-of-type(1) .post-thumb{width:100%;height:260px;margin-right:0}

.post:nth-of-type(1) .post-meta,.post:nth-of-type(1) .post-snippet{display:block;float:left;clear: both;}

.post:nth-of-type(1) .post-meta{padding: 0 0 15px 0;}

.post:nth-of-type(1) .post-title h2{font-size:22px}

.post:nth-of-type(2),.post:nth-of-type(3){width:40%;padding:0 0 0 20px;border-bottom:none;margin:0}

.post:nth-of-type(2) .post-thumb,.post:nth-of-type(3) .post-thumb{width:100%;height:156px;margin-right:0}

.post:nth-of-type(2) .post-snippet,.post:nth-of-type(2) .post-meta,.post:nth-of-type(3) .post-snippet,.post:nth-of-type(3) .post-meta{display:none}

.post:nth-of-type(1) .post-title h2,.post:nth-of-type(2) .post-title h2,.post:nth-of-type(3) .post-title h2{padding:15px 0;float:left;display:block}

.post:nth-of-type(2) .post-title h2,.post:nth-of-type(3) .post-title h2{font-size:18px;line-height:1.4;display:block}

}

</style>

</b:if>

Vâng chỉ đơn giản vậy thôi các bạn có thể khám phá tiếp. Chấm hết bài!!!

Nội dung chính