编程技术文章分享与教程

网站首页 > 技术文章 正文

「项目实战」.作家管理系统之Web应用(四)

hmc789 2024-11-09 13:04:33 技术文章 2 ℃

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

创建对话框设计

本文介绍项目界面设计的最后一块内容---弹出对话框。弹出对话框的功能是让用户输入作者信息并创建一条作者数据，对话框的触发方式是通过点击右侧栏的紫色操作按钮，点击此按钮之后，弹出创建对话框，如下图1所示。

元素的层叠上下文

对话框本质也是通过HTML中的元素实现，如本例使用div元素作为对话框的最外层容器，其内部布局各个输入信息组件。在设计对话框的时候需要保证对话框元素位于其它元素之上，如图1中对话框覆盖左侧栏和右侧栏的内容，而不是位于它们的下面，这样会导致对话框内容无法操作，出现混乱的情况。

默认情况下，HTML元素采用根元素<html>的层叠上下文（stacking context），如果有元素的position属性设置为非static值，那么对应的元素就会调整在stack中的位置，我们将对话框的position值设置为fixed，采用固定位置方式，这样会导致整个对话框元素显示在其它元素之上。

图2第131行代码将position的值设置为fixed，但是，稍等一下，在文章《作家管理系统之Web应用（三）》中图3将.right类元素的position的值设置为了relative。上一段文章中所述position的非static的值就会导致元素在stack中的位置发生变化，那么对于.right类元素和.dialog类元素，哪一个元素位于上面呢？图3显示了二者的代码位置

.right类元素代码位于.dialog类元素之上，如果二者没有其它的层叠上下文属性设置，那么在CSS进行布局时，代码后面的元素会覆盖之前的元素，这样就会出现.dialog类元素在显示时位于上面。如果调换图3中.right类元素和.dialog类元素的位置，那么，这个对话框就会位于.right类元素之下，导致无法对话框进行操作。

对话框大小和位置

对话框的大小可以使用width和height两个属性进行设置，如图2第132和133代码所示，二者的值都为600px，它们两个都是固定值。如何将对话框进行居中呢？本代码采用了两个步骤进行：首先将对话框的左上角坐标移至父容器的中心位置，即图2第140和141行代码所示；之后再将对话框的顶边距和左边距分别向相反方向移动对话框高度和宽度的一半值（即600px/2 = 300px），顶边距采用-300px表示向上移动300px距离，左边距采用-300px表示向左移动300px距离。这样的样式设置就实现了对话框居中显示的效果。

对话框的装饰

为了让对话框有突出于页面的效果，我们对对话框添加了边框和阴影效果。图3中第135行代码添加了1px的灰色实线边框，第136行代码则加入了8px的圆角效果，而第139行代码则是加入了一个box-shadow效果，使对话框看上去更加具有立体感。

对话框内容布局

创建对话框整体上分为三个区域：顶部区域为对话框标题，中部区域为内容输入区，底部为操作区。如图4所示

图4中三个区域按照纵向排列，我们也采用flexbox样式进行布局，代码图2中第137行设置display为none是不是很奇怪？因为在页面加载完成时，我们不希望这个对话框自动地显示出来，而是当用户点击操作按钮时才会触发显示对话框的操作，因此，默认情况下对话框的display值就是none，当点击右下角的按钮时，在这个按钮的点击事件中设置.dialog元素的display样式为flex值，如下图5代码所示

只设置容器采用的display值为flex还不能够让其按照纵向排列子元素，还需要调整flexbox的布局方向属性flex-direction的值为column，即图2第138行中的代码。对话框三个区域布局完成之后，就是设置每一个区域中子元素的布局。

顶部区域设计

顶部区域的样式是将标题居中显示，并调整字体的字号，代码如图6所示。

图6第147行代码将flexbox容器中的一个子元素设置align-self的值为center，它表示与flexbox的flex-direction相垂直的方向，flex-direction现在的值为column，故align-self的center就是将元素按照水平居中显示。图6中代码最复杂的为第一个div元素的选择操作，也就是图6中第146行代码所描述的，它表示位于.dialog类元素中的第一个div子元素，图7中HTML元素位置关系表示得比较清楚，标题创建者所使用的div为这个对话框的第一个子div元素，因此图6中所有的样式都应用于这个元素上。

中部区域设计

中部区域占据对话框的大部分，准确地说，它占据了除了顶部标题和底部操作区之外的所有区域。我们如何设置这个区域的高度值呢？

图8代码做了两件事件：一件事情是选中了表示中部区域的div元素，另一件事情是将这个区域的高度值设置为了自动占据剩余区域。代码第153行首先通过.dialog类元素选中其一级子元素div，再通过:nth-child(2)进一步限定为只设置对应的第2个div，因此，使用这行代码就实现了选中了中部区域，再通过将flex-grow的值1将其高度值扩展为全部剩余的空间，因为顶部区域和底部操作区域的flex-grow都为0值。

底部区域设计

底部区域的内容只显示两个按钮，这两个按钮位于底部区域的最右端。

与中部区域的样式设置类似，底部区域的元素选中条件是：选择.dialog类元素的最后一个一级子元素，通过图9中第157行代码实现；之后设置了align-self的值为flex-end，与顶部区域的设置值center不同，在当前的环境下，它表示将子元素从最右端（尾端）开始排列，这样我们就实现了按钮居右的显示效果，最后通过159行代码将上下边距和左右边距分别设置为8px和12px。

表单设计

表单中的每一个条目都是用了fieldset将各个信息按照行垂直排列显示

fieldset元素默认情况下会显示边框，本例中则通过将其border值设置为0值，将所有边框隐藏掉，对应于图11第168行代码；之后为了各个fielddset之间不显示的那么拥挤，各个fieldset元素间加入了12px的间距值，对应于图11第172行代码。

图1中表单每一行中的第一列标题，如姓名、性别、出生日期采用了右对齐，且每一个标题所占据的宽度值都是相同的，图12中的代码使用的样式选择器如下：

图12第175行代码首先选中fieldset中的第一个label元素，即左侧第一列的元素；第176行代码指定这个label元素采用的display为inline-block，紧接着设置了其宽度值为120px，并通过178行代码设定文本对齐方式为右对齐，最后一行代码设置了这个label元素的右边距为12px。

最后我们设置每一行右侧输入控件的宽度值，代码见图13

图1中的输入控件分为三类：第一类为text类型的input、第二类为textarea和最后一类为radio类型的input。我们使用第182和183行代码选中所有的input和textarea控件，之后在第184行设置它们的宽度值为400px。但是，这样会导致性别单选控件出现问题（每一个单选input变为了宽度为400px），因此，我们通过第187行代码选中对应的单选input控件，通过第188行代码将其值覆盖为初始值initial，这样，我们就实现了整个图1中对话框的显示效果。

至此为止，我们就介绍完了如何使用CSS进行Web页面设计，接下来的工作是加入交互功能，实现作者信息的创建和展示。谢谢各位阅读，我们下一篇文章再见！

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

Tags：

猜你喜欢

标签列表
最新留言