css浮动+应用（瀑布流效果的实现）
首先是index.html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link href="style2.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="fd"></div>
<div id="sd"></div>
<div id="td"></div>
<div id="text">hello world</div>
</div>
</body>
</html>
css：
#fd{
width:100px;
height:150px;
background-color:red;
float:left;
}
#sd{
width:150px;
height:100px;
background-color:blue;
float:left;
}
#td{
width:100px;
height:100px;
background-color: green;
float:left;
}
#container{
width:300px;
height:500px;
background-color: darkgray;
}
#text{
clear:left;
}
实现的效果如下：
2、瀑布流效果的实现：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动的应用</title>
<link href="style3.css" type="text/css" rel="stylesheet">
</head>
<body> <div id="div1">
<ul>
<li><img src="img.jpg"></li>
<li><img src="img2.jpg"></li>
<li><img src="img3.jpg"></li>
</ul>
<ul>
<li><img src="img4.jpg"></li>
<li><img src="img5.jpg"></li>
<li><img src="img6.jpg"></li>
</ul>
<ul>
<li><img src="img7.jpg"></li>
<li><img src="img8.jpg"></li>
<li><img src="img9.jpg"></li>
</ul>
</div> </body>
</html>
css:
*{
margin:0px;
padding:0px;
}
li{
list-style:none;
}
#div1{
width:950px;
height:auto;/*高度自适应*/
margin:20px auto; /*前一个参数代表上下，后一个代表左右*/
}
ul{
width: 250px;
float:left;
}
实现的效果：
css浮动+应用（瀑布流效果的实现）的更多相关文章
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
- css基础之 图片瀑布流布局：用CSS+DIV等宽格子堆砌瀑布流效果 （一）
<!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...
- 纯 css column 布局实现瀑布流效果
原理 CSS property: columns.CSS属性 columns 用来设置元素的列宽和列数. 兼容性 chrome 50+ IE 10+ android browser 2.1+ with ...
- 用jQuery实现瀑布流效果学习笔记
jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...
- web页面和小程序页面实现瀑布流效果
小程序实现瀑布流效果,和web页面差不多,都要经过以下步骤: 1).加载图片,获取图片的宽高度: 2).根据页面需要显示几列计算每列的宽度: 3).根据图片真实宽度和每列的宽度比,计算出图片需要显示的 ...
- js图片瀑布流效果
要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...
- WPF下制作的简单瀑布流效果
最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...
- 利用JS实现简单的瀑布流效果
哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...
- 【前端】用jQuery实现瀑布流效果
jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...
随机推荐
- Windows离线安装.NET3.X
Windows离线安装.NET3.X 当我们在Windows上安装软件的时候,总是会提示需要安装.NET3.X.而大多数人们选择在线安装,这样会很慢,不少人想到了离线安装的方式.其是只要你的电脑是Wi ...
- 开源CMS建站项目DNN研究与心得
DNN (Dotnetnuke) 首先是开源的,并且采用BSD开源协议,也就是说你可以任意修改源代码.传播.作为商品出售,仅有的要求就是保留源代码中的版权文字,这就解决了我多年来的心病:我知道动网新闻 ...
- Android Studio 打开弹出警告框
1.Android Studio打开后,自己的项目没有打开,就弹出了警告框,重启之后依然弹出警告框: 警告框内容:"Cannot load project: java.lang.Illega ...
- java.io.FileNotFoundException: class path resource [bean/test/User.hbm.xml] cannot be opened because it does not exist
确定下 WEB-INF/classes下有没有,不是src下哦 工程的src下创建后,会发布到tomcat下项目下的classes中
- XFire构建服务端Service的两种方式
1.原声构建: 2.集成spring构建 http://blog.csdn.net/carefree31441/article/details/4000436XFire构建服务端Service的两种方 ...
- MyEclipse内存不足的问题
今早打开MyEclipse莫名其妙弹出提示框,然后我各种搜索,用了网上能查到的各种办法去试图解决问题,方法包括但不限于 修改eclipse.ini .设置Default VM Arguments . ...
- Qt5中QMessageBox::warning()的第一个参数写this时出错
StandardButton QMessageBox::warning ( QWidget * parent, const QString & title, const QString &am ...
- jQuery--jqChart折线图使用eval处理返回数据无效的解决方法
jquery初学者 查了很多帖子,jqchart插件做折线图时,处理返回数据时全都是eval,但我怎么也弄不出来,后来发现: 1.根本不需要eval处理,直接截取字符串即可(返回值要拼接好): 2.处 ...
- Phpcms V9全站伪静态设置方法
为什么要伪静态?具体在这里就不说了,你懂的!一方面更新修改后不需要生成静态文件,另一方面为了SEO! 访问规则如下 1 2 list-{$catid}-{$page}.html content-{$c ...
- 游览器保存密码和自动填充密码的困惑 (browser save password and auto fill password )
原文 refer : http://www.cnblogs.com/happyfreelife/p/4240100.html 当一个带有username and password 的表单被提交, 游览 ...