CSS元素的浮动与定位综合案例1
本文来自 喻浩 《DIV+CSS网页样式与布局从入门到精通》 清华大学出版社 2015年
摘 要:本文档主介绍元素的浮动与定位综合案例之画册式网页布局的具体实现方法。
关键词:>元素浮动与定位>综合案例
画册式网页布局
如图 和图 所示,如果不是浏览器窗口的提示,我们可能想象不到这是用 设计的页面。这种
效果可能只会在桌面排版中才可以看到,现在能够用 来实现,确实令人感到新鲜和兴奋。
图 漫画式网页设计效果
图 漫画式网页设计效果
但是,如果查看源代码就会发现,该页面的设计很简单,它主要应用 定位技术来布局页面,具
体来说就是页面中的漫画情景由背景图像来实现,而所标注的语言通过 定位来精确控制。下面就来
详细分析它的实现过程。
首先明确,这幅作品是禅意花园收藏的第 号作品 (
,整个设计思路如图 所示。
1 / 5
CSS 元素的浮动与定位 综合案例 1