wordpress模版twentyeleven布局创新

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

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

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

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