12bet,的读书笔记

正文布局

布局

绝对定位

12bet,元素使用绝对定位时,其将脱离原始文档流,12博体育,不会对其旁边的元素带来任何影响

浮动

12bet,浮动布局的优势在于:浮动元素仍保留在文档流中其环绕的元素也都清楚它的位置


布局方法

固定布局和流式布局

12bet,固定布局:页面有着固定的宽度,居左、居右对齐,或者居中。页面内容的宽度不会随着浏览器窗口的宽度变化而变化

流式布局:页面宽度用百分比指定,12博体育,而不是某个固定的宽度。浏览器窗口大小变化时,页面宽度随之变化

流式布局设计避免了另一半页面的空白,显得更为平衡。但使用流式布局,无法精确控制行长、页面布局以及元素位置


水平居中方案

自动margin水平居中

使用margin: 0 auto,使用时注意指定宽度,兼容ie6+

使用text-align实现居中

在body上设置text-align: center,这是一条hack,整整完全遵守标准的浏览器不会改变容器的位置,所以这条行不通

负margin

先将元素通过如下代码右移屏幕宽度的50%:

position: absolute;
left: 50%;

然后使用负margin左移元素宽度的50%:

position: absolute;
left: 50%;
width: 1000px;
margin-left: -500px;

使用这种方式,需要将内边距、边框计算在容器宽度中


布局的灵感和法则

用户界面设计

用户界面设计更加关注用户,其最主要的研究目的就是让开发者和工程师能够更好的满足用户的需求

  • 了解浏览额面的用户
  • 在页面和站点中给用户足够的导向
  • 使用被人们熟知的象征符号
  • 保证与功能现骨干的特性在页面中足够显眼
  • 保证设计元素的一致性
  • 了解页面中的关键元素
  • 清楚的表达页面内容:通常来讲人类的注意力持续最多9秒钟,这段时间还是不能了解页面的主要内容,用户就会彻底放弃

可用性

可用性研究更加关注最终的用户体验,即用户如何与已经开发完成了的程序进行交互

可用性原则:

  • 重要信息应放在显眼的位置
  • 永远在title中给出页面的简单介绍
  • 尽可能地保证页面中的导航链接有着一致的表现,同样也要确保有回到首页的链接
  • 在大中型站点来说,最好提供搜索功能。搜索功能的位置要让用户直觉就能够发现
  • 用缩进和偏移将栏中内容分开

灵感

建议新手去一些地点进行观察。如壮美、多彩、富有活力的大自然常常是灵感的发源地。另外一个灵感的发源地就是人的性格和外贸。人的外形总会在艺术中占有相当的地位。

从印刷作品中找到灵感

打破纵向布局的常规

考虑横向布局,但注意浏览器兼容性和实现


元素的位置以及带来的含义

如果将一张纸分为四个象限,西方文字布局的顺序是从左到右,从上至下。浏览者一般都会无意中按照这个顺序来区分四个象限内容的重要性

所以logo一般放在左上位置

在页面中,无需滚动即可看到的区域都是最重要的部分,将某个元素至于页面的右上角,意味着该元素的重要性略逊于左上角的元素,但仍然远高于页面其他元素

底部两个象限并不是那么重要

页面底部的常见用途就是放置一些非必要的内容,比如没有足够层次性的连接,指向本页或网站其他页面的导航等等。这些内容若是用户没有看到,也没有什么大不了的


网格布局

网格不过是一系列相交线分割出的大小一致且极具逻辑性的方框。若在布局中严格依照网格,元素的比例和间距将变得更为协调统一,虽然这可能让作品过于规整、缺乏创造性

根据需要,可以使用绝对定位(position: absolute)或是相对定位(position: relative)来打破网格的限制


内容溢出

大多数浏览器都支持缩放页面的文本字号,很多视力不佳的人很依赖这个功能。字号会进行放大(150%甚至更大),字号放大后可能会导致文本重叠问题,尤其是类似导航链接之类的小块文字区域容易受影响

最常见的两种内容溢出情况:

  1. 绝对定位元素中内容过多
  2. 浮动元素尺寸超过其可容纳区域

浮动导致的内容溢出

CSS引入浮动的本意是让文本能够环绕在其中内嵌的其他元素周围,而不是为了页面布局

浮动后可以使用清除浮动的的方式来让某一元素不再跟随在另一元素后面。清除浮动的方式有很多,这里就不一一列举了

绝对定位导致的内容已出

绝对定位中遇到的最多的问题就是垂直方向溢出。绝对定位元素不像浮动元素那样能够被“清除”

避免方法:

  • 使用浮动替代绝对布局
  • 在设计中尝试避免
  • 通过overflow: auto或者overflow: scroll来让内容超出时出现滚动条
  • 使用JavaScript脚本辅助
  • 使用em作为长度单位而不是px(仅适用于增大字号导致的内容溢出)