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


.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


@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


<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>


<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!!!

Đăng nhận xét

✪★ Chèn link ảnh/video trực tiếp vào khung bình luận để hiển thị hình ảnh hay video cho phần nội dung.
✪★ Nếu tải file mẫu không được, vui lòng để lại nhận xét vào khung bình luận bên dưới để được hỗ trợ nhé .

Mới hơn Cũ hơn