本文内容采用连载形式，每一次新的内容可能与之前的内容相关联，我通过标题中最后的数字用以区分文章的先后次序，以便于读者在阅读文章时了解整个项目的发展脉络。

右栏详情设计

右侧栏设计与左侧栏类似，只是使用了不同的宽度值，而颜色值则采用了默认的白色背景和黑色前景色，如下图所示

图1

图10中第41行代码与操作按钮相关，我们稍后介绍。第42行代码设置了右侧栏的宽度为70%，而左侧栏的宽度30%，二者之和正好占据其父容器的整个宽度。高度值和overflow-y属性值与左侧栏设置相同，整个右侧栏显示效果如图2所示。

图2

右侧栏布局使用两个一级子元素：一个元素用于展示作者的详细信息，另一个元素则用于显示右下角的操作按钮，HTML代码如图3所示

图3

图3中第一个元素为p，设置了类属性.right-content，此p元素为一个flexbox容器，其内用于布局作者的详细信息；第二个元素为span，它表示的是底部的紫色操作按钮，用于弹出创建对话框，span元素设置了.button属性，实现了图2中的圆形按钮效果。

作者详细信息视图设计

详情页布局最外层为一个flexbox容器，容器内的元素按照列纵向排列，如图4所示，注意图4中，第4和5行显示的是两列信息，需要对这两行内容做进一步的样式调整，其它行展示的只有一列信息。

图4

图4中第4和5行显示效果对应于图5中两个含有.col-2类的HTML元素，通过设置.col-2的属性值以达到两列的效果。

图5

我们首先介绍下.right-content类是如何控制子元素进行布局的。按照第二篇文中介绍，flexbox布局容器就可以实现子元素纵向排列效果，因此，.right-content类也采用了flexbox，其对应的代码如下图6所示

图6

图6第95行代码设置.right-content类元素为flexbox容器，由于flexbox容器默认采用水平布局，各个一级子元素是横向排列，因此，第96行代码将flexbox的布局方向改为了column值，它表示将flexbox的布局方向改为纵向，每一个子元素按照自顶而下地纵向排列，就如图4所示的效果。图4中左侧边显示的橙色区域为第98行代码所导致，它表示将.right-content类元素的左边距设置为40px，即在左右栏之间添加了间隔。

右侧栏中个人信息内容第一项为个人图像，如图5所示，图像展示采用了一个p元素，它为一个含有圆角的正方形，且居中显示，使用了.photo类设置对应的样式值。

图7

图7第102和103行代码设定图像的上下边距值都为48px，第104和105行代码设置图像的宽度和高度都是128px，第106行代码设置整个.photo类元素p的圆角半径为8px，第108行代码设置水平方向（与flex-direction指定的方向相垂直）居中，图7中代码实现了图4第一行中图像的显示效果。

图4中第4和5行两列内容显示效果是通过.col-2类实现的，其对应的代码如图8所示

图8

图8样式也是设置了.col-2类元素为一个flexbox容器，采用默认的水平布局，但是，在默认情况下，两个p的宽度为其内元素内容的宽度。如果按照两列宽度各占一半的效果，需要使用第122-124行中的代码设置样式，即将.col-2的一级p子元素的宽度值设为其父容器的50%，这样就达到了两列宽度各占父元素总宽度一半的效果， 如下图9所示。

图9

在图4个人信息布局中，每一行在垂直方向都含有一定的间距值，这个间距值是通过下图10中margin-top实现的，它表示设置每一个.right-content类元素的一级p子元素的margin-top值为24px。需要注意的是第一行中头像的margin-top值为48px（图7），二者出现样式冲突问题，该如何取值呢？取两个样式中较大的一个数值！本例中采用的是图7.photo类设置的margin-top值。

图10

操作按钮设计

操作按钮位于页面的右下角，它是一个紫色的圆形按钮，中间是一个’+’，当鼠标悬浮在它上面时，会变为一个“手形状”的指针，点击此按钮会弹出一个对话框。它在HTML代码中是这样子的，如图11所示

图11

按钮元素使用了绝对定位样式，这个绝对定位元素所使用的参考元素是哪一个呢？我们先查看下这个按钮的样式是如何编写的，见下图12

图12

图12第49行代码设置.button类元素的position采用绝对定位，第52和53行代码指定.button类元素的宽度和高度值都是40px；第50行和51行代码指定.button类元素距离参考元素的右边距值为16px，距离参考元素的底部边距值为16px。再结合图2的效果，.button类元素采用的参考元素不是默认的body元素，而应该是.right类元素。因此，在图1中第41行将position设置为了relative值，这些样式既实现了按钮的位置又控制了其大小。

接下来就是调整内部元素的位置，图12第54行代码将.button类元素设置为了一个flexbox容器，通过第55和56行代码将其内容居中显示；第57行代码将按钮的圆角半径设置为宽高的一半，整个按钮形状则显示为一个圆形。第61行代码添加按钮的阴影效果，最后使用第64-67行代码设置鼠标hover时的背景色和光标形状。

至此，本项目右侧视图的布局样式已经全部介绍完毕，之后介绍的内容是添加作者的对话框样式，我们下一篇文章见，谢谢阅读！

本文为《作者管理系统之Web应用》的第三篇文章，其它的内容可以查看之前或之后的文章，您的反馈是对我最大的鼓舞，谢谢大家。