几天前我发现了这个漂亮的 psd 登陆页面，但我不知道如何设置它的样式。我很久以前就看到过这种风格。 这条线应该是图像还是什么？ 另外，能否发一些类似风格的代码示例？
【问题讨论】：
我之前想做其中之一，所以我在 10 分钟内完成了这个，我正在使用 SCSS - 要查看纯 CSS，请单击“CSS (SCSS)”旁边的下拉 V 形符号，然后单击“查看编译的 CSS”。 http://codepen.io/z-/pen/bwPBjY/
我用过的分析：
每个事件都是 .entry 并且它们都包含在 .entries 中，.entries 使用 margin:auto 居中，并以百分比为单位指定宽度，最大宽度为像素，以便支持各种屏幕尺寸。
所有其他条目都在同一侧，因此我使用:nth-child(2n) 选择所有偶数编号条目，因此我可以将float 放在右侧，将text-align 放在左侧；我将使用它来覆盖赋予奇数实体的默认样式。
为了将条目放在行的两侧，我将宽度设为calc(50% - 80px)，这基本上意味着文本和行之间会有 80px 的间隙，因为我们是向外浮动的。我们还希望条目在高度方面相当接近（您给出的垂直间距不均匀，所以我只是忽略了它并做了我自己的事情）所以我们给出了一个负数 margin-top 的 -60px，我们也想要确保我们所做的重叠是我们想要的，所以我们需要添加clear:both 以阻止元素漂移到开放空间中；所以第一个条目不会从页面顶部消失，我们可以使用:not() 选择器.entry:not(:first-child) {margin-top:-60px;}，这将为除第一个元素之外的所有元素提供负上边距。
要添加我们使用伪元素:before 或:after 的圆圈，我使用标题作为基础，然后制作一个圆圈并将其移向线若干像素。
如果我所说的内容让你无法理解，那么我建议你从 https://codecademy.com/ 这样的地方获得一些基础知识
【讨论】：