页面元素的对齐：阅读线路不清晰- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 页面元素的对齐：阅读线路不清晰

CSS样式表: CSS的margin边界叠加深度剖析图文演示; CSS中Float（浮动）相关技巧文章; 惊现学习CSS应该注意的方法; 使用text-align:justify实现两端对齐一例; CSS整体布局声明的一些使用技巧; 推荐深入理解css中的position定位和z-index属性; 固定表格的高度超过指定高度就隐藏的方法; 推荐个Css的filter常用滤波器属性及语句大全; 用css滤镜实现的文字描边效果的代码; 用css实现的带阴影的表格效果的代码; 推荐个不错的表单Input的高级用法11例; flash幻灯片需要先激活ActiveX控件才能使用的又一个办法; DIV+CSS作网页容易犯的错误小结; ul+li及css制作韩国风格菜单代码; div布局的自由伸展三栏式版面的代码; 几乎被设计师遗忘了的标签fieldset legend; 不用javascript实现带序号的表格隔行换色的效果; 用CSS实现基本条状图表效果; 用javascript来控制链接的target 属性的代码; 多浏览器css兼容分析小结

技术文章搜索

关键字

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-03-17 浏览: 148 ::

收藏到网摘: n/a

页面上各个元素的对齐，能使页面显得更加规整。以下图为例，能对齐的元素都对齐了，看起来很规整。

但这也导致了一个问题：阅读线路不清晰——究竟是“Z”型线，还是“N”型线？

像这种过度追求对齐而影响了信息架构的情况，在我们工作中不算少见，我个人不太赞同这种做法。

我比较倾向于适当打破一点对齐关系，但可以使阅读线路更清晰的做法，如下图。

看看Yahoo的首页：

当然，也可以通过设计的处理，比如调整颜色，或者增加中间的间距，来解决这个问题，比如下图。

但这些处理方式都不如打破对齐来得直接、简洁。

毕竟，视觉设计是为信息架构服务的，而不能反过来。