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

疯狂暗示打赏按钮

本文标签：

声明：本文由代码号注册/游客用户【紫安】供稿发布，本站不对用户发布的wordpress模版twentyeleven布局创新信息内容原创度和真实性等负责。如内容侵犯您的版权或其他权益，请留言并加以说明。站长审查之后若情况属实会及时为您删除。同时遵循 CC 4.0 BY-SA 版权协议，尊重和保护作者的劳动成果，转载请标明出处链接和本声明内容。本文作者：紫安» https://www.ebingou.cn/dmh/13930.html

很赞哦！ ()