Loading post navigation ...
 
 

Pro page

4
Nhận xét

Hiểu rõ hơn về bố cục Blog của blogspot : Dành cho người mới bắt đầu tập chỉnh sửa CSS

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[FD's BlOg] - Bài viết này dành cho những người mới bắt đầu làm quen với blogspot, và nâng cao hơn nữa là hướng dẫn cách tiếp cận bố cục của blog theo phương pháp tiếp cận từ trên xuống để đơn giản mã CSS.

►Phương pháp tiếp cận top-down (từ trên xuống)

Cách tốt nhất để thiết kế một tập tin CSS là sử dụng phương pháp tiếp cận từ trên xuống, nói cách khác là xác định các phần tử chính của blog. Vì vậy, bạn có thể tiến hành để viết mã của bạn trong một cấu trúc chặt chẽ hơn theo cách không cần thiết tránh mã. Trong thực tế, để xác định các thành phần chính trong bố cục của 1 blog cũng đơn giản. Sự xuất hiện các "mã không cần thiết" sẽ xảy ra khi bạn xác định các chi tiết của yếu tố đó. Để đơn giản hóa các mã CSS này, bạn cần tuân thủ 2 "quy tắc" sau:
1. Giảm thiểu số lượng các yếu tố CSS
2. Sử dụng các thẻ HTML chuẩn(P, H1, UL, LI ...) thay vì tạo các class mới.

- Ví dụ : trong blog của bạn, để thiết kế style cho tiêu đề bài viết, bạn có thể sử dụng thẻ <h1> thay vì dùng class mới ".post-title" .

►Bây giờ ta làm quen với các thành phần chính trong bố cục của blog:

Trước khi bắt đầu viết mã CSS của bạn, bạn phải có hình dung rõ ràng trong đầu bạn các mục chính trong bố cục của 1 blog. Lấy ví dụ 1 blog có 2 cột, bạn có thể xác định những phần chính như hình bên dưới:



Bố cục có 4 phần cơ bản như bên dưới:
1. Header (#header) 2. Main content (#main-content) 3. Sidebar (#sidebar) 4. Footer (#footer)

►Bước kế tiếp, là xác đinh các thành phần có trong từng mục chính đó.

1. Header :
- Phần Header gồm có 2 thành phần cơ bản là Logo và thanh Navbar.(xem hình bên dưới)


- Bạn có thể thay đổi lại logo theo cách bên dưới:

#header {
background:url(YOUR-LOGO.gif) no-repeat;
}


- Đối với thanh Navbar, bạn nên sử dụng các thẻ <ul> <li> để tạo .(xem hình bên dưới)



Làm thế nào ta có thể thấy chúng, bạn không nhất thiết phải tạo một class mới như là "#navigation-bar", bởi vì nó đã được xác định bằng cách sử dụng thẻ <ul> trong phần Header (#header ul, #header ul li). Bằng cách này đọan mã CSS của bạn sẽ gọn gàng hơn, đơn giản hơn, dễ quản lý hơn.

2. Main content :
- Ở trong phần main, chủ yếu là chứa nội dung bài viết, như : tựa đề, nội dung, các nhãn... , có thể xem minh họa bên dưới:


- Vì vậy cách tốt nhất để thiết kế các mã CSS là sử dụng các thẻ chuẩn (bên dưới) vào class #main-content :
+ Post section paragraph(nội dung bài viết) (<p>)
+ Post title (tựa đề bài viết) (<h1>)
+ Post date (ngày post)(<h2>)
+ Post tag (nhãn) (<small>)

Và nó trông như thế này:



3. Thanh Sidebar:
- Sẽ rất đơn giản nếu dùng các thẻ <h1> , <p> (xem hình minh họa)



- Và code CSS sẽ trông như thế này:



4. Footer:
- Tùy bạn thiết kế. hòan tòan tương tự.

Như vậy mình đã giới thiệu xong, hy vọng với bài viết này các bạn sẽ nắm rõ hơn về bố cục của 1 blog, và tự tay mình modify code CSS cho nó đơn giản hơn.

Chúc các bạn thành công.



Enter your mail address:

4

welecom nguyenpro

sua cho tui cai ong oi,tui moi dang ky blog chinh sua cho tui cai,nick: giacmo_882003

Đỗ Hữu Công

Anh FD ơi sao bố cục blog của em hở nhiều khoảng trống vô nghĩa giữa các phần trong blog quá, em chỉnh hoài không hết (em vào phần setting rồi, HTML thì chưa). Anh nghiên cứu chỉ dùm em được không? channuoi-thuy.blogspot.com

MR. A.R

DOWNLOAD XXX NURS HENTAI SEX GAME FOR ADULTS 18+ CLICK HERE TO DOWNLOAD
DOWNLOAD SEDUCE ME SEX ADULT PC GAME 18+ CLICK HERE TO DOWNLOAD

Tuấn Kiệt

Ủa sao mất hình rồi bạn ơi.
Phân phối loa thùng



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home