网页布局实例之瀑布流

 时间:2024-10-12 00:34:28

1、分析一下大概思路 在外层DIV 宽950,高600,里层有四个DIV,宽230,高600,向右浮动,分别间距10像素,里层四个DIV中的每个DIV中又分别有两个div,第一个宽230,高345,第二个宽230,高245,隔一个DIV调整div的顺序,就实现了一高一矮错开的样子,形成了瀑布流效果如下图,至此,思路已经明朗,瀑布流的效果基本体现出来了,接下来用实际代码体现

网页布局实例之瀑布流

4、分别设置class值为no1、no2、no3、no4的样式值<div class="pubuliu" style="width:950px; height:600px;"> <div class="no1" style="width:230px; height:600px; float:left;"></div> <div class="no2" style="width:230px; height:600px; float:left; margin-left:10px;"></div> <div class="no3" style="width:230px; height:600px; float:left; margin-left:10px;"></div> <div class="no4" style="width:230px; height:600px; float:left; margin-left:10px;"></div> </div>

网页布局实例之瀑布流

6、至此,瀑布流就定位好了,我们只需要在各自地坑位里填入自己想要显示的内容就行了,如图片,文字等。

  • eclipse如何配置安卓虚拟机sdk的路径
  • HTML表单教程 多选项的详解
  • mysql workbench如何查看服务器性能状况
  • 查看android手机的界面布局
  • 热门搜索
    野山坡旅游景点 安徽省旅游集团 悠哉旅游网怎么样 四川九寨沟旅游价格 斯里兰卡旅游攻略 兵马俑旅游 团购旅游网 金佛山旅游攻略 和儿子旅游爬山做了儿子带套 成都到九寨沟旅游团