2005年11月16日 星期三

修改了自己blog的css样式

自己的blog用了很久了，终于修改了一下，把老的有table混排的布局用纯样式表重新改写了一次。虽然css本身的语法都非常简单，但是因为要兼容各种不同的浏览器firefox,safari,ie等等，所耗费的调整时间会成倍的增加。而且同一个浏览器的不同版本也会有不少差异。这些问题，导致不但要求你有良好的语法书写习惯，而且还要掌握大量的小技巧来尽可能的调和浏览器兼容问题。使自己的布局，能够在不同浏览器上，有基本相同的外观。 而且，要写出完全能够通过w3c css validator和W3C Markup Validation的检测的css+xhtml布局，要费不少的力气。我的首页因为聚合了lilina的rss服务，加上用了不少mozilla专用的css tag和后台cgi生成的代码会自动增加一组p标签，导致标签对不匹配，需要手动调整代码。因此，要通过这两个校验太费时了。 至少ajax的升温，导致写符合规范的css和xhtml的要求会变得很平常。为了css开发过程中兼容性的问题，一段时间的知识储备是很必要的。 链接是我blog用的css，还比较乱，应该还可以去掉一些tag和重复的属性。 正文部分所列源码为本站索引页用的源码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><$MTBlogName$></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="author" content="tristones" />
<meta name="copyright" content="Creative Commons" />
<meta name="robots" content="all" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="trisotnes' blog RSS 1.0" href="<$MTBlogURL$>index.rdf" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />
<link rel="alternate" type="application/rss+xml" title="tristones blog" href="http://feeds.feedburner.com/tristones" />
<link rel="alternate" type="application/rss+xml" title="tristones del.icio.us RSS 1.0" href="http://del.icio.us/rss/tristones" />
<link rel="shortcut icon" type="image/ico" href="<$MTBlogURL$>favicon.ico" />
<script type="text/javascript" src="scripts/prototype.lite.js"></script>
<script type="text/javascript" src="scripts/moo.fx.js"></script>
<script type="text/javascript" src="scripts/moo.fx.pack.js"></script>
<script type="text/javascript" src="scripts/fw_menu.js" ></script>
<script type="text/javascript">//feel free to copy & paste *this script* as much as you want.
    var exists;
    var allStretch;
   
    //the main function, call to the effect object
    function init(){
        var divs = document.getElementsByClassName("stretcher");
        allStretch = new fx.MultiFadeSize(divs, {duration: 400});

        items = document.getElementsByClassName("display");
        for (i = 0; i < items.length; i++){
            var h3 = items[i];
            div = h3.nextSibling;
            h3.title = h3.className.replace("display ", "");

            if (window.location.href.indexOf(h3.title) < 0) {
                allStretch.hide(div, 'height');
                if (exists != true) exists = false;
            }
            else exists = true;

            h3.onclick = function(){
                allStretch.showThisHideOpenVIASP(this.nextSibling, 100, 'height');
            }
        }
        if (exists == false) $('naviThread').childNodes[1].fs.toggle('height');
    }
</script>
<MTCloseComments>
</head>
<body>
<!--Start MenuList Module  -->
<div id="menu1Container">
  <div id="menu1Content" class="loadmenu">
    <MTArchiveList archive_type="Category"> <a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> </MTArchiveList>
  </div>
</div>
<div id="menu2Container">
  <div id="menu2Content" class="loadmenu1">
    <MTArchiveList archive_type="Monthly"> <a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> </MTArchiveList>
  </div>
</div>
<div id="menu3Container">
  <div id="menu3Content" class="loadmenu2">
  <a href="http://www.shanyang.gov.cn" target="_blank">山阳招商投资网&reg;</a>
  <a href="http://www.viasp.com" target="_blank">汇华网络科技&reg;</a>
  <a href="http://www.viaspeip.com" target="_blank">VIASPEIP&reg;</a>
  <a href="http://www.dll365.com" target="_blank">多乐轮.com&reg;</a>
  <a href="http://www.viaspeip.com/mimi/" target="_blank">小米的幸福生活</a>
  <a href="http://outdoor.blog.tom.com" target="_blank"> 高原情结</a>
  <a href="http://www.7yue.com" target="_blank">7Yue's BLOG</a>
  <a href="http://www.Topku.com" target="_blank">TopKU's BLOG</a>
  <a href="http://chedong.com/blog" target="_blank">车东's BLOG</a>
  <a href="http://blog.esnai.com/ycy/" target="_blank">行走于一望无际</a>
  <a href="http://www.isunflower.org" target="_blank">向阳花公社</a>
  <a href="http://www.isunflower.org/gallery" target="_blank">公共相册</a>
  </div>
