CSS3秘笈:第十二章&第十三章

时间:2022-07-09 14:59:11

第十二章

1.网页布局类型

(1)固定宽度

(2)流式

(3)响应式Web设计

2.CSS布局的方法

通过给元素设置一个宽度,将它浮到左侧或右侧,就可以创建一个列(元素后面的文本会环绕浮动的元素,仿佛是另外一个列一样)。如果给多个div或者其他标签使用float属性,就能够实现对多列的布局。进一步使用这种技术,把浮动的div放在浮动的div里面,就能快速创建复杂、多列的布局。

另一种CSS方法:绝对定位,它允许你把元素放在网页的任何位置上,并且可以精确到像素级。一般来说,这种方法适合于比较小的任务,例如将logo定位在网页的特殊位置上。

3.布局策略

(1)从内容入手

(2)Mobil First(移动设备优先)

(3)先设计草图

(4)找出方框

(5)顺应页面流

(6)记住背景图片

(7)拼图中的小部件

(8)给元素设计层次

(9)别忘了margin和padding

第十三章

1.float属性能把网页元素移到网页(或者其他外围快)的某一侧。出现在浮动元素之后的所有HTML都能在网页中上移,环绕在浮动元素的周围。

float属性接受以下3种不同的值:left(左)、right(右)和none(无)。假设要把一张图片移到网页的右侧,可以创建下面这个类样式,并把它应用到<img>标签上:

.floatRight  {  float:  right;  }

将该属性应用到一个装满内容的<div>标签上时,还可以创建一个侧边栏:

.sidebar  {

float:  left;

width:  170px;