CSS筆記-純CSS製作Tab分頁效果

<div id="tabs">

<ul>

<span><a href="#nogo" class="one outer">FaceBook<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div class="tab_left">

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/zh_TW"></script><script type="text/javascript">FB.init("566005acd00c7c99f6ce950cf6220d82");</script><fb:fan profile_id="174208466961" stream="" connections="10" width="260"></fb:fan><div style="font-size:8px; padding-left:10px"><a href="http://www.facebook.com/pages/cb104809/174208466961"> 就是教不落在 Facebook 上</a> </div>

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</span>

<span><a href="#nogo" class="two outer">最新文章<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div class="tab_center">

<?php get_archives("postbypost", "6", "html", " ", " "); ?>

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</span>

<span><a href="#nogo" class="three outer">熱門文章<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div class="tab_right">

<?php if (function_exists('get_most_viewed')): ?><?php get_most_viewed('post', 5, 0, true, false); ?><?php endif; ?>

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</span>

</ul>

<br class="clear" />

<ul>

<span><a href="#nogo" class="four outer">最新留言<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div class="tab_left">

<div class="rc"><?php

global $wpdb;

$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved,comment_author_email, comment_type,comment_author_url, SUBSTRING(comment_content,1,30) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND comment_author != 'admin' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT 7";

$comments = $wpdb->get_results($sql);

$output = $pre_HTML;

foreach ($comments as $comment) {

$output .= "<li><a href=\"" . get_permalink($comment->ID) . "#comment-" . $comment->comment_ID . "\" title=\"".$comment->post_title."\">". strip_tags($comment->comment_author)."說『".strip_tags($comment->com_excerpt)."...』</a></li>";

}

$output .= $post_HTML;

$output = convert_smilies($output);

echo $output;

?></div>

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</span>

<span><a href="#nogo" class="five outer">噗浪<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div class="tab_center">

<div style="width:260px; height:250px;"><iframe src="http://www.plurk.com/getWidget?uid=3655627&amp;h=300&amp;w=260&amp;u_info=2&amp;bg=B7E1F1&tl=EBF3FA" width="260" frameborder="0" height="250" scrolling="no"></iframe><div style="float: right; padding: 1px;"> <a href="http://plurk.com/" target="_blank" style="font-size: 10px !important; color: #999 !important; border: none; text-decorate: none;" title="Plurk - A Social Journal for your life">Plurk.com</a></div></div>

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</span>

<span><a href="#nogo" class="six outer">交換連結<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div class="tab_right">

<?php get_links(2, '<li>', '</li>',0,0, 'rand', 0, 0, 10, 0); ?> 

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</span>

</ul>

</div>

#tabs {font-size: 13px;width:260px;margin-top:20px;}

#tabs ul {padding:0; margin:0; width:260px; spanst-style:none; position:relative;}

#tabs ul span {float:left;display:inspanne; width:75px; height:40px; margin:0 4px;}

#tabs ul span a.outer {width:75px; height:20px; border-bottom:1px sospand #9c9c9c; text-aspangn:right; spanne-height:45px; text-decoration:none; text-indent:50px; color:#464; font-weight:bold; margin-bottom:3px;}

#tabs ul span a.one {text-decoration:underline;background:url(i/menubar.gif) no-repeat 0 -310px;padding:14px 0 0 14px;}

#tabs ul span a.two {text-decoration:underline;background:url(i/menubar.gif) no-repeat 0 -350px;padding:14px 0 0 14px;}

#tabs ul span a.three {text-decoration:underline;background:url(i/menubar.gif) no-repeat 0 -390px;padding:14px 0 0 14px;}

#tabs ul span a.four {text-decoration:underline;background:url(i/menubar.gif) no-repeat 0 -430px;padding:14px 0 0 18px;}

#tabs ul span a.five {text-decoration:underline;background:url(i/menubar.gif) no-repeat 0 -470px;padding:14px 0 0 40px;}

#tabs ul span a.six {text-decoration:underline;background:url(i/menubar.gif) no-repeat 0 -510px;padding:14px 0 0 14px;}

#tabs ul span div {display:none;display:inline-block;}

#tabs ul span:hover {padding-bottom:275px; border-bottom:1px sospand #fff; color:#222; margin-bottom:0;cursor:pointer;background:url(icon/tab.gif) no-repeat;}

#tabs ul li{

background: url(i/icons.gif) no-repeat 0 -280px;

list-style-type:none;

padding-left:18px;

line-height:21px;}

#tabs ul li:hover {

background: url(i/icons.gif) no-repeat 0 -280px;

list-style-type:none;

padding-left:18px;

line-height:21px;}

#tabs ul span:hover > a.outer {color:#222;height:45px; cursor:pointer;}

#tabs ul span:hover div {display:block; padding:5px 0; position:absolute; left:0; width:260px; height:260px; border-bottom:3px sospand #fff;}

#tabs ul span a:hover div {display:block; padding:5px 0; position:absolute; left:0;  width:260px; height:260px; border-bottom:3px sospand #fff;}

#tabs ul span a:hover div.tab_left,

#tabs ul span:hover div.tab_left{}

#tabs ul span a:hover div.tab_center,

#tabs ul span:hover div.tab_center{}

#tabs ul span a:hover div.tab_right,

#tabs ul span:hover div.tab_right{}

.clear {clear:both; height:0; spanne-height:0; overflow:hidden;}

#tabs span.base {display:block; height:20px;color:#bc8f8f;}

#tabs div h3 { margin-bottom:5px;}

#tabs div p {font-weight:normal; text-aspangn:left; color:#222; margin-top:2px;}

#tabs div a img {border:0;}

#tabs div img.image {float:left; border:0; margin-top:-35px; margin-right:5px;}

#tabs div a.unlock {display:block; width:30px; height:30px; margin:0 auto;}

#tabs div a:hover.unlock img {visibispanty:hidden;}

.rc{margin:0 auto;width:260px;}