fbpx

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

2010/07/12 WordPress

前二天丫湯花了一點時間把網站的jquery效果都拿掉,如果有注意到的話會發現有一些小變化,原本的一些效果都沒了,特別是原本的Tab分頁換成了另一種,小小研究了一些也把Tab改成使用純CSS來達成,雖然效果沒有像jquery那麼的優,不過就當做是練習,才改了2天就有人問起源碼,當然丫湯沒那麼小氣,我們立即就往下來看看源碼吧。

01


往下就先公開源始碼,至於如何運用,如果你已經有一定的基礎應該是很容易就移植到自己的佈景上,這個方式除了IE6不相容,其它都還OK,IE6等待丫湯修改出來再修正吧,應用部份就不額外做教學,先做個筆記記錄起來。

 

前台PHP的源始碼:

<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>

CSS源始碼:

#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;}

你可能對這些內容也有興趣

阿湯 作者:阿湯

對電腦 & 網路資訊充滿興趣與熱情、瘋了似的每日堅持發文,「阿湯」這個名字是由湯姆克魯斯而來的,雖然我沒有他帥氣,也不會演電影,但我會寫文章....

更多關於的文章》

3 個留言

  1. Avatar Lay表示:

    版大你好,
    我要登入WP後台的時候進不去,她還出現
    Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 491520 bytes) in /home/brownsug/public_html/video/wp-admin/menu.php on line 235

    要怎麼修正??

    阿湯說:

    http://www.rossi.url.tw/wordpress/?p=396

  2. Avatar 碳碳表示:

    給新手做的補充:id中的tabs可以改成比如說改成xd0107,
    CSS的「#tabs」的部分也要改(只要id=”tabs”中的tabs有改,CSS全部的#tabs都要改)

    至於IE6實在不想理它,要做出這樣的特效而不符合W3C的標準有點不是很值得(碳碳認為啦)

    阿湯說:

    蛤~~啥IE6,不認識…

  3. Avatar 表示:

    謝謝阿湯大~
    也來學習下~^^

    阿湯說:

    ^^

發表留言 »

姓名(*)
信箱(*)