![[TUT by hand]Index_box chia 2 cột tự động Empty](https://2img.net/i/empty.gif)
*Giới thiệu
Trước mắt mình chia sẻ các bạn mẫu index_box mình tạo trước. Sau này nếu có điều kiện sẽ hướng dẫn các bạn chỉnh ngay trên forum các bạn![[TUT by hand]Index_box chia 2 cột tự động 343215](/users/2515/12/79/63/smiles/343215.gif)
*Demo
https://i.servimg.com/u/f44/15/64/85/86/cp11410.jpg
*Index_box
*CSS
*Hiệu ứng phụ
Làm nổi bật tên box cần thiết (Demo: Box "Nhật kí lớp" hình trên)
Chèn code sau vào CSS thay bằng link box cần làm nổi bật
*Lưu ý
-Index_box này không có phần mô tả vì phần mô tả được dùng để chứa biểu tượng cho box. Chèn code sau vào phần mô tả để tạo icon box
![[TUT by hand]Index_box chia 2 cột tự động Cp11510](https://i.servimg.com/u/f44/15/64/85/86/cp11510.png)
Trước mắt mình chia sẻ các bạn mẫu index_box mình tạo trước. Sau này nếu có điều kiện sẽ hướng dẫn các bạn chỉnh ngay trên forum các bạn
*Demo
https://i.servimg.com/u/f44/15/64/85/86/cp11410.jpg
*Index_box
- Code:
<div class="pun-crumbs">
<p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="main-head">
<div class="page-title">{catrow.tablehead.L_FORUM}</div>
</div>
<div class="main-content">
<table cellspacing="0" class="table">
<tbody class="statused">
<tr>
<td>
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="box">
<h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
<br />
<div class="box1">{catrow.forumrow.FORUM_DESC}</div>
<div class="box2">
<!-- BEGIN switch_topic_title -->
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
<!-- END switch_topic_title -->
{catrow.forumrow.USER_LAST_POST}
</div>
<center><div class="box3"><strong>{catrow.forumrow.TOPICS}</strong> chủ đề | <strong>{catrow.forumrow.POSTS}</strong> số bài</div></center>
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
<strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
</div>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
</td>
</tr>
</tbody>
</table>
</div>
<!-- END tablefoot -->
<!-- END catrow -->
</div>
<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
<ul>
<li><a href="{U_TODAY_ACTIVE}">Chủ đề hôm nay</a></li>
<li><a href="{U_TODAY_POSTERS}">Tích cực hôm nay</a></li>
<li><a href="{U_OVERALL_POSTERS}">Thành viên tích cực</a></li>
</ul>
<!-- BEGIN switch_delete_cookies -->
<p class="right">
<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">Xóa Cookies</a>
</p>
<!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->
*CSS
- Code:
.box{width:47%;float:left;border:2px solid #7D2252;border-top:4px solid #7D2252;margin:5px;padding:2px}
a.forumtitle{background:#7D2252;padding:1px 15px 1px 5px;border-radius:0 0 10px 0}
.box1{width:64px;max-height:64px;float:right}
.box2{margin-left:10px}
.box3{background:#7D2252;color:#FFF;padding:4px;margin-bottom:0}
*Hiệu ứng phụ
Làm nổi bật tên box cần thiết (Demo: Box "Nhật kí lớp" hình trên)
Chèn code sau vào CSS thay bằng link box cần làm nổi bật
- Code:
a[href="/f14-forum"].forumtitle{background:#F6358A;color:#FFF}
*Lưu ý
-Index_box này không có phần mô tả vì phần mô tả được dùng để chứa biểu tượng cho box. Chèn code sau vào phần mô tả để tạo icon box
- Code:
<img src="link ảnh" />
Viết bởi handsomevip007 - FMvi Designer
![[TUT by hand]Index_box chia 2 cột tự động 377437](/users/2515/12/79/63/smiles/377437.gif)
index vs chả box, toàn code vs code