div静止底部Demo.rar资源-CSDN文库

共3个文件

css：1个

html：1个

jpg：1个

需积分: 3 129 浏览量 2009-02-02 17:16:34 上传评论收藏 3KB RAR 举报

在网页设计中，让元素保持在页面底部不动是一种常见的需求，尤其在布局设计时，比如页脚就需要始终显示在屏幕的最下方。本示例"div静止底部Demo"通过CSS样式实现这一效果，让我们来深入探讨这个话题。我们要解决的核心问题是如何使一个`div`元素始终保持在页面的底部。这种布局方式通常被称为"粘性底部"或"固定底部"。在CSS中，我们可以使用多种方法来实现这一效果，这里主要介绍两种常见的方式：定位（Positioning）和Flexbox布局。 1. **定位（Positioning）方法**： - 将`div`元素的父容器设置为相对定位（`position: relative;`），这样子元素可以相对于父元素进行绝对定位。 - `div`元素设置为绝对定位（`position: absolute;`），并将其底部与父元素的底部对齐（`bottom: 0;`）。 - 如果你想让这个`div`元素在窗口滚动时始终保持在视口底部，可以将它的顶部与浏览器窗口的底部对齐（`position: fixed;`，`bottom: 0;`）。示例代码： ```css .parent { position: relative; } .sticky-bottom { position: absolute; bottom: 0; width: 100%; /* 添加其他样式 */ } ``` 2. **Flexbox布局方法**： - 将`div`元素的父容器设置为display: flex，并且在主轴方向上使用`flex-direction: column;`。 - 使用`align-items: flex-end;`或者`justify-content: flex-end;`将底部元素推到容器的底部。在垂直方向（column方向）上，`align-items: flex-end;`会起作用。示例代码： ```css .parent { display: flex; flex-direction: column; min-height: 100vh; /* 使父元素至少占据整个视口高度 */ } .sticky-bottom { align-self: flex-end; /* 在flexbox布局中将元素推至底部 */ /* 添加其他样式 */ } ``` 在"div静止底部Demo"的压缩包中，很可能是通过以上的一种或两种方式展示了如何实现这个效果。解压文件后，你可以查看HTML和CSS代码，学习实际的实现过程。这将有助于你理解和掌握这两种方法，以便在自己的项目中灵活运用。此外，"拖动"标签可能暗示了这个示例可能包含了拖放功能，这通常是通过JavaScript实现的，例如使用`dragstart`、`drag`、`dragend`等事件处理函数。虽然这个描述主要关注的是`div`的静态底部布局，但了解如何结合使用CSS和JavaScript实现交互式拖放功能也是很重要的技能。 "div静止底部Demo"是一个关于CSS布局的实例，它演示了如何使用定位和Flexbox让`div`元素保持在页面底部。通过研究提供的代码和理解这些技术，你可以增强自己在网页布局和交互设计方面的知识。

资源推荐

资源详情

资源评论

收起资源包目录

div静止底部Demo.rar （3个子文件）

div静止底部Demo

css

beyond_common.css 834B

demo.html 4KB

images

foot_bg_image.jpg 878B

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div静止下方不动Demo</title> <style type="text/css">  </style> </head> <body> <div id="fixed_div" class="fixed_div"> <div align="center"> Look at me !!! div静止在下方不动</div> </div> <div id="virtual_body" class="virtual_body"> <div style="height:888px;"> <table width="1142" height="134" border="0"> <tr> <td>主要内容：区域 　第1条准则对自己公司的产品抱有极大的兴趣 1.对公司的产品具有寻根究底的好奇心 2.始终表现你对公司及产品的兴趣和热爱 3.热爱并专注于自己的工作 4.天下没有一劳永逸的事，要不断自我更新. 第2条准则以传教士般的热情和执着打动客户 1.以传教士般的热情和执着打动客户 2.站在客户的立场为客户着想 3.最完善的服务才有最完美的结果. <A href="http://info.china.alibaba.com/news/community/c14.html" target="_blank">更多管理技巧</A> <A href="http://info.china.alibaba.com/news/community/c14.html" target="_blank">更多管理技巧</A> 第3条准则乐于思考，让产品更贴近客户 1.了解并满足客户的需求 2.思考如何让产品更贴近客户. 第4条准则与公司制定的长期目标保持一致 1.跟随公司的目标，把握自己努力的方向 2.做一个积极主动的人 3.奖金和薪水不是惟一的工作动力 4.把自己融入到整个团队中去 5.帮助老板成功，你才能成功. <A href="http://info.china.alibaba.com/news/community/c14.html" target="_blank">更多管理技巧</A> <A href="http://info.china.alibaba.com/news/community/c14.html" target="_blank">更多管理技巧</A> 第5条准则具有远见卓识，并提高专业知识和技能 1.对周围的事物要有高度的洞察力 2.吃老本是最可怕的 3.不断学习，提高自己的工作能力 4.掌握新知识新技能，以适应未来的工作 5.做勇于创新的新型员工. 第6条准则灵活地利用那些有利于你发展的机会 1.机会从来不会缺乏 </td> </tr> </table> </div> </div> </body> </html>

评论收藏

内容反馈