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

WordPresscms/ce882c2d2dca74e9bcd34b110319dc21.png" title="ce882c2d2dca74e9bcd34b110319dc21.png" alt="image.png"/>

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

这里放用户信息

这里放最新文章

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

• gaogao

• 写博客帐号设置

上图中第2部分的代码：

• 0积分

• 0关注

• 0粉丝

• 3文章

上图第3部分的代码：

• 文章浏览：0

• 个人网站：http://wanlimm.com

• 加入时间：2018-5-3 22:23:12

• 最近登录：2018-8-7 09:08:32

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

最新文章

• wordpress教程wordpress教程

• wordpress教程wordpress教程

• wordpress教程wordpress教程

• wordpress教程wordpress教程

我们再这左侧的元素添加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的静态代码如下：

为author.php用户中心主页面添加了总体框架布局

们为author.php用户中心主页面添加了总体框架布局：左边栏和右边主体。今天，我们就要为author.php的左边栏和右边主体添加细节布局。同样，

WordPress主题制作

wordpress CMS主题制作180编辑

总体框架布局：左边栏和右边主体

依然是以静态布局为目标。今天要实现的效果发总体框架布局：左边栏和右边主体们为author.php用户中心主页面添加了总体框架布局：

wordpress主题制作

wordpress CMS主题制作180编辑

再来给右侧主体的文章列表添加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样式就全部完成。本章只是静态布局，没有调用后台数据。在下一章，我们就会慢慢地调用后台数据库的数据来完善这个页面，使它成为真正的用户中心页面。