A-CSS 流式布局讲解.pptx

HTML5网页设计主讲：陈玲模块八页面布局与规划

8.2流式布局瀑布流布局masonry实现瀑布流布局制作图片列表讲解时间：25分钟实践时间：20分钟

8.2流式布局流式布局不受窗口宽度影响，使用百分比宽度来限定布局元素，这样可以根据客户端分辨率的大小来进行合理的显示。即从左到右对该容器中的控件进行布局，当一行不能容纳时自动换行。该布局是从左到右，然后从上到下。流式布局是默认的页面布局方式。流式布局用百分比来做，简单明了又实用。

8.2.1瀑布流布局瀑布流布局是流式布局的一种，是当下比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。body h1流式布局/h1 imgsrc=logo.jpg p 流式布局基本没有对文字图片信息的位置控制，它所遵从的是从左至右，然后从上到下的顺序 /p/body

8.2.2masonry实现瀑布流布局masonry是一个javascript插件，通过该插件可以轻松实现瀑布流布局，和CSS中float的效果不太一样的地方在于float先水平排列，然后再垂直排列，使用masonry则垂直排列元素，然后将下一个元素放置到网格中的下一个开发区域。这种效果可以最小化处理不同高度的元素在垂直方向的间隙。

8.2.2masonry实现瀑布流布局body divid=grid divclass=grid-itema /div divclass=grid-itemb /div ...... divclass=grid-itemd /div divclass=grid-iteme /div /div/bodystyletype=text/css#grid{width:1000px;margin:0auto;}.grid-item{width:200px;float:left;}.a{background:lightblue;height:200px;}.b{background:lightcoral;height:300px;}.c{background:lightgreen;height:500px;}.d{background:lightsalmon;height:350px;}.e{background:lightseagreen;height:150px;}/stylescriptsrc=masonry.pkgd.min.js/scriptscripttype=text/javascript varmsnry=newMasonry(#grid,{ itemSelector:.grid-item, columnWidth:200 });/script

8.2.2学生实践练习制作网页设计图片列表。实践时间：20分钟任务说明：

8.2.2学生实践练习创建一个新HTML5的文档。使用DIV编写页面的结构内容。编写CSS代码设置标签样式。实现思路：

THANKS