文字与行距
同样的内容，字号和行距不同，阅读感受也不同。拖动滑块，找到适合自己的组合。
实时预览
让一段文字，读起来更轻松
网页里的留白并不是浪费空间。它把不同的信息分开，也为阅读留出停顿。字号决定文字看起来有多大，行距决定一行和下一行之间的距离。调整时，不妨读完这一小段，再看看哪种组合更舒服。
一页，三种层次
留一点空间，
让文字更好读。
标题表达主题，正文解释内容。恰当的行距和留白，让视线自然地向下阅读。
标题正文留白
动手试一试
每次只改变一个细节，观察它带来的不同。
文字与底色
颜色不仅用来装饰。文字和背景的明暗差异，也影响内容是否容易看清。
当前明暗对比
配色预览
清楚，是好看的起点。
把重要的信息放在容易看见的位置，用适当的对比帮助阅读，而不是让所有文字一起争抢注意力。
文字 #18304A / 背景 #EDF3FA练习背后的几个小知识
理解原理，再看页面的变化。
为什么字号变大以后，文字会换行？
一行能够容纳的文字取决于容器宽度和每个字占用的空间。容器宽度不变时，字号越大，一行能够放下的文字通常越少。适当限制正文宽度，可以减少视线在长行之间来回寻找的负担。
响应式布局怎样适应手机？
本页在宽屏上把说明和演示并排放置；在窄屏上则上下排列。这样无需缩小全部文字，也能把内容放进手机屏幕。试着调整浏览器窗口宽度，就能观察到布局变化。
为什么页面不必依赖大量图片和动画？
文字大小、间距、颜色和排列本身就能建立清晰的层次。这个练习页使用文字与浏览器绘制的样式展示内容，重点放在阅读与操作上。图片和动画应当在确实帮助表达时再加入。
关于本站
“个人开发测试使用”是个人网页开发练习展示站，用于展示和体验基础排版、配色及页面布局效果。本站的练习在当前浏览器页面内运行，刷新后恢复默认状态。
本站不提供注册、评论、支付或文件上传功能，也不使用第三方访问统计。服务器可能记录访问时间、IP 地址等常规访问日志，用于运行维护。