域名注册
- 中文域名
- 英文域名
- 通用网址
- 域名解析
- 域名转入\转出
虚拟主机
- 主机购买
- 管理主机
- FTP上传
- 数据库管理
- 主机续费升级
网站建设
- 建站流程介绍
- 网站设计
- 网站改版
- 网站维护
- 网站推广
企业邮局
网站优化
网站备案
服务器租用
其它服务
- 您现在的位置： 创新互联 >> 网站建设 >> 网站建设常见问题 >> 网页设计：网页中层的固定实现代码
网页设计：网页中层的固定实现代码
- 作者：曾小姐 文章来源：成都网站建设 点击数：769 更新时间：2011-12-02
- 对于DIV+CSS不熟悉的朋友们，可能只有加班加点的在项目上线时把遇到的问题解决了。下面，小编会教大家一个简单的代码，来实现网页设计中层的固定，参考代码如下：
首先，复制代码，代码如下:
<!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="GBK"/>
<title>固定上下层的位置｜dushuwu.net</title>
<style type="text/css">
<!--
body {
background-image: url(0);
background-attachment: fixed;
}
#BottomNav {
background: #9F6;
z-index: 999;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
position:fixed;
top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
overflow: visible;
}
#topNavWrapper {
height: 30px;
margin: 0px auto;
width:100%;
z-index:100;
position:fixed ;
top:0px;
left:0;
background: #9F6;
}
#center
{
width: 100%;
height:100%;
padding-top:30px;
padding-bottom:30px;
}
-->
</style>
</head>
<body>
<div id="topNavWrapper">固定悬浮导航在此处,不随滚动条的滚动变化</div>
<div id="center">
<p>我是中间层</p>
<p>我是中间层</p>
<p>我是中间层</p>
<p>我是中间层</p>
</div>
<div id="BottomNav">固定悬浮导航在此处,,不随滚动条的滚动变化</div>
</body>
</html>
看过代码以后，你的是够有更好的办法呢？欢迎随时和大家分享，成都创新互联网站建设竭诚为大家服务。
- 上一篇文章：style和滤镜让网站更绚丽
下一篇文章：必知的CSS7个知识点
优化电话：028-86922220 13518219792 公司地址：成都市太升南路288号锦天国际A幢1002号
支持信箱：service@cdxwcx.com 版权所有：创新互联-供最优势的搜索引擎排名优化 蜀ICP备13010860号
创新互联成都专业网站优化推广：网站排名,成都优化排名,成都网站优化,成都关键词优化,百度排名优化,百度快照优化
