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>

目前完成了1-40的文档。

使用须知: 1, 使用 templates/index.html 做为导航页 2, 点击左侧标记顺序码,可以动态加载相应的的CSS, 同时改变页面的布局。 3, 自行练习只需修改 templates/css/co{id}.css 文件,点击对应的按钮{id}即可加载结果。

示例图

练习

1. Three percentage columns(n.1)

要求

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

图示

2. Three percentage columns(n.2)

要求

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

图示

3. Three percentage columns(n.3)

要求

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

图示

4. Three percentage columns(n.4)

要求

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

图示

5. Three percentage columns(n.5)

要求

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

图示

6. Three percentage columns(n.6)

要求

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

图示

7. Three fixed columns(n.7)

要求

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

图示

8. Three fixed columns(n.8)

要求

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

图示

9. Three fixed columns(n.9)

要求

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

图示

10. Three fixed columns(n.10)

要求

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

图示

11. Three fixed columns(n.11)

要求

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

图示

12. Three fixed columns(n.12)

要求

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

图示

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

要求

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

图示

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

要求

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

图示

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

要求

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

图示

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

要求

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

图示

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

要求

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

图示

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

要求

在17基础上，调换navigation和extra

图示

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

要求

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

图示

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

要求

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

图示

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

要求

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

图示

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

要求

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

图示

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

要求

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

图示

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

要求

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

图示

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

要求

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

图示

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

要求

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

图示

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

要求

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

图示

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

要求

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

图示

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

要求

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

图示

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

要求

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

图示

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

要求

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

图示

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

要求

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

图示

33. Two colums fixed (n.33)

要求

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

图示

34. Two colums fixed (n.34)

要求

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

Name		Name	Last commit message	Last commit date
Latest commit History 22 Commits
code		code
templates		templates
.gitignore		.gitignore
readme.md		readme.md

xphn95/40LayoutExercise

Folders and files

Latest commit

History

Repository files navigation