CSS的浮动效果

原创 2012年03月24日 13:19:59

在CSS中,浮动是非常重要的一个功能,主要是用来控制行元素或者块元素并列显示或者向左或者向右浮动。下面

来看一下效果。

先看一下Div的向右浮动效果

HTML代码如下

<!DOCTYPE html>
<html>
  <head>
    <title>css的浮动效果</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
  <link rel="stylesheet" href="../css/myFloat.css" type="text/css"></link>
  </head>
  
  <body>
  	<div class="div3">
    <div id="div2" class="div1">div1</div>
    <div id="div2" class="div1">div2</div>
    <div id="div2" class="div1">div3</div>
    </div>
  </body>
</html>

CSS代码如下

body{
	margin: 0px;
	padding: 0px;
}

.div1{
	background-color: pink;
	width: 150px;
	height: 100px;
	border: 1px solid blue;
	margin-top: 5px;
	margin-left: 5px;
}

#div2{
	float: left;/*右浮动是指让她尽量向右浮动,直到父元素的右边界*/
}

.div3{
	width: 800px;
	height: 400px;
	border: 1px solid blue;
}

效果如图



5种css图片浮动效果

给平淡的站点带来活力  hover效果能给网页增加一些动态效果,并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器的支持,我们可以用纯...
  • yuzhongkai
  • yuzhongkai
  • 2016年04月09日 15:14
  • 909

css+js框浮动位移效果

cssjs框浮动位移效果 要实现的效果 咯这个样儿就是要搞整起来的目标看下面看下面好像有点像是电影的宣传一样 _ 先来一个小框框 哈哈就是使用一个div包裹 然后加上其他元素 头图 标题和价格 最后...
  • QQ1360303452
  • QQ1360303452
  • 2017年06月11日 04:55
  • 727

用css实现链接经过时显示浮动图片背景的效果

用css实现链接经过时显示浮动图片背景的效果 顾名思义,就是鼠标放到链接上时显示浮动的图片,只不过这个图片是背景图片,还是先来看一下演示比较直观:attachment/qing/hover_back....
  • proglovercn
  • proglovercn
  • 2007年09月27日 16:58
  • 1934

用CSS动画实现浮动跳动效果

在很多前端的网页动态效果中,我们需要实现一个动态上下回动的效果,下去之后渐渐变慢,回去之后也是先快后缓。        当然,这样的动画使用JS源代码或者其他方法都可以实现,但是有的活血会很复杂,这...
  • weixin_41262388
  • weixin_41262388
  • 2018年01月03日 11:18
  • 67

CSS 用浮动制作一个导航栏

ul{ list-style: none; } li{ float: left;/*浮动:文本悬浮。脱离了文档流,悬浮在...
  • xuehyunyu
  • xuehyunyu
  • 2017年05月26日 21:54
  • 472

【CSS】清浮动的10种方法与利弊分析

一 、 给浮动元素的父级加高度;  分析:一般情况下,父元素的高度是由子元素来撑开,但由于子元素设置了浮动,所以会脱离文档流,父元素的高度为0,给父元素加高度,高度需要大于浮动子元素的最大高度。否则,...
  • qq_16598485
  • qq_16598485
  • 2016年04月28日 11:59
  • 585

css 清楚浮动的8种方式

清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全,共8种方法。 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。而...
  • u012125579
  • u012125579
  • 2015年08月24日 10:36
  • 1575

CSS之定位、居中、浮动及利用浮动设计网页布局和导航

一:定位: 1.相对定位:如果对一个元素进行相对定位,它将出现在它所在的位置上。然后利用属性position:relative,接着可以通过选择设置left、right、top 、bottom的值,...
  • pleasecallme_522
  • pleasecallme_522
  • 2016年07月21日 23:44
  • 877

CSS3-用过渡实现气泡效果

要想做一张泡泡浮动的效果图,首先要准备一张泡泡图片 实现代码如下 v { 过渡动画 .div{ ...
  • qq_29548433
  • qq_29548433
  • 2017年07月20日 13:55
  • 475

CSS3 按钮悬停(Hover)效果全集

CSS3 按钮悬停(Hover)效果全集
  • iefreer
  • iefreer
  • 2014年09月13日 22:02
  • 8125
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS的浮动效果
举报原因:
原因补充:

(最多只允许输入30个字)