网站设计中css样式使用技巧

2022-09-24    分类: 网站设计

实现一个层固定在底部,随滚动条滚动(1.
<body scroll="no" style="margin:0px">
<div style="height:expression(document.body.clientHeight);overflow:auto;">
<div style="height:2000px">称大页面</div>
</div>
<div style="height:100px;background-color:#AA;position:relative;top:-100px;z-index:-1">bottom</div>
</body>
实现一个层固定在底部,随滚动条滚动(2.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
......
<style type="text/css">
#fixed{position:fixed;top:5em;right:0;......}   针对IE7、Opera、Firefox一行搞定
</style>
IE6中利用容器对溢出内容的处理方式来实现的
<!--[if IE 6]>  利用IE独有的条件语句可以针对不同的IE版本精确设置,同时避免了这些代码被其他浏览器读到
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
fixed元素的绝对位置是相对于HTML元素来说,而滚动条是body元素的,这是设置right:17px的原因
</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css">
#fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
......
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>

分享标题:网站设计中css样式使用技巧
分享路径:https://www.cdcxhl.com/news37/197837.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有网站设计

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

商城网站建设