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：

 1 #fd{
 2     width:100px;
 3     height:150px;
 4     background-color:red;
 5     float:left;
 6 }
 7 #sd{
 8     width:150px;
 9     height:100px;
10     background-color:blue;
11     float:left;
12 }
13 #td{
14     width:100px;
15     height:100px;
16     background-color: green;
17     float:left;
18 }
19 #container{
20     width:300px;
21     height:500px;
22     background-color: darkgray;
23 }
24 #text{
25     clear:left;
26 }

实现的效果如下：

2、瀑布流效果的实现：

index.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>浮动的应用</title>
 6    <link href="style3.css" type="text/css" rel="stylesheet">
 7 </head>
 8 <body>
 9
10    <div id="div1">
11        <ul>
12           <li><img src="img.jpg"></li>
13           <li><img src="img2.jpg"></li>
14           <li><img src="img3.jpg"></li>
15        </ul>
16        <ul>
17           <li><img src="img4.jpg"></li>
18           <li><img src="img5.jpg"></li>
19           <li><img src="img6.jpg"></li>
20        </ul>
21        <ul>
22           <li><img src="img7.jpg"></li>
23           <li><img src="img8.jpg"></li>
24           <li><img src="img9.jpg"></li>
25        </ul>
26    </div>
27
28 </body>
29 </html>

css:

 1 *{
 2     margin:0px;
 3     padding:0px;
 4 }
 5 li{
 6     list-style:none;
 7 }
 8 #div1{
 9     width:950px;
10     height:auto;/*高度自适应*/
11     margin:20px auto; /*前一个参数代表上下，后一个代表左右*/
12 }
13 ul{
14     width: 250px;
15     float:left;
16 }

实现的效果：

转载于:https://www.cnblogs.com/UniqueColor/p/5749591.html

css浮动+应用（瀑布流效果的实现）相关推荐

《uni-app》移动端纯CSS实现不等高的瀑布流效果
<uni-app>移动端纯CSS实现不等高的瀑布流效果前言示例 WEB端示例移动端示例瀑布流实现第一种: flex 核心代码实现缺点完整代码第二种:column-coun ...
网页瀑布流效果实现的几种方式
前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb i ...
30个创意出色的非常实用的jquery框架插件-(视觉大背景，瀑布流效果)
jQuery是在网页设计师和开发者最近的热门话题之一.人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放,视频播放等 ...
利用JS实现简单的瀑布流效果
转载:https://www.cnblogs.com/dyx-wx/p/4642637.html 一.瀑布流之准备工作首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话 ...
javascript瀑布流效果
javascript瀑布流效果其实javascript瀑布流前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...
前端如何实现音乐盒胶盘的转动_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...
首先,我们来看一下什么是瀑布流布局效果,比如电商网站蘑菇街原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
图片流_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果?
首先,我们来看一下什么是瀑布流布局效果,比如电商网站蘑菇街原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
微信小程序 - - - - - 瀑布流效果实现
瀑布流效果 1. 瀑布流 1.1 什么叫瀑布流? 1.2 瀑布流有什么优点? 1.3 如何实现瀑布流的关键是什么? 2. 实现思路 2.1 思路梳理 2.2 实现瀑布流对于一些小程序,关于瀑布流的需 ...
原生JS实现瀑布流效果
前两天通过B站在极客学院学习了JS动态瀑布流效果:主要是HTML+CSS控制样式,通过JS实现全局瀑布流样式,以及通过访问自定义的JSON字符串,实现图片无限加载:现对其代码进行整理,供日后学习参考. ...

css浮动+应用（瀑布流效果的实现）

css浮动+应用（瀑布流效果的实现）相关推荐

最新文章

热门文章