HTML/CSS 订阅所有【HTML/CSS】的日志

DIV固定浮动在网页顶端或底部代码

编辑:dnawo 日期:2014-03-12

字体大小: 小 中 大
1、DIV固定浮动在网页顶端代码

复制内容到剪贴板程序代码 程序代码
<div style="position:fixed; top:0; z-index:100">top</div>

说明：要使div里的文本居中，增加“width:100%; text-align:center;”即可（下同）。

2、DIV固定浮动在网页底部代码

复制内容到剪贴板程序代码 程序代码
<div style="position:fixed; bottom:0; z-index:100">bottom</div>

完整示例

复制内容到剪贴板程序代码 程序代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DIV</title>
<style type="text/css">body{margin:0; padding:0;}</style>
</head>

<body>
    <div style="position:fixed; top:0; z-index:100;">top</div>
    <div style="height:2000px; background-color:#A8A8B7">hello,world!</div>
    <div style="position:fixed; bottom:0; z-index:100;">bottom</div>
</body>
</html>


上一篇: 神舟优雅A480N-i5D3笔记本关机状态USB给手机充电测试
下一篇: 交通银行信用卡开通账单和大额交易短信提醒示例
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 12389
发表评论
请登录后再发表评论！