悬浮DIV页面制作
来源:互联网 发布:100以内手指算法视频 编辑:程序博客网 时间:2024/05/15 22:29
使用div的定位属性position可以实现div的底部悬浮功能。
CSS样式:body里面的padding属性是用来占位的,div固定后会挡住部分内容,在body的最下方加上边框或div可以让信息内容完整显示在悬浮框的上面。
body{
margin:0px;
padding:0px;
padding-bottom:32px;
}
.xuanfu{
position:fixed;
bottom:0px;
display:block;
width:100%;
height:32px;
background:#008080;
color:#FFF;
text-align:center;
line-height:32px;
}
html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
<link type="text/css" rel="stylesheet" href="text.css"
<title>底部悬浮的DIV</title>
</head>
<body>
<p>1这是一个底部悬浮的DIV</p>
<p>2这是一个底部悬浮的DIV</p>
<p>3这是一个底部悬浮的DIV</p>
<p>4这是一个底部悬浮的DIV</p>
<p>5这是一个底部悬浮的DIV</p>
<p>6这是一个底部悬浮的DIV</p>
<p>7这是一个底部悬浮的DIV</p>
<p>8这是一个底部悬浮的DIV</p>
<p>9这是一个底部悬浮的DIV</p>
<p>10这是一个底部悬浮的DIV</p>
<p>11这是一个底部悬浮的DIV</p>
<p>12这是一个底部悬浮的DIV</p>
<p>13这是一个底部悬浮的DIV</p>
<p>14这是一个底部悬浮的DIV</p>
<p>15这是一个底部悬浮的DIV</p>
<p>16这是一个底部悬浮的DIV</p>
<div class="xuanfu">嘿嘿,我就在下面</div>
</body>
</html>
- 悬浮DIV页面制作
- DIV悬浮在页面底部或头部
- div悬浮
- 仿照网易首页1【悬浮跟随页面滚动的div】
- HTML 固定div于页面固定位置,实现悬浮按钮。
- css样式实现div页面底部始终悬浮显示
- 按钮操作DIV的打开与关闭(div悬浮于页面之上)
- JS 让div跟着鼠标移动 以及悬浮层的制作
- DIV悬浮效果
- div悬浮提示框
- DIV各种悬浮
- js+div悬浮框
- div悬浮居中
- div悬浮固定
- js保持div悬浮,不随页面向下滚动而被覆盖
- jQuery UI Datepicker 一个案例(弹出div层,悬浮整个页面)
- 页面悬浮框
- Div+CSS页面制作用好border和clear
- 网页自适应屏幕大小
- 猴年大吉之开心刷题
- 自定义控制器切换
- eclipse JavaEE版"javax.servlet.http.HttpServlet" was not found on the Java Build Path问题的解决办法
- LeetCode题解:Single Number II
- 悬浮DIV页面制作
- 基于Dreamweaver的网页制作学习2----站点规划及图片的插入
- spring(IOC) 对象创建时机、对象作用域scope、对象的初始化方法和销毁方法的调用、spring容器总结
- LeetCode题解:Copy List with Random Pointer
- nyoj48过河问题
- 我的博客
- reading note 2
- LeetCode题解:Word Break
- 一个命令永久禁用Win10驱动程序强制签名