zoukankan      html  css  js  c++  java
  • 看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中内容的位置,也只是重叠不会影响其内容,可以巧妙实现定位作用。

    图二

     

    图三

     

    知识共享许可协议
    作品Tim Zhang创作,采用知识共享署名 3.0 中国大陆许可协议进行许可。 。
  • 相关阅读:
    html-Notes3
    html-Notes2 表单
    html 笔记
    网页设计常用色彩搭配表
    css
    html-Notes
    C# 输入字符串,每3个截取一次,形成一个数组
    提高情商的好书推荐 (程序猿不仅要智商也要情商)
    PHP 学习笔记---基本语法
    php学习笔记之字符串处理
  • 原文地址:https://www.cnblogs.com/ccdc/p/2479753.html
Copyright © 2011-2022 走看看