[Code Css 360 New Plus] Thay hình nền cho Module Bài Viết

Hi cả nhà, hôm nay Tracy sẽ chia sẻ thêm cho cả nhà về code của Bài Viết, trong tất cả các module của bản Beta Plus phần khó nhất là ở Module Bài Viết, vì ngay Trang Chính , module Bài Viết luôn luôn size ở chiều ngang là 600px (với Viền Trong suốt, nếu tính cả viền của module sẽ là 620px) , tất cả Module Bài Viết khi vào trang xem chi tiết, sẽ chuyển thành size 780px( với viền trong suốt, nếu tính viền là 790px).

Với sự thay đổi này, chúng ta phải thay đổi cách design như sau:

Cách Thiết Kế 1:

Dùng 1 màu đơn, ( trắng, trong suốt) hoặc các nền Top của tất cả Module cùng loại. 
Với dạng này thì chúng ta ko có gì phải lo lắng, vì những nền này sẽ được tự lặp lại nền trong code.

Phần Top của Module Bài Viết 
Quote:
#article_list_module .rc_hd {background:transparent url(link hinh) repeat center bottom;height:xxpx;}
Phần Center của Module Bài Viết

Quote:
#article_list_module .rc_bd {background:transparent url(link hinh) repeat center bottom;}
Phần bottom của Module Bài Viết 
Quote:
#article_list_module .rc_ft
{background:transparent url(link hinh) repeat center top;height:xxpx;}
Cách Thiết Kế 2:

Đối với dạng design theo kiểu, Top của Module Bài Viết là hình ảnh như ví du dưới đây 



(Hình mang tính minh họa) 
Ví dụ cụ thể:

Module Bài Viết ngoài Trang Chính 

Module Bài Viết khi xem Chi tiết 

Các bạn phải cố định hình ảnh 1 góc là Trái hoặc phải cho mục Top như trên. 
Lúc đó, design riêng cho mục Top này kích thước dài nhất là 800px ( kích thước này qua kinh nghiệm thấy nó ổn nhất nên nhắc khéo các bạn để sử dụng phù hợp), hình canh lề Trái hoặc phải như ví dụ trên,để khỏang hình ảnh lập lại phía sau đuôi là được.
Về code, code luôn luôn cho canh chỉnh bên Trái hoặc Phải như hình ảnh mình design như trên. 

Phần Top của Module Bài Viết

Quote:
#article_list_module .rc_hd {
background:transparent url(link hinh) no-repeat scroll left center;
height:xxpx;}
Phần Center của Module Bài Viết
Quote:
#article_list_module .rc_bd {background:transparent url(link hinh) repeat leftbottom;}
Phần bottom của Module Bài Viết
Quote:
#article_list_module .rc_ft
{background:transparent url(link hinh) repeat left top;height:xxpx;}


Chú ý:

Với cách thiết kế 2, các bạn sẽ thấy phần chữ "Bài Viết" bị thừa ra, nếu ai dùng cách deisgn này thì tất cả các module sẽ là hình ảnh có tiêu đề cho tất cả module và dùng thêm code này để xóa chữ.

left: các bạn có thể thay là right, nếu design ảnh từ tay Phải và code cũng sẽ để đồng loạt thuộc tính là right hoặc center

Quote:
#bd h2 {
font-size:0;
}
Ngược lại nếu các bạn muốn chỉnh nền Tittle như hình ví dụ sau, các bạn dùng code sau:




Nền Tittle Bài Viết

Quote:
#article_list_module .rc_bd .rc_bc .hd .titlebar{
background:#mã màu url(Link hình ảnh) none repeat scroll 0 0;
}

Mọi thắc mắc liên hệ Tracy-Truong 
Viết bởi Tracy-Truong

Nguồn : chúng tôi sưu tầm từ nhiều nguồn

Không có nhận xét nào

Một số lưu ý khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!

» Cảm ơn bạn đã ghé thăm websitemika.com
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một góp ý !
» Vui lòng đăng những góp ý lịch sự và gõ tiếng Việt có dấu nếu có thể
HƯỚNG DẪN ĐĂNG THÔNG TIN GÓP Ý :
Bước 1 – Gõ nội dung bạn cần góp ý tới chúng tôi.
Bước 2 - Xử lý mục " Nhận xét với tư cách "
Cách 1 : - Chọn Tên/URL: Gõ tên và địa chỉ blog bạn vào.Nếu không có tài khoản, bạn vẫn có thể nhận xét bằng cách Chọn hồ sơ là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống để cho chúng tôi biết bạn là ai. Bạn vui lòng gõ tiếng Việt có dấu để mọi người không hiểu nhầm so thành sờ, mo thành mò.
Cách 2 : - Chọn Ẩn danh.
Bước 3 - Xem trước: Tuỳ, Bạn là người cẩn thận cần xem lại nội dung Bạn đã gõ (rất cần nếu Bạn có nhập mã, để xem nó hiển thị có đúng không).
Bước 4 - Nên nháy chuột vào nội dung, bấm phím Ctrol + A rồi Ctrol + C nhằm copy nội dung - Đề phòng lỡ hệ thống đăng góp ý trục trặt hoặc mạng rớt, ta có thể Ctrol + V dán đăng lại góp ý để khỏi tốn thời gian!
Bước 5 – Lick vào Button : Đăng nhận xét . Vậy là xong,góp ý của các bạn sẽ được Admin kiểm duyệt và cho đăng trong vòng 12h.Cảm ơn các bạn đã góp ý !

GIỚI THIỆU ĐẾN QUÝ KHÁCH MỘT SỐ DỰ ÁN SẼ THỰC HIỆN TRONG NĂM 2018


DANH MỤC BÀI ĐĂNG - KHÁCH MUỐN XEM NỘI DUNG GÌ LICK VÀO TIÊU ĐỀ ẤY


WEBSITEMIKA - THƯƠNG HIỆU UY TÍN BỞI HƠN 300 DOANH NGHIỆP VÀ CÁC THƯƠNG HIỆU VỪA VÀ NHỎ LỰA CHỌN
Điểm giao dịch: Online 24h
-Email: Setup247@gmail.com - Website: https://thietkeweb.mikalaza.com