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