目标效果:做到网站的头部固定不动,不随滚动条的滑动而滑动
感受:今天给客户做一收藏品网站,还是客户要求这样,今天又学了一招,客户要求的效果的产品展示的页面始终头部因为头部有电话,好让客户联系
代码:
<html>
<head>
<title>佳一典藏</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<!--定义头部固定-->
<style type="text/css">
<!--
*{margin:0px;padding:0px;}
html,body{height:100%;width:100%;overflow:hidden;}
.xx {position:absolute;left:0px;top:0px;z-index:1;width:100%;border-bottom: solid #d0dbe7; margin-left:; height:;}
.yy{ position:relative;width:100%;height:100%;overflow-x:auto;overflow-y:scroll; text-align:center}
-->
</style>
</head>
<!--#include file="top1.asp"-->
</head>
<body class="">
<div class="yy">
<!--头部固定结束-->
<head>
<title>佳一典藏</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<!--定义头部固定-->
<style type="text/css">
<!--
*{margin:0px;padding:0px;}
html,body{height:100%;width:100%;overflow:hidden;}
.xx {position:absolute;left:0px;top:0px;z-index:1;width:100%;border-bottom: solid #d0dbe7; margin-left:; height:;}
.yy{ position:relative;width:100%;height:100%;overflow-x:auto;overflow-y:scroll; text-align:center}
-->
</style>
</head>
<!--#include file="top1.asp"-->
</head>
<body class="">
<div class="yy">
<!--头部固定结束-->
注意:网页中原来的调用标记如<!--#include file="top1.asp"--> 记得删除,要不无法显示
效果演示:
参考资料:秦时明月
本文转自 yeybz 51CTO博客,原文链接:http://blog.51cto.com/hmlwl/1166994