z8seeker/40LayoutExercise

40个布局练习

40LayoutExercise

简述

共40个练习，每个练习具体要求见后文。练习成对，即奇数为需要掌握的知识点，偶数只需简单改动布局顺序即可。

所有练习以如下HTML结构为基础（千万不要改动，否则失去练习的意义）

<div id="container">
	<div id="header">Header</div>
	<div id="wrapper">
		<div id="content">Content</div>
	</div>
	<div id="navigation">Navigation</div>
	<div id="extra">Extra stuff</div>
	<div id="footer">Footer</div>
</div>

更新

• v1：最初版本，更新于 2015 年。

• v2：去除多余样式，仅保留布局部分，依旧采用 v1 布局方式，将 id 改为 class。

  • 20以后的某些题目需要考虑文字内容长短可能引发的布局错乱问题。
  • 在不不使用 calc 的前提下，需要通过某些方式曲线救国。（如外层 DOM margin-left 负值，内部 margin-left 正值 来为后面的元素预留出一定空间）。

• v3: 采用 flex 布局。

• v4: 可调整 dom 结构。

练习

1. Three percentage columns(n.1)

要求

1. wrapper 居中且占据50%宽度
2. navigation、extra 宽度25%，分居content两侧，左侧navigation，右侧extra

图示

2. Three percentage columns(n.2)

要求

1. 在1的基础上，调换navigation和extra

图示

3. Three percentage columns(n.3)

要求

1. wrapper 左对齐且占据50%宽度
2. extra、navigation宽度25%，依次位于content右侧

图示

4. Three percentage columns(n.4)

要求

1. 在3的基础上，调换navigation和extra

图示

5. Three percentage columns(n.5)

要求

1. wrapper 右对齐且占据50%宽度
2. navigation、extra 宽度25%，依次位于content左侧

图示

6. Three percentage columns(n.6)

要求

1. 在5的基础上，调换navigation和extra

图示

7. Three fixed columns(n.7)

要求

1. container 宽度700px且居中
2. wrapper 居中且宽度400px
3. extra、navigation 150px，依次位于content两侧

图示

8. Three fixed columns(n.8)

要求

1. 在7的基础上，调换navigation和extra

图示

9. Three fixed columns(n.9)

要求

1. container 宽度700px且居中
2. wrapper 左对齐且宽度400px
3. extra、navigation 150px，依次位于content右侧

图示

10. Three fixed columns(n.10)

要求

1. 在9的基础上，调换navigation和extra

图示

11. Three fixed columns(n.11)

要求

1. container 宽度700px且居中
2. wrapper 右对齐且宽度400px
3. navigation、extra 150px，依次位于content左侧

图示

12. Three fixed columns(n.12)

要求

1. 在11的基础上，调换navigation和extra

图示

13. Liquid, secondary columns fixed-width (n.13)

要求

1. wrapper 居中且宽度自适应，margin-left及margin-right为200px
2. extra、navigation 宽度200px，分别位于content两侧

图示

14. Liquid, secondary columns fixed-width (n.14)

要求

1. 在13的基础上，调换navigation和extra

图示

15. Liquid, secondary columns fixed-width (n.15)

要求

1. wrapper 左对齐且宽度自适应，margin-right为400px
2. navigation、extra 宽度200px，依次位于content右侧

图示

16. Liquid, secondary columns fixed-width (n.16)

要求

1. 在15的基础上，调换navigation和extra

图示

17. Liquid, secondary columns fixed-width (n.17)（开始float：right）

要求

1. wrapper 右对齐(float:right)且宽度自适应，margin-left为400px
2. extra、navigation 宽度200px，依次位于content左侧

图示

18. Liquid, secondary columns fixed-width (n.18)

要求

1. 在17基础上，调换navigation和extra

图示

19. Liquid, three columns, hybrid widths (n.19)(混合宽度)

要求

1. navigation 宽度200px，位于content左侧
2. content margin-left:200px margin-right: 33%
3. extra 宽度33%，位于content右侧

图示

20. Liquid, three columns, hybrid widths (n.19)(混合宽度)

要求

1. navigation 宽度33%，位于content左侧
2. content margin-left:33% margin-right: 200px
3. extra 宽度200px，位于content右侧

图示

21. Liquid, three columns, hybrid widths (n.21)

要求

1. wrapper margin-left:-25%为extra留出空间 width:100%不能省
2. content margin-left:25% margin-right: 200px为navigation留出空间
3. navigation 宽度200px，位于content右侧
4. extra 宽度25%，位于content右侧

图示

22. Liquid, three columns, hybrid widths (n.22)

要求

1. wrapper margin-left:-200px为extra留出空间
2. content margin-left:200px margin-right: 25%为navigation留出空间
3. navigation 宽度25%，位于content右侧
4. extra 宽度200px，位于content右侧

