4分钟学会网页风格在将其发布到网上之前，您希望它看起来有吸引力、专业，或者至少看起来像那样。那么接下来你应该做什么？文本设计的目的是增强应用内容的呈现。这似乎是显而易见的，但内容是网站的主要元素，不应在发布后进行调整。书面内容（例如您当前正在阅读的文章）占网页的90%以上。向此文本内容添加样式将大有帮助。假设您已经完成了要发布的内容，同时创建了一个空的style.css文件，您可以编写的第一条规则是什么？居中的长文本难以解析，因此不易阅读。设置每行字符数限制可以大大提高大量文本的可读性和吸引力。正文{保证金：0自动；max-width:50em;}对文本容器进行样式设置后，是否可以对文本本身进行样式设置？字体浏览器的默认字体是Times，它看起来没有吸引力（主要是因为它是一种“无风格”字体）。切换到Helvetica或Arial等无衬线字体可以大大提高网页的可读性。body{font-family:"Helvetica","Arial",sans-serif;}如果你坚持使用衬线字体，试试格鲁吉亚。当我们使文本更具吸引力时，我们还需要使其更具可读性。间距当用户认为页面损坏时，通常是间距问题。通过在文本周围和内部设置适当的间距，可以增加页面的吸引力。正文{行高：1.5;padding:4em1em;}h2{margin-top:1em;padding-top:1em;}虽然到目前为止布局已经有了很大改进，但让我们添加更多细节。颜色和对比度白色背景上的黑色文本看起来很刺眼。为文本选择较柔和的黑色，使页面更易于阅读。body{color:#555;}为了保持良好的对比度，让我们为重要文本选择较深的阴影。h1,h2,strong{color:#333;}虽然大部分页面在视觉上都得到了改进，但有些元素仍然看起来格格不入，比如代码片段。平衡只需要一些额外的调整来平衡页面：code,pre{background:#eee;}code{padding:2px4px;vertical-align:text-bottom;}pre{padding:1em;}在这一点上，你可能想让你的页面脱颖而出并赋予它更多的个性。主色大多数品牌都有主色，作为视觉基调。在网页上，这种主色可用于强调链接等交互元素。a{color:#e81c4f;}但为了平衡/协调，我们还需要一些额外的颜色。次要原色可以与更微妙的色调相辅相成，用于边框、背景甚至文本中。身体{颜色：#566b78;}代码，预{背景：#f5f7f9;border-bottom:1pxsolid#d8dee9;color:#a7adba;}pre{border-left:2pxsolid#69c;}改变了色调，为什么不改变形状/字体...自定义字体既然文本是网页的主要内容，使用自定义字体可以使页面更加醒目。虽然您可以嵌入自己的网络字体或使用Typekit等在线服务，但让我们使用免费的Google字体Roboto：@import'https://fonts.googleapis.com/css?family=Roboto:300,400,500';body{font-family:"Roboto","Helvetica","Arial",sans-serif;}通过自定义字体凸显个性后，如果想让页面更加丰富多彩怎么办？图像和图标既可以作为装饰来支持您的内容，也可以作为您要传达的信息的活跃部分。下面我们从Unsplash中挑选一张漂亮的背景图来美化页眉。header{背景颜色：#263d36;背景图像：url（“header.jpg”）;背景位置：居中；背景重复：不重复；背景尺寸：封面；行高：1.2；:10vw2em;text-align:center;}添加logoheaderimg{display:inline-block;高度：120px；垂直对齐：顶部；width:120px;}让我们借此机会改进文本样式。标题h1{颜色：白色；字体大小：2.5em；font-weight:300;}headera{border:1pxsolid#e81c4f;边界半径：290486px；白颜色;字体大小：0.6em；间距：0.2em；填充：1em2em；文本转换：大写；文字修饰：无；过渡：无200毫秒缓出；transition-property:color,background;}headera:hover{背景：#e81c4f;：白色；}瞧！遵循网页设计的基本原则，我们在短短几分钟内设计出了一个像样的页面。最后一件事......分享爱！GitHub下载链接Facebook分享链接Twitter分享链接如果您想了解有关网页设计的更多信息，请查看我的免费HTML和CSS指南MarkSheet。或者，如果您想立即开始尝试网页设计，请尝试Bulma，我的基于Flexbox的CSS框架。总结——4分钟网页设计本文介绍了网页设计的基本流程和设计原则，并将流程一步步分解，让刚接触网页设计的人也能快速找到感觉。希望这篇文章能在你刚接触网页设计而不知所措时阅读，这里对你有一些帮助。谢谢阅读！本文翻译自《Web Design in 4 minutes》-JeremyThomas2016年，为第一次翻译。同时，对原文进行了一些可理解的改动。水平有限。欢迎发表评论。本文转载自：众成翻译译者：shery链接：http://www.zcfy.cc/article/1237原文：http://jgthms.com/web-design-in-4-minutes/?utm_source=tuicool&utm_medium=推荐#分享
