• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > wordpress CMS主题用户中心开发 4:完成author.php用户中心页面的静态代码布局

    wordpress CMS主题用户中心开发 4:完成author.php用户中心页面的静态代码布局

    作者: 分类:wordpress CMS主题制作 点击: 68 次
    wordpress CMS主题:ssmay主题

      上一章我们为author.php用户中心主页面添加了总体框架布局:左边栏和右边主体。今天,我们就要为author.php的左边栏和右边主体添加细节布局。同样,本章不调用后台数据库的数据,依然是以静态布局为目标。今天要实现的效果发下图:

      wordpress CMS主题用户中心开发 4:完成author.php用户中心页面的静态代码布局

       

      我们先来写左侧的代码,也就是给author_sidebar.php文件添加代码。从上图中,我们可以看出,左侧有2大块,用户信息和最新文章。从布大局,再布细节。添加代码:

      <!-- 用户信息开始 -->
      <div class="author_op">
      这里放用户信息
      </div>
      <!-- 用户信息结束 -->
      <!-- 最新文章 -->
      <div class="new_post">
      这里放最新文章
      </div>

      然后在添加用户信息模块里的代码。第1部分代码如下:

      <ul class="author_set">
      <li class="title">
      <a href="/">
      <img src="/wp/wp-content/themes/mlong/images/author.jpg" alt="用户gaogao的头像">
      <span>gaogao</span>
      </a>
      </li>
      <li class="write">
      <a href="/">写博客</a>
      <a href="/">帐号设置</a>
      </li>
      </ul>
      上图中第2部分的代码:
      <ul class="author_fanc">
      <li class="jifen_list">
      <a href="/">
      <span>0</span><span>积分</span>
      </a>
      </li>
      <li id="<?php echo $uid; ?>" class="guanzu_list">
      <a href="/">
      <span>0</span><span>关注</span>
      </a>
      </li>
      <li  class="fanc_list">
      <a href="/">
      <span>0</span><span>粉丝</span>
      </a>
      </li>
      <li class="wenzang_list">
      <a href="/">
      <span>3</span><span>文章</span>
      </a>
      </li>
      </ul>

      上图第3部分的代码:

      <ul class="author_option">
      <li>文章浏览:0</li>
      <li>个人网站:http://wanlimm.com</li>
      <li>加入时间:2018-5-3 22:23:12</li>
      <li>最近登录:2018-8-7 09:08:32</li>
      </ul>

      这样,上图左侧第一大部分——用户信息部分的静态代码就添加好了。接下来我们再来添加左侧第二大部分——最新文章的静态代码,也就是上图中的第4的位置,代码如下:

      <!-- 最新文章 -->
      <div class="new_post">
      <h2>最新文章</h2>
      <li><a href="/" title="/">wordpress教程wordpress教程</a></li>
      <li><a href="/" title="/">wordpress教程wordpress教程</a></li>
      <li><a href="/" title="/">wordpress教程wordpress教程</a></li>
      <li><a href="/" title="/">wordpress教程wordpress教程</a></li>
      </div>

      我们再这左侧的元素添加CSS样式:

      .author_op{ width:100%; }
      .author_op ul{ float:left; width:92%; margin-bottom:0.15rem; padding:0 4%; }
      .author_op ul.author_set li{ width:100%; text-align:center; padding:0.06rem 0; }
      .author_op ul.author_set li.title a{ display:inline-block; width:100%; text-align:center; }
      .author_op ul.author_set li.title a span{ display:inline-block; width:100%; font-size:0.2rem; font-weight:800; }
      .author_op ul.author_set li img{ width:1.5rem; height:auto; border-radius:50%; }
      .author_op ul.author_set li.write a{ display:inline-block; width:0.8rem; line-height: 0.3rem; border:1px solid #ccc; text-align:center; margin:0 0.05rem; }

      .authors .left .new_post{ margin:0.2rem 0; float:left; width:92%; margin-left:4%; border-top:1px solid #ccc; padding:0.2rem 0; border-bottom:1px solid #ccc; }
      .authors .left .new_post h2{ width:100%; padding-bottom:0.03rem; border-bottom:1px dashed #ccc; font-size:0.18rem; margin-bottom:0.07rem; }
      .authors .left .new_post li{ width:100%; float:left; height:0.3rem; line-height: 0.3rem; list-style:disc; }

      通过上面几步,左边栏的静态代码布局就弄好了。接下来,我们现来弄右边主体的代码。我们的预想是:进入用户中心后,右侧默认是当前用户的发表过的文章列表,如上图所示。author_main.php的静态代码如下:

      <!-- 当前用户发表的文章列表 -->
      <div class="post_list">
      <div class="post">
      <h2>
      <a class="title" href="/">为author.php用户中心主页面添加了总体框架布局</a>
      </h2>
      <div class="intro">们为author.php用户中心主页面添加了总体框架布局:左边栏和右边主体。今天,我们就要为author.php的左边栏和右边主体添加细节布局。同样,</div>
      <div class="info">
      <span class="tags">wordpress主题制作</span>
      </div>
      <div class="info">
      <span class="tags">wordpress CMS主题制作</span>
      <span class="eye">18</span>
      <span class="pinglun">0</span>
      <a href="/">编辑</a>
      </div>
      </div>
      <div class="post">
      <h2>
      <a class="title" href="/">总体框架布局:左边栏和右边主体</a>
      </h2>
      <div class="intro">依然是以静态布局为目标。今天要实现的效果发总体框架布局:左边栏和右边主体们为author.php用户中心主页面添加了总体框架布局:</div>
      <div class="info">
      <span class="tags">wordpress主题制作</span>
      </div>
      <div class="info">
      <span class="tags">wordpress CMS主题制作</span>
      <span class="eye">18</span>
      <span class="pinglun">0</span>
      <a href="/">编辑</a>
      </div>
      </div>
      </div>

      再来给右侧主体的文章列表添加CSS样式:

      .authors .right{ width:67%; float:left;margin-left:2%; }
      .authors .right .post{ width:100%; padding:0.25rem 0; border-top:1px dashed #aaa; float:left; }
      .authors .right .post h2{ margin-bottom:0.1rem; font-size:0.16rem; width:100%; }
      .authors .right .post .intro{ font-size:0.14rem; line-height: 0.2rem; width:100%; float:left; margin-bottom:0.1rem; overflow:hidden; }
      .authors .right .post .info{ font-size:0.13rem; line-height: 0.2rem; width:100%; float:left; }
      .authors .right .post .info span{ float:left; margin-right:0.15rem; color:#999; }
      .authors .right .post .info .eye{ padding-left:0.23rem; background:url('images/opt_1.jpg') no-repeat 0 0.02rem; }
      .authors .right .post .info .pinglun{ padding-left:0.26rem; background:url('images/opt_2.jpg') no-repeat 0 0.02rem; }
      .authors .right .post .info .edit{ padding-left:0.26rem; background:url('images/opt_3.jpg') no-repeat 0 0.02rem; }
      .authors .right .post .info .del{ padding-left:0.26rem; background:url('images/opt_4.jpg') no-repeat 0 0.02rem; }
      .authors .right .post .info a{ color:#999; }
      .authors .right .post .info a:hover{ color:#16599b; }

      嗯,到这里,author.php用户中心页面的总体布局静态代码和CSS样式就全部完成。本章只是静态布局,没有调用后台数据。在下一章,我们就会慢慢地调用后台数据库的数据来完善这个页面,使它成为真正的用户中心页面。

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201808076499.html
    本文时间:2018-08-07 10:34:19
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.