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 style="width: 600px" border="1">
<tr>
<td style="width: 350px" >
Nội dung cột 1
</td>
<td style="width: 350px" >
Nội dung cột 2
</td>
</tr>
</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" style="width: 600px" >
<tr>
<td style="width: 350px" >
<img src="https://2img.net/r/ihimizer/img195/5910/iuchiplove.gif"><a href="http://vn.myblog.yahoo.com/chiplove.9xpro/article?mid=915">Tiêu đề bài viết 1</a><br>
<img src="https://2img.net/r/ihimizer/img195/5910/iuchiplove.gif"><a href="http://vn.myblog.yahoo.com/chiplove.9xpro/article?mid=915">Tiêu đề bài viết 1</a><br>
</td>
<td style="width: 350px" >
<img src="https://2img.net/r/ihimizer/img195/5910/iuchiplove.gif"><a href="http://vn.myblog.yahoo.com/chiplove.9xpro/article?mid=915">Tiêu đề bài viết 1</a><br>
<img src="https://2img.net/r/ihimizer/img195/5910/iuchiplove.gif"><a href="http://vn.myblog.yahoo.com/chiplove.9xpro/article?mid=915">Tiêu đề bài viết 1</a><br>
</td>
</tr>
</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://vn.myblog.yahoo.com/chiplove.9xpro/article?mid=915">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ấu trúc
<a href="link bai viet">Tiêu đề bài viết </a>
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 này vào:
valign="top"
Vậy sau khi thêm sẽ đc cái này
-------------------------------------------------
<table border="1" style="width: 600px" >
<tr>
<td style="width: 350px" valign="top">
Nội dung cột 1
</td>
<td style="width: 350px" valign="top">
Nội dung cột 2
</td>
</tr>
</table>
-------------------------------------------------
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
-------------------------------------------------
<td style="width: 200px" valign="top">
Nội dung cột 3
</td>
-------------------------------------------------
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.
-------------------------------------------------
<table border="1" style="width: 600px" >
<tr>
<td style="width: 200px" valign="top">
Nội dung cột 1
</td>
<td style="width: 200px" valign="top">
Nội dung cột 2
</td>
<td style="width: 200px" valign="top">
Nội dung cột 3
</td>
</tr>
</table>
-------------------------------------------------
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