目标效果:做到网站的头部固定不动,不随滚动条的滑动而滑动
感受:今天给客户做一收藏品网站,还是客户要求这样,今天又学了一招,客户要求的效果的产品展示的页面始终头部因为头部有电话,好让客户联系
代码:
<
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