图示

23. Two columns liquid, side fixed (n.23)(flaot left|right)

要求

1. wrapper margin-left:-200px为navigation、extra留出空间 width:100%不能省
2. content margin-left:200px
3. navigation 宽度200px，位于content右侧 float:right
4. extra 宽度200px，位于content右侧、navigation底部 float:right; clear: right

图示

24. Two columns liquid, side fixed (n.24)(flaot left|right)

要求

1. wrapper margin-right:-200px为navigation、extra留出空间 width:100%不能省
2. content margin-right:200px
3. navigation 宽度200px，位于content左侧 float:left
4. extra 宽度200px，位于content左侧、navigation底部 float:left; clear: right

图示

25. Two percentage columns (n.25)（float left|right）

要求

1. 23基础上将固定宽度200px换成百分比30%
2. wrapper margin-left:-30%为navigation、extra留出空间 width:100%不能省
3. content margin-left:30%
4. navigation 宽度30%，位于content右侧 float:right
5. extra 宽度30%，位于content右侧 float:right clear: right

图示

26. Two percentage columns (n.25)（float left|right）

要求

1. 24基础上将固定宽度200px换成百分比30%
2. wrapper margin-right:-30%为navigation、extra留出空间 width:100%不能省
3. content margin-right:30%
4. navigation 宽度30%，位于content左侧 float:left
5. extra 宽度30%，位于content左侧 float:left clear: left

图示

27. One column liquid and two halves (n.27)

要求

1. wrapper 占满一行
2. navigation 宽度50%，位于content底部偏左
3. extra 宽度50%，位于content底部偏右

图示

28. One column liquid and two halves (n.27)

要求

1. wrapper 占满一行
2. navigation 宽度50%，位于content底部偏右
3. extra 宽度50%，位于content底部偏左

图示

29. Two percentage columns and one larger (n.29)

要求

1. wrapper margin-right:-30%为navigation留出空间 width:100%不能省
2. content margin-right:30%
3. navigation 宽度30%，位于content左侧
4. extra 宽度100%，位于content底部

图示

30. Two percentage columns and one larger (n.29)

要求

1. 在29的基础上，调换wrapper和navigation
2. wrapper margin-left:-30%为navigation留出空间 width:100%不能省
3. content margin-left:30%
4. navigation 宽度30%，位于content右侧
5. extra 宽度100%，位于content底部

图示

---

31. Two columns liquid, fixed side and large one (n.31)

要求

1. 在29基础上，把百分比宽度30%换成固定200px
2. wrapper margin-right:-200px为navigation留出空间
3. content margin-right:200px
4. navigation 宽度200px，位于content左侧
5. extra 宽度100%，位于content底部

图示

32. Two columns liquid, fixed side and large one (n.32)

要求

1. 在30基础上，把百分比宽度30%换成固定200px
2. wrapper margin-left:-200px为navigation留出空间
3. content margin-left:200px
4. navigation 宽度200px，位于content右侧
5. extra 宽度100%，位于content底部

图示

33. Two colums fixed (n.33)

要求

1. 23的扩展，增加container宽度700px，实现方式可简化，因为宽度固定
2. container 居中且宽度700px
3. wrapper 宽度500px
4. navigation 宽度200px，位于content右侧 float:right
5. extra 宽度200px，位于content右侧 float:right; clear: right

图示

34. Two colums fixed (n.34)

要求

1. 24的扩展，增加container宽度700px，实现方式可简化，因为宽度固定
2. container 居中且宽度700px
3. wrapper 宽度500px
4. navigation 宽度200px，位于content左侧 float:left
5. extra 宽度200px，位于content左侧 float:left; clear: left

图示

35. Two colums fixed (n.35)

要求

2. container 居中且宽度700px
3. wrapper 宽度500px
4. navigation 宽度200px，位于content右侧 float:right
5. extra 宽度100%，位于content底部（思考clear取值）

图示

36. Two colums fixed (n.36)

要求

2. container 居中且宽度700px
3. wrapper 宽度500px
4. navigation 宽度200px，位于content左侧 float:left
5. extra 宽度500px，位于content底部

图示

37. Two colums fixed (n.37)

要求

1. container 居中且宽度700px
2. wrapper 宽度500px
3. navigation 宽度200px，位于content右侧 float:right
4. extra 宽度100%，位于content底部

图示

38. Two colums fixed (n.38)

要求

1. 37基础上调换wrapper和navigation顺序

图示

39. One column fixed and two halves (n.39)

要求

1. container 居中且宽度700px
2. wrapper 宽100%
3. navigation 宽度50%，位于content底部偏左
4. extra 宽度50%，位于content底部偏右

图示

40. One column fixed and two halves (n.40)

要求

1. 39基础上调换navigation和extra顺序

图示