html漂浮特效代码（css漂浮代码）

今天给各位分享html漂浮特效代码的知识，其中也会对css漂浮代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、html浮动代码怎么用
• 2、html代码 文字漂浮于图片上面
• 3、html漂浮特效代码

html浮动代码怎么用

新建一个html网页，在body中插入【div class="content"/div】并引入CSS【.content{width: 420px;height: 100px;background: #d4d4d4;padding: 5px 0 5px 5px;}】。

请点击输入图片描述

在大DIV中插入一个DIV【div class="a"/div】并引入CSS【.a{width: 100px;height: 100px;margin-right: 5px;background: #ff0000;}】定义它的高，宽，外边距，背景色。

请点击输入图片描述

继续添加一个同级的DIV【div class="a b"/div】并引入样式a和样式b，样式B只定义背景色【.b{background: #FF5F00;}】。可以看到第2个DIV排到了第一个的下方位置。

请点击输入图片描述

按照同样的方法再添加2个同级的DIV并引入不同颜色的DIV【div class="a c"/divdiv class="a d"/div】。然后引入CSS【.c{background: #FFED00;}.d{background: #00FF93;}】。刷新后可以看到预览效果是4个IDV垂直排列的，怎么能让他们水平排列在一行呢？

请点击输入图片描述

为了方便朋友们查看顺序，把4个DIV分别插入一个数字，相当于给他们编一个号码。

请点击输入图片描述

接下来就要用到浮动代码了。在4个DIV共用的a样式中，加入左浮动【float: left;】。保存并刷新网页可以看到已经都在一行上了，而且是按照编码顺序从左到右排列的。

请点击输入图片描述

我们再来试一下右浮动【float:right】，可以看到DIV是从右向左排列的。现在朋友们知道怎么使用浮动代码了吗？

请点击输入图片描述

html代码 文字漂浮于图片上面

一、image 作为背景图片，即：background:url(".......");

例如如下代码块：

div style="background:url('loading.gif') no-repeat;width:100px;height:50px"添加文字...添加文字...添加文字.../div

二、将img块与文字块（文字块采用span标签显示）放在同一个div 中，然后设置他们之间的位置，例如如下代码块：

div style="position: relative; width: 170px; height: 89px;"

img src="loading.gif" width="170" height="89" alt=""

span style="position: absolute; top: 0; left: 0;"添加文字...添加文字...添加文字.../span

/div

扩展资料：

注意事项

position：absolute这个是绝对定位；是相对于浏览器的定位。

比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。

position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。

比如：div class="1"/divdiv class="2"/div

当1固定了位置。1的样式float:left;width:100px; height:800px;

2的样式为float:left; position：relative；margin-left:20px;width:50px;

2的位置在1的右边，距离120px

html漂浮特效代码

网上搜网页漂浮特效，一大堆，实现原理也很简单

div style="width:100px; height:100px; position:fixed; z-index:99; left:0; top:50%; margin-top:-50px;"内容/div

html漂浮特效代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css漂浮代码、html漂浮特效代码的信息别忘了在本站进行查找喔。