CSS元素的浮动与定位综合案例2.pdf
版权申诉
135 浏览量
2022-07-10
12:08:44
上传
评论
收藏 1.17MB PDF 举报
CSS元素的浮动与定位综合案例2
本文来自 喻浩 《DIV+CSS网页样式与布局从入门到精通》 清华大学出版社 2015年
摘 要：本文档主介绍元素的浮动与定位综合案例之展览式网页布局的具体实现方法。
关键词：>元素浮动与定位>综合案例
展览式网页布局
纯粹的 定位布局固然很简单，设计起来也很方便，但这也许不是最佳布局选择。如果一味追求
视觉艺术或创意，发挥一下 定位布局的优势也未尝不可，但是在以文本信息为主体的网页设计中，
使用这种方法倒显得不方便了。设计师往往更钟情于以流动布局为主体，恰当地应用定位布局来解决个
别模块的特殊显示需求。下面就介绍一个以流动布局为主体，恰当使用定位布局进行补充的设计案例。
这是禅意花园第 号作品（
/!
，设计
效果如图 和图 所示。
图 禅意花园网页设计效果
图 禅意花园网页设计效果
整个页面的设计思路是，隐藏第一大模块（ !"!#!#$）的主要内容，把其中第 个子模块
的第 段文本定位到页面的左上顶角，第二大模块（ !"!#%!&'#$）以自然流动的方式
进行布局，然后采用绝对定位的方式把第三大模块定位到页面右侧，显示为一个狭长的侧栏，各个模块
的定位类型如图 ( 所示，设计思路如图 所示。
1 / 5
CSS 元素的浮动与定位 综合案例 2
资源评论
