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