Administrator
| | | | Admin
Tổng số bài gửi : 121 Danh tiếng : 0 Ngày Tham Gia : 01/02/2011 Tuổi : 27 Đến từ : Việt NAm
| | | | |
| Tiêu đề: Cách chia Module Blog ra làm nhiều cột Tue Apr 12, 2011 10:37 am | |
| | | | |
Hum nai quên mất ko đi thi, tí thì tèo mất, 2 lần rồi >"< may có đứa bạn nó alo đến gọi đi thi hì.. vừa thi về xong, check mail thấy có bạn hỏi cách chia Cái module ra làm 2 3 hay nhiều cột như thía nào. Như hình minh họa bên trên hì ^^! cái nài thì cơ bản là dễ ^^! nhưng phải bít chút ít HTML ^^! hì...
Cũng ko cóa gì đâu Cái nài các bạn cũng chẳng cần hỉu lắm ^^!, mình sẽ đưa code để các bạn xài ^^!.
Đầu tiên là phải tạo 1 module đã ( cái nài đừng nói ko bik nha ^^!, trong mục Yahoo Plus + Hướng dẫn có rồi đấy )
Tiếp theo, các bạn cho cái Module nó nằm ra vị trí ở giữa trang, thía cho nó to còn chia đc nhìu, ko thì cho lên top hoặc dưới bottom cũng đc hì Đây là code chia cái module ra làm 2 cột:
<table border="1" width="100%"> <tbody> <tr> <td width="50%">Nội dung cột 1</td> <td width="50%">Nội dung cột 2</td> </tr> </tbody> </table>
VD: Nội dung cột 1 Nội dung cột 2
Cái này cơ bản thì nó có viền ở xung quanh, nếu mún xóa viền đi, các bạn sửa cái border=0 là đc. Để chèn nội dung vào các bạn chèn tương tự như sau:
<table border="1" width="100%"> <tbody> <tr> <td width="50%"> <img src="https://2img.net/r/ihimizer/img195/5910/iuchiplove.gif" /><a href="http://linkbaiviet1.com">Tiêu đề bài viết 1</a><br /> <img src="https://2img.net/r/ihimizer/img195/5910/iuchiplove.gif" /><a href="http://linkbaiviet1.com">Tiêu đề bài viết 2</a><br /></td> <td width="50%"> <img src="https://2img.net/r/ihimizer/img195/5910/iuchiplove.gif" /><a href="http://linkbaiviet1.com">Tiêu đề bài viết 1</a><br /> <img src="https://2img.net/r/ihimizer/img195/5910/iuchiplove.gif" /><a href="http://linkbaiviet1.com">Tiêu đề bài viết 2</a><br /></td> </tr> </tbody> </table>
Ví dụ: Tiêu đề bài viết 1 Tiêu đề bài viết 2 Tiêu đề bài viết 1 Tiêu đề bài viết 2 Các bạn để ý, đoạn
<img src="https://2img.net/r/ihimizer/img195/5910/iuchiplove.gif" />
là hình ngôi sao ở trước các tiêu đề, các bạn mún thay = cái gì cũng đc. Còn đoạn này <a href="http://linkbaiviet1.com">Tiêu đề bài viết 1</a>
là để liên kết tới bài viết của bạn Các bạn có thể thay sao cho phù hợp Còn cái <br />
là để xuống dòng. Mình viết cái nài theo cách cực đơn giản để các bạn dễ hỉu + dễ làm Còn nếu mún pro hơn thì kết hợp ít CSS nữa thì sẽ đẹp + gọn hơn hì
Có 1 cái nữa là, nếu dùng code cơ bản như này, thì khi nội dung cột 1 dài hơn cột 2 hoặc ngược lại thì cái cột có nội dung ngắn hơn sẽ bị hiển thị tụt xuống ( ra giữa cột) Nếu muốn lúc nào vị trí của các bài viết cũng ở trên top của cột thì các bạn thêm cái đoạn mình to đậm như bên dưới này vào: <td width="50%" valign="top">Nội dung cột 1</td>
Vậy sau khi thêm sẽ đc cái này Nội dung cột 1
Nội dung cột 2
Trên này code để chia module thành 2 cột. Vậy nếu muốn chia thêm cột thì sao ? VD là 3 cột các bạn chỉ cần chèn thêm 1 đoạn nữa
<table border="1" width="100%"> <tbody> <tr> <td valign="top" width="33%">Nội dung cột 1</td> <td valign="top" width="33%">Nội dung cột 2</td> <td valign="top" width="33%">Nội dung cột 3</td> </tr> </tbody> </table>
là đc. nếu muốn độ rộng các cột ngang nhau thì các bạn chia cái % đều ra là đc.
Vậy là đc 3 cột rồi nhé: VD:
Nội dung cột 1 Nội dung cột 2 Nội dung cột 3
Okie Nếu muốn nhìu cột hơn, các bạn chỉ cần làm tương tự như trên là đc hì ^^! Cái nài cũng đơn giản, ko có gì cả Các bạn xem ai thích thì làm nha ^^! hì.. Nếu thích thì hãy gửi web này cho các bạn khác cùng bít để ủng hộ cho ChipLove nha ^^! hì. Càng đông càng vui càng hứng, có tinh thần post nhìu bài hay hơn nữa ^^! hi Chúc các bạn thành công Administrator | | | | | |
|