Nếu chưa đăng ký, hãy nhấn vào chữ ĐK thành viên ở phía bên trái, hoặc xem phim hướng dẫn tại đây
Nếu đã đăng ký rồi, quý vị có thể đăng nhập ở ngay phía bên trái.
Code chia Module thành nhìu cột
Chia module thành nhìu cột là công việc cần thiết mà bạn phải bít để biến giao diện blog của mình ngày càng chuyên nghiệp. Sau đây là phần hướng dẫn chi tiết công việc hữu ích này .
Đầ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 :D
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;text-align:left;" >
Nội dung cột 1
</td>
<td style="width: 350px;text-align:left;" >
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;text-align:left;">
<img src="http://img195.imageshack.us/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="http://img195.imageshack.us/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;text-align:left;">
<img src="http://img195.imageshack.us/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="http://img195.imageshack.us/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="http://img195.imageshack.us/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 :D
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 :D
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;text-align:left;"" valign="top">
Nội dung cột 1
</td>
<td style="width: 350px;text-align:left;"" 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;text-align:left;"" 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;text-align:left;"" valign="top">
Nội dung cột 1
</td>
<td style="width: 200px;text-align:left;"" valign="top">
Nội dung cột 2
</td>
<td style="width: 200px;text-align:left;"" 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 |
Nguyễn Kim Cương @ 11:13 26/05/2012
Số lượt xem: 282
- Code tạo danh sách Playlist (26/05/12)
- Code tạo bảng danh sách (26/05/12)
- Quảng cáo trượt hai ben Website rất đẹp (25/05/12)
- Code Làm cỏ vụ đông (20/05/12)
- Code Video Giới thiệu trường Xuân Pgong (20/05/12)
Menu ngang
| Bài viết hs | Trường học TT | Nghenhạc | Tintức | KhoCode| Tinhọc | Bài Giảng | Hình Ảnh|Liên Hệ|Home| |


Các ý kiến mới nhất