1. 首页
  2. css

CSS#142:论坛模块样式

论坛右侧有一系列模块\”模块\”在视觉上是\”模块\”,在代码中是\”模块\”,在\”模块\”中,它们包含的内容是一个相关的组,与其他模块中的内容分开/不同。
我们首先看到的是\”类别\”模块。香草论坛字面上把这些放在一个文件夹称为\”模块\”,这是很好的。正如你可能猜到的,这个特殊的类别.php\”
我们找到标题输出的位置,给它一个类,然后开始设置样式。我们只需要为这个标题添加一点合适的下边距,但不是每个都是这样。
然后开始设计容器本身。在香草论坛中,模块往往有一个类名\”Box\”。我们的module HTML类是\”module\”。我们可以开始在Vanilla中找到每一个模块并添加我们自己的类。有时候我觉得自己能胜任这个挑战,有时候我只是说\”更聪明地工作,而不是更努力。\”今天我们会更聪明地工作。我们将在CSS中创建一个具有模块样式的占位符选择器,但不需要重新创建现有的.module类。
%fake-module {background: white;padding: $padding;clear: both;box-shadow: 0 0 5px rgba(black, 0.2);margin: 0 0 $padding 0;position: relative;}
占位符选择器根本不会自己输出任何CSS。但是它们可以是@extend-ed。所以现在我们可以让所有的Vanilla样式框都有我们的模块样式。
.Box {@extend %fake-module;}
我们了解到whiteSmoke是一种非常棒的颜色。
在Vanilla为类别列表提供的标记中,它给了我们一个\”活动\”类,这样我们就可以稍微改变样式,并清楚地显示用户所属的类别(因为这个模块有很多页面,包括主页和分类页面)。
我们遇到了一个小问题,使用-$variable不起作用,我们不得不改为使用-#{$variable}。在10:30左右,我解释了CSS三角形是如何工作的。我们正在考虑在活动类的左侧使用一个三角形,正如我们的线框所示。
最后,我们将线程数定位到右侧,让用户了解类别有多大

CSS#142:论坛模块样式 为WP2原创文章,链接:https://www.wp2.cn/css/css142%e8%ae%ba%e5%9d%9b%e6%a8%a1%e5%9d%97%e6%a0%b7%e5%bc%8f/