1 Index_box chia 2 cột tự động- moi cot 50% box con co ca hinh Thu Jun 21, 2012 1:13 pm
Admin
Admin
[b]*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
*Demo
cp11410.jpg
[/b][b]*Index_box
[/b]
[b]*CSS
[/b]
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
[/b]
-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
[/b]
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
cp11410.jpg
[/b][b]*Index_box
[/b]
- 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 -->
[b]*CSS
[/b]
- 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}
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
[/b]
- Code:
a[href="/f14-forum"].forumtitle{background:#F6358A;color:#FFF}
-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
[/b]
- Code:
<img src="link ảnh" />
Viết bởi handsomevip007 - FMvi Designer
[/b]