</div>
<!--End MenuList Module  -->
<!-- Start Banner -->
<div id="banner">
  <div class="column-in">
      <div align="right">
        <form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
          <input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
          <input id="search" name="search" size="15" />
          <input type="submit" value="查找" />
        </form>
      </div>
      <div>
      <h1 class="header"><a href="<$MTBlogURL$>" accesskey="2"><$MTBlogName$></a></h1>
      <div class="subHeader">Promote relationship between human and computer</div>
      </div>
  </div>
</div>
<!-- End Banner -->
<div id="navmenu">
  <ul class="gnav">
    <li class="home"><a href="/" title="Home">首页</a></li>
    <li class="category"><a href="#" onmouseover="ypSlideOutMenu.showMenu('menu1');return true;" onmouseout="ypSlideOutMenu.hideMenu('menu1'); return true;">分类导航</a></li>
    <li class="timeline"><a href="#" onmouseover="ypSlideOutMenu.showMenu('menu2');return true;" onmouseout="ypSlideOutMenu.hideMenu('menu2'); return true;">时间导航</a></li>
    <li class="friend"><a href="#" onmouseover="ypSlideOutMenu.showMenu('menu3');return true;" onmouseout="ypSlideOutMenu.hideMenu('menu3'); return true;">友情链接</a></li>
    <li class="lilina"><a href="#lilina">Lilina聚合</a></li>
    <li class="category"><a href="<$MTBlogURL$>archives.html">全部文章</a></li>
  </ul>
</div>
<!-- 右边栏开始 -->
<div id="content"> 
    <div id="newArticleBody">
        <!-- 最新文章列表开始 -->
        <h3 class="title">最新文章</h3>
        <div class="contentLeft">
          <ul>
            <MTCatEntries lastn="5" exclude="13.网罗垃圾">
              <li> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>(
                <MTEntryTags> <a href="http://del.icio.us/tag/<$MTTag encode_url="1"$>"  target="_blank" rel="TAG" title="TAG:<$MTTag$>"><$MTTag$></a></MTEntryTags>
                ) </li>
            </MTCatEntries>
          </ul>
        </div>
         <!-- 最新文章列表结束 -->
        <!-- Tags Clound Start -->
        <h3 class="title">本站标签</h3>
        <div class="contentLeft"><$MTInclude module="TagsCloud"$></div>
        <!-- End Tags Clound -->
    </div>
<div id="naviThread">
  <MTCatEntries lastn="5" exclude="13.网罗垃圾"> <$MTEntryTrackbackData$>
    <MTDateHeader>
    <h3 class="display <$MTEntryDate format="%Y-%m-%d" language="en"$>">
    <a href="#<$MTEntryDate format="%Y-%m-%d" language="en"$>"><$MTEntryDate format="%x"$></a></h3>
    </MTDateHeader>
    <div class="stretcher">
        <h2 class="title"><$MTEntryTitle$></h2>
        <$MTEntryBody$>
        <MTEntryIfExtended>
        <blockquote><a href="<$MTEntryPermalink$>#more">阅读全文..."<$MTEntryTitle$>"</a></blockquote>
        </MTEntryIfExtended>
        <em><$MTEntryAuthor$>发表于<$MTEntryDate format="%X"$> | <a href="<$MTEntryPermalink$>">永久链接</a> |
          <MTEntryIfAllowComments> | <a href="<$MTCGIPath$><$MTCommentScript$>?entry_id=<$MTEntryID$>" onclick="OpenComments(this.href); return false">留言
            (<$MTEntryCommentCount$>)</a> </MTEntryIfAllowComments>
          <MTEntryIfAllowPings> | <a href="<$MTCGIPath$><$MTTrackbackScript$>?__mode=view&amp;entry_id=<$MTEntryID$>" onclick="OpenTrackback(this.href); return false">引用
            (<$MTEntryTrackbackCount$>)</a> </MTEntryIfAllowPings>
        </em>
    </div>
  </MTCatEntries>
</div>
<a name="lilina"></a>
<div id="lilina">
<h3 class="title">聚合你我</h3>
因为安全原因屏蔽此部代码
  </div>
