看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&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&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&_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中内容的位置，也只是重叠不会影响其内容，可以巧妙实现定位作用。
图二
图三
