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上看到的效果

（好吧，本文和其他文章的侧边栏的方式；该文章和本周的“驱动”部分）

目前我有这个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）并使标题更有效地使用标题的同时，我可以使用哪种填充等？

如果标头不在h1，h2，h3等中，则无法正常工作-例如在分叉的codepen.io复制中-https://codepen.io/anon/pen/pBgQjw

尽管这里使用Verdana是为了易于使用，但是使像OpenSans这样的FontSquirrel字体在本地工作的最佳方法是什么（即，不链接到在线源，而是字体所在的目录）；除Arial或Verdana以外的字体时，我经常使用.ttf。

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

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

这只是localhost上的测试页，但是它可以用作PHP站点的模板。

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

将保留灰色背景，将第div条设为白色。

对于将其从看上去平淡无奇的外观转变为更专业，类似博客的设计的任何建议，我都欢迎。

Answer 1

我认为您应该尝试使用CSS框架，例如Bulma（轻巧易用，基于CSS flexbox）。在此处查看布尔玛文档：https://bulma.io/documentation/

对于字体实现，我认为@media应该可以解决问题-您只需将字体下载到服务器（或本地设备）即可。

将静态HTML设计转换为类似杂志的博客风格，并找到有效的CSS风格？

1 个答案: