Div浮动的简单实现

最新推荐文章于 2022-11-01 15:50:04 发布
最新推荐文章于 2022-11-01 15:50:04 发布
阅读量276 收藏
点赞数
分类专栏： JavaScript 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yelb_ianylb/article/details/83731141
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
//当页面被流动的时候调用些方法
function onScroll(){
var top = (document.documentElement && document.documentElement.scrollTop)?document.documentElement.scrollTop : document.body.scrollTop;
var floatDiv = document.getElementById("floatDiv");
folatDiv.style.position = "absolute";
folatDiv.style.top = top+"px";
}
window.onscroll = onScroll;
</script>
</HEAD>

<BODY>
<table>
<tr>
<td width="200px">
<div id="folatDiv" style="position:absolute;top:0px"><font color='red' size='6'>测试</font></div>
</td>
<td width="200px">
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
</td>
</tr>
</table>
</BODY>
</HTML>
yelb_ianylb
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中div的浮动float
李昆鹏的博客
05-11 3万+
------------------------------CSS中div的浮动float-----------------------------------HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。而此浮动元素在文档流空出的位置，由后续的...
CSS浮动(float,clear)通俗讲解
jincenlong58的专栏
03-29 3261
很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理，迫不及待的分享给大家 写在前面的话： 由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针对性的讲解。 如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你。 小菜水平有限，本文仅仅是入门教程，不当之处请谅解
CSS基础：div浮动效果（float的应用）
Alley_Olive的专栏
07-04 653
CSS基础：div浮动效果（float的应用）
DIV CSS布局：CSS浮动float属性
sun13212715744的博客
11-01 810
在传统的表格布局中，我们对表格应该对齐方式对实现了对布局的应用，而应用Web标准构建网页以后，float浮动属性是布局中非常重要的属性，我们常常通过对div元素应用float浮动来进行布局，不但对整个版式进行规划，也可以对一些基本元素如导航等进行排列。
jQuery实现div浮动层跟随页面滚动效果
12-10
【jQuery实现div浮动层跟随页面滚动效果】 在网页设计中，有时我们需要创建一种效果，使得某个div元素（如广告栏、导航菜单等）在用户滚动页面时始终保持在屏幕的特定位置，这种效果被称为浮动层或漂浮层。jQuery库...
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
12-09
在这个JavaScript实现的网页实例中，主要展示了如何使用HTML、CSS和JavaScript来创建一个浮动在页面顶部并且带有关闭按钮的div元素。这个功能通常用于创建工具提示、通知栏或者广告条等，以提供一种非侵入性的用户...
不用float实现div模块居中布局
10-31
不用float实现div模块居中布局 在网页布局中，实现div模块居中的方法有很多，但是一般来说，使用float属性是最常见的方法之一。然而，在某些情况下，我们可能需要不使用float属性来实现div模块居中布局。这时，我们...
JS简单实现浮动窗口效果示例
10-21
在JavaScript中实现浮动窗口效果，主要是通过操作DOM元素的CSS属性来实现的。浮动窗口通常用于网站上的广告或者在线客服功能，它会始终出现在浏览器窗口的某个固定位置，即使用户滚动页面，窗口仍然保持可见。 首先...
DIV+CSS布局：CSS浮动float属性详解
07-07
DIV+CSS布局：CSS浮动float属性详解 不解释
Div浮动显示功能
12-27
很好的div浮动层显示,一些下拉改为透明的浮动层，便于做查询等功能
Web入门初学者纯静态页面练习 HTML+CSS 布局、浮动练习
11-23
一个纯静态HTML+CSS单页面练习,牵扯布局、浮动练习。
如何终止DIV的float属性简单实现
01-19
终止 DIV 的 float 属性，在 css 里面定义一个样式 复制代码代码如下: .clear_float { clear: both; } 页面使用时加上一行 <div class=clear_float></div> 后面的 div 将不再 float。
Div 悬浮层 Demo
12-20
div 悬浮层 类似广告 右下方渐渐弹出
前端技术——3——浮动与定位
kaoa000的专栏——非淡泊无以明志，非宁静无以致远
02-24 4976
浮动与定位：float，position 块级标签：<div> <p> <h1-6> <ul><ol><dl> 内联标签：<a> <img> <input> <span><select><textarea> 正常文档流：将元素（标签）在进行排版布局的时候，按照从上到下，从左到右的顺序进行排版的一个布局流。如果都是内联标签，则一行最右边的标签显示长度大于当前行右边
HTML5中div布局的float属性
热门推荐
ChenYitian
04-03 2万+
今天在看div布局的时候讲到了利用float属性来实现元素的浮动，一开始搞得不是很明白，现总结如下： 无论如何，div是一种块元素，每个元素铁定会占一行，无论当前行是否已经用完了，也就是所谓的“流”的概念 例如： 1号块 2号块 3号块 4号块 样式： div#container{ background-color: grey; wid
浮动布局练习
407指导员
11-11 361
浮动布局练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动练习一</title> <style> body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, i
CSS---div盒子模型、相对绝对位置、float浮动、清除浮动
weixin_51351637的博客
08-01 2389
类似下图现象，四个浮动的图不再占用最上面的那个div。
web网站实现浮动框架
最新发布
05-09
Web网站实现浮动框架可以通过使用CSS的float属性来实现。在HTML中，使用div标签来定义需要浮动的框架，然后通过CSS设置float属性来使其浮动。以下是一个简单的示例代码： HTML代码： ``` <div class="container"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值