html - 将静态 HTML 设计转换为类似博客的风格，让人联想到杂志，并找到可行的 CSS 风格？

Question

这是我的杂志 HTML 布局的代码笔 - link here .

我一直在试验 CSS 并尝试用我的 CSS 实现更像博客的设计，以模拟在 https://www.autocar.co.uk/car-review/bmw/7-series/first-drives/bmw-7-series-750li-xdrive-2019-review 看到的效果

(好吧，文章和侧边栏与其他文章的方式是；文章和 Driven 本周部分)

目前我有这个 CSS:

body {
background-color: gray;
font-family: Verdana, sans-serif;
font-size: 14px;
}

p {
font-family: Verdana, sans-serif;
font-size: 13px;
line-height: 21px;
}

header {
background-color: #FFFFFF;
}

div.article {
width: 800px;
height: auto;
background-color: #FFFFFF;
float: right;
overflow: auto;
padding: 5px;
}

div.article img {
height: 340px;
}

但是在将 div.article 保持为白色 (FFFFFF) 的同时我可以使用什么样的填充等并使标题更有效地与标题一起工作？

如果 header 不是 h1、h2、h3 等，它就不能正常工作 - 例如在 forked codepen.io copy - https://codepen.io/anon/pen/pBgQjw

虽然这里使用 Verdana 以便于使用，但是让 OpenSans 等 FontSquirrel 字体在本地工作的最佳方式是什么(即不链接到在线源，而是字体所在的目录)；在处理 Arial 或 Verdana 以外的字体时，我经常使用 .ttf。

我可能很快就会使用 Gotham 字体，但现在是 OpenSans 和 OpenSans Bold。

OpenSans Bold 即将在 CSS 中用于 h1、h2。

这只是本地主机上的一个测试页面，但它可能用作 PHP 站点的模板。

尚未使用任何 Javascript，但如果您对可行的 Javascript 有任何好的建议，我将不胜感激。 (我现在保持设计简单)。

将保留灰色背景，div.article 为白色。

我欢迎任何关于如何将其从看起来相当稳重的设计转变为更专业、类似博客的设计的建议。

Answer 1

我认为你应该尝试使用 CSS 框架，例如Bulma(轻量级且易于使用，基于 CSS flexbox)。请在此处查看 Bulma 文档:https://bulma.io/documentation/

至于字体实现，我认为@font-face 应该可以解决问题——您只需将字体下载到您的服务器(或本地设备)即可。