我的任务是更新一系列促进科学会议的网站,以迎合利基科学领域.这些网站目前使用一些适用于共享公共页面模板结构的CSS布局编写,但每个页面的详细信息都是<p>,<br>和 的混搭.定位内容.这使得更新内容变得困难,因为间距总是在变化,并且页面在最轻微的模式下最终变得难看.
所以,我想把这些东西改成一个更加快乐的CSS状态.有很多网站提供特定CSS设计目标的提示,但我是一个没有很多网站艺术能力的开发人员,并且没有考虑过结构.是否有任何好的网站在一些相对平凡但有效呈现的业务内容的背景下教CSS？像CSS zen花园这样的东西很酷,但是我正在寻找更多可以给我一些简单的文本繁重的商业数据定位想法并将这些想法作为CSS学习机会展示的东西.
有这样的网站吗？
遗憾的是，如果您对 HTML 没有太多控制权，就很难从 CSS 中获得可靠、一致的演示。如果您无法向元素添加特殊类/ID，则尤其如此。不一致<br/>使用的标签会对标准化布局的任何尝试造成严重破坏。
如果您仅限于所提供的 HTML，那么您的主要目标应该是使其尽可能具有可读性。确保字体足够大，以便人们可以舒适地靠在椅子上阅读。或者站在某人的肩膀上。它不需要太大，但如果像您声称的那样文本很重，传统的 12 磅对于大量阅读来说可能会感觉太小。
使用哪种字体是另一个考虑因素。Verdana 比 Arial 更宽，因此占用更多的水平空间，但往往更方便眼睛。其他人则倾向于喜欢像 Georgia 这样的衬线字体，它可以在更大的尺寸下保持良好的状态。
垂直间距很重要。确保页面区域之间有足够的视觉断裂。您可以通过明显且一致的副标题样式来实现这一点。还要确保line-height每行之间足够宽——人们不喜欢阅读“砖块”文本。
并且不要忘记水平空间。一般经验法则是，一列文本每行的长度不应超过 60-70 个字符，否则阅读会变得更加困难。
请记住，人们访问您的网站是为了获取信息，他们访问并获取信息的速度越快，他们就会越高兴。视觉效果很好，但您的首要任务应该始终是使网站尽可能易于使用和清晰。
至于灵感，我非常喜欢Information Architects的文本设计。您可能还想看看Subtraction.com。博客可能是一个很好的灵感来源，因为它们通常文本量很大。
祝你好运。