看wordpress模版twentyeleven有感

摘要：

　　今天想改一个wordpress的模版，于是研究了一下他的官方模版twentyeleven，发现了他的布局和平时的习惯有些不同之处，感觉对于自己比较新，于是记录下来。

简介：

　　首先上它index.php的一段代码（主要是看它的布局了，这是从浏览器端拷贝出来的，不是最原始的代码了）。

　　这里就看三个div了，div#main包含了div#primary和div#secondary如图一。为了更清楚，分别给div#primary和div#secondary加上了#069和yellow的背景颜色。

　　下面的重点就是div#primary和div#secondary。

<div id="main">
  <div id="primary" class=" webdeveloper-floated-element">
    <div role="main" id="content">
      <article class="post-5 post type-post status-publish format-gallery hentry category-1" id="post-5">
        <header class="entry-header">
          <hgroup>
            <h2 class="entry-title"><a rel="bookmark" title="Permalink to 1" href="http://****/blog/changchengdecao/2012/03/30/1/">1</a></h2>
            <h3 class="entry-format">Gallery</h3>
          </hgroup>
          <div class="entry-meta"> <span class="sep">Posted on </span><a rel="bookmark" title="上午 4:21" href="http://****/blog/changchengdecao/2012/03/30/1/">
            <time pubdate="" datetime="2012-03-30T04:21:11+00:00" class="entry-date">2012 年 3 月 30 日</time>
            </a><span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a rel="author" title="View all posts by 长城的草" href="http://****/blog/changchengdecao/author/长城的草/" class="url fn n">长城的草</a></span></span> </div>
          <!-- .entry-meta --> 
        </header>
        <!-- .entry-header -->
        
        <div class="entry-content">
          <figure class="gallery-thumb webdeveloper-floated-element"> <a href="http://****/blog/changchengdecao/2012/03/30/1/"><img width="150" height="150" title="1.index" alt="1.index" class="attachment-thumbnail" src="http://****/blog/changchengdecao/files/2012/03/1.index_-150x150.png"></a> </figure>
          <!-- .gallery-thumb -->
          
          <p><em>This gallery contains <a rel="bookmark" title="Permalink to 1" href="http://****/blog/changchengdecao/2012/03/30/1/">3 photos</a>.</em></p>
        </div>
        <!-- .entry-content -->
        
        <footer class="entry-meta"> <span class="cat-links"> <span class="entry-utility-prep entry-utility-prep-cat-links">Posted in</span> <a rel="category tag" title="查看 工作 中的全部文章" href="http://****/blog/changchengdecao/category/%e5%b7%a5%e4%bd%9c/">工作</a> </span> <span class="sep"> | </span> <span class="comments-link"><a title="《1》上的评论" href="http://****/blog/changchengdecao/2012/03/30/1/#respond"><span class="leave-reply">Leave a Reply</span></a></span> <span class="edit-link"><a title="编辑文章" href="http://****/blog/changchengdecao/wp-admin/post.php?post=5&amp;action=edit" class="post-edit-link webdeveloper-floated-element">Edit</a></span> </footer>
        <!-- #entry-meta --> 
      </article>
      <!-- #post-5 -->
      
      <article class="post-1 post type-post status-publish format-standard hentry category-1" id="post-1">
        <header class="entry-header">
          <h1 class="entry-title"><a rel="bookmark" title="Permalink to 世界，你好！" href="http://****/blog/changchengdecao/2012/02/29/hello-world/">世界，你好！</a></h1>
          <div class="entry-meta"> <span class="sep">Posted on </span><a rel="bookmark" title="上午 1:01" href="http://****/blog/changchengdecao/2012/02/29/hello-world/">
            <time pubdate="" datetime="2012-02-29T01:01:27+00:00" class="entry-date">2012 年 2 月 29 日</time>
            </a><span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a rel="author" title="View all posts by snceditor3" href="http://****/blog/changchengdecao/author/snceditor3/" class="url fn n">snceditor3</a></span></span> </div>
          <!-- .entry-meta -->
          
          <div class="comments-link"> <a title="《世界，你好！》上的评论" href="http://****/blog/changchengdecao/2012/02/29/hello-world/#comments">3</a> </div>
        </header>
        <!-- .entry-header -->
        
        <div class="entry-content">
          <p>Welcome to <a href="http://****/blog/">花样博客</a>. This is your first post. Edit or delete it, then start blogging!</p>
        </div>
        <!-- .entry-content -->
        
        <footer class="entry-meta"> <span class="cat-links"> <span class="entry-utility-prep entry-utility-prep-cat-links">Posted in</span> <a rel="category tag" title="查看 工作 中的全部文章" href="http://****/blog/changchengdecao/category/%e5%b7%a5%e4%bd%9c/">工作</a> </span> <span class="sep"> | </span> <span class="comments-link"><a title="《世界，你好！》上的评论" href="http://****/blog/changchengdecao/2012/02/29/hello-world/#comments"><b>3</b> Replies</a></span> <span class="edit-link"><a title="编辑文章" href="http://****/blog/changchengdecao/wp-admin/post.php?post=1&amp;action=edit" class="post-edit-link webdeveloper-floated-element">Edit</a></span> </footer>
        <!-- #entry-meta --> 
      </article>
      <!-- #post-1 --> 
      
    </div>
    <!-- #content --> 
  </div>
  <!-- #primary -->
  
  <div role="complementary" class="widget-area webdeveloper-floated-element" id="secondary">
    <aside class="widget" id="archives">
      <h3 class="widget-title">Archives</h3>
      <ul>
        <li><a title="2012 年三月" href="http://****/blog/changchengdecao/2012/03/">2012 年三月</a></li>
        <li><a title="2012 年二月" href="http://****/blog/changchengdecao/2012/02/">2012 年二月</a></li>
      </ul>
    </aside>
    <aside class="widget" id="meta">
      <h3 class="widget-title">Meta</h3>
      <ul>
        <li><a href="http://****/blog/changchengdecao/wp-admin/">管理站点</a></li>
        <li><a href="http://****/blog/changchengdecao/wp-login.php?action=logout&amp;_wpnonce=2e55983f13">登出</a></li>
      </ul>
    </aside>
  </div>
  <!-- #secondary .widget-area --> 
</div>

　　

图一

 

　　布局的实现

　　1、各层的居中：由最外层的div#page实现，html代码中未贴出来

#page {
    margin: 2em auto;
    max-width: 1000px;
}

　　2、div#primary：

　　宽度为100%由父元素决定，此处为1000px

　　通过float浮动和margin结合与div#secondary的float浮动和margin实现了巧妙的定位功能

　　（background是为了区分层加上的）

#primary {
    background: none repeat scroll 0 0 #006699;
    float: left;
    margin: 0 -26.4% 0 0;
    width: 100%;
}

　　3、div#secondary

　　宽度为18.8%由父元素决定，此处为188px

　　通过float浮动和margin结合与div#primary的float浮动和margin实现了巧妙的定位功能

#secondary {
    background: none repeat scroll 0 0 yellow;
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
}

 

总结：

　　1、感觉比较巧妙的地方

　　首先，通过div#primary和div#secondary的float:left和float:right是两个层浮动

　　然后，div#primary中margin-right:-264px，这样就给div#secondary留下了264px的空间，div#secondary的宽度188px加上margin-right的76px正好为264px。

　　

　　2、这样的好处

　　尝试着将div#primary的margin-right向负的更多，将div#secondary的margin-right更大的趋势调整（如图二图三），这样即使div#secondary的位置达到了div#primary中内容的位置，也只是重叠不会影响其内容，可以巧妙实现定位作用。

图二

 

图三