</div>
<div class="clearBoth"></div>
<!-- 左边栏开始 -->
<div id="links">
<!--google adsense -->
<div class="Area">
    <div class="sidetitle">Google Adsense</div>
    <div class="side">
    <script type="text/javascript"><!--
    google_ad_client = "pub-0912623468353988";
    google_ad_width = 234;
    google_ad_height = 60;
    google_ad_format = "234x60_as";
    google_ad_channel ="0697151430";
    google_color_border = "FFFFFF";
    google_color_bg = "FFFFFF";
    google_color_link = "003366";
    google_color_url = "008000";
    google_color_text = "000000";
    //--></script>
    <script type="text/javascript"  src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
    </div>
</div>
<!--flickr -->
    <div class="Area">
        <div class="sidetitle">My Flickr</div>
        <div class="flickrContainer">
        <script type="text/javascript" src="http://www.flickr.com/badge_code.gne?nsid=67086958@N00&count=4&display=random&name=0&size=thumb&raw=1">
        </script>
        </div>
        <div class="clearBoth"></div>
    </div>
<!--douban.com -->
    <div class="Area">
        <div class="sidetitle">我所读.所听.所看</div>
        <div class="flickrContainer">
              <script type="text/javascript" src="http://www.douban.com/service/badge/tristones/?show=collection&select=random&n=4&columns=2&picsize=medium" ></script>
        </div>
        <div class="clearBoth"></div>
    </div>
<!--latest comments -->
    <div class="Area">
    <div class="sidetitle">最近留言</div>
    <div class="sideComment">
    <ul>
    <MTComments lastn="3" sort_order="descend">
    <li>
    <MTCommentEntry><a href="<$MTEntryPermalink$>#comments" title="文章:<$MTEntryTitle$>的留言"><$MTCommentBody$>by<$MTCommentAuthor spam_protect="1"$></a></MTCommentEntry>
    </li>
    </MTComments>
    </ul>
    </div>
    </div>
<!--syndicate -->
    <div class="Area">
        <div class="sidetitle">聚合/联系</div>
        <div class="side">
        <ul>
        <li><a href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/tristones" title="tristones' blog+my del.icio.us+my Flickr"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif" alt="" style="border:0"/></a></li>
        <li><a href="http://feeds.feedburner.com/tristones" title="subscribe include my blog+ my del.icio.us +my Flickr" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/flchklt.gif" alt="" style="border:0"/>
        </a></li>
        <li><a href="http://www.bloglines.com/sub/http://feeds.feedburner.com/tristones" title="tristones' blog" type="application/rss+xml"><img src="http://www.bloglines.com/images/sub_modern1.gif" alt="Subscribe in Bloglines tristones' blog+my del.icio.us+my Flickr" style="border:0"/></a></li>
        <li><a href="http://del.icio.us/tristones"><img src="images/del.icio.gif" alt="我的美味书签" title="my del.icio.us" border="0" /></a></li>
        </ul>
        </div>
    </div>
<!--Misc -->   
        <div class="Area">
        <div class="sidetitle">Misc</div>
        <div class="side">
        <ul>
        <li><a href="http://www.spreadfirefox.com/?q=affiliates&amp;id=141135&amp;t=82"><img border="0" alt="Get Firefox!" title="Get Firefox!" src="http://sfx-images.mozilla.org/affiliates/Buttons/80x15/white_1.gif"/></a></li>
        <li><A href="http://www.creativecommons.cn/licenses/by-nc-sa/1.0"><IMG alt="Creative Commons License" src="http://www.creativecommons.cn/images/public/somerights.gif" border="0" width="88" height="31" ></A></li>
        <li><a class="image" href="http://www.movabletype.org"><img src="images/ban_mtlogo.gif" alt="MoveableType" border="0" /></a></li>
        <li><SCRIPT type='text/javascript' language='JavaScript' src='http://xslt.alexa.com/site_stats/js/t/b?url=tristones.viaspeip.com'></SCRIPT></li>
        <li><a href="http://www.wwfchina.org" target="_blank"><img src="images/wwf.gif" alt="世界自然基金会（中国站）" title="世界自然基金会（中国站）" border="0" /></a></li>
        </ul>
        </div>
    </div>
</div>
<!--左栏结束 -->
<script type="text/javascript">
            Element.cleanWhitespace('naviThread');
            init();
</script>
</body>
</html>

[technorati relative tag]

[相关内容]

由 tristones 发表于 2005年11月16日 下午01時26分

留言