浮动浏览器
① 不同浏览器显示CSS浮动的方式
ie9和opera的解析是正确的。
.one元素float:left后,后面.two元素也正常跟上来了,但是因为它只有200x200,被.one元素盖住了(就像一张图片浮动在一个文本内容中一样,会将文字挤开形成环绕)。
因为你写的代码里,没有声明doctype,所以firefox和chrome将你的文档以非标准的quirks mode来解析代码,才会显示成不规范的样子。什么是quirks mode 可以参考一下:http://www.quirksmode.org/css/quirksmode.html
标准的做法:
1、在文档最上方声明:<!doctype html>
2、修改css , .two{float:left;}
3、要记得在.two后面增加一个clear元素
② JS 让div始终浮动在浏览器底部
body{margin:0;padding:010px010px;height:100%;overflow:auto;background:#333;font-size:12px;}
#wrap{display:block;bottom:0px;right:1px!important;right:18px;width:200px;line-height:30px;position:fixed;border:1pxsolid#fff;text-align:center;color:#fff;background:#000;}
*html{overflow-x:auto;overflow-y:auto;}
*html#wrap{position:absolute;}
上面是样式部分
<divstyle="height:3986px;"></div>
<divid="wrap">我是不会动的,只有这个地方是属于我的,在你没有更改我的位置之前。<br>
<ahref="http://www.CsrCode.cn">CsrCode.CN</a>丨<ahref="http://www.CsrCode.cn">芯晴网页特效</a>丨<ahref="http://www.CsrCode.cn">seo优化</a>
这是HTML部分
开玩笑!你直接复制过去!
页面的其他部分有没有设置定位!有的话删除!
自己看有没有在。看下自己页面其他地方有没设置定位。有的话删了
③ 网页中如何加入悬浮窗口能一直悬浮在浏览器某个地方的。
1、首先创建一个名为“topwindows.html”的网页文件,其中的内容将被展示主页浮动窗口中。
2、网页浮动窗口对应的部分代码如下所示:
<html>
<style>
.img_wd{
font-size:30;padding-top:20px;
text-align:left;padding-left:70px;line-height:40px;
background:url(110.jpg) top center no-repeat;
width:252px;height:127px;line-heiht:10px;
text-align:center;
font-family:"微软雅黑,仿宋,楷体,黑体"
color: #fafafa;
text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
}
</style>
<body>
<div class="img_wd" style="">
青春就是这么任性!<Br>
Younger GOOD
</div>
</body>
</html>
3、接着将如图所示的代码添加到主页<Body>和</Body>之间:
其中标签"fdck”中的属性SRC指向浮动窗口的网页地址。
<div id="img" style="position: absolute;visibility :hidden;padding:0px;" onmouseover="clearInterval(interval)" onmouseout="interval = setInterval('changePos()', delay)" align="middle">
<span style="CURSOR:hand;color:red;font-weight:bold;font-align:center;font-size:12px;padding-left:0px;" onclick="clearInterval(interval);fdck.style.visibility = 'hidden';img.style.visibility = 'hidden';">隐藏</span>
<div id="fdck" style="width:100%; height:100%; font-align:center; visibility:visible;border:0px; background-color: no">
<iframe width=320 height=150 src="topWindows.html" frameborder=no scrolling="no">
</iframe>
</div>
</div>
4、接下来需要添加浮动窗口随时运行的行为,对应代码如下:
<script language=javascript>
var xPos = 20;
var yPos = document.body.clientHeight;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
if (yon) {yPos = yPos + step;}
else {yPos = yPos - step;}
if (yPos < 0) {yon = 1;yPos = 0;}
if (yPos >= (height - Hoffset)) {yon = 0;
yPos = (height - Hoffset);}
if (xon) {xPos = xPos + step;}
else {xPos = xPos - step;}
if (xPos < 0) {xon = 1;xPos = 0;}
if (xPos >= (width - Woffset)) {xon = 0;xPos = (width - Woffset);}
}
function start() {
img.style.visibility = "visible";
interval = setInterval('changePos()', delay);}
start();
</script>
5、在此需要说明一点,需要将以上所有代码(包括JS脚本)全部放置在<body>和</body>之间。
6、最后查看一下浮动窗口的效果,会发现浮动窗口在网页中不断的移动,当鼠标悬停其上时会停止移动,点击“隐藏”按钮将自动隐藏悬浮窗口。
④ jQuery 怎么让浮动div随着浏览器窗口滚动而滚动
<style type="text/css">
div {position: fixed}
<style>
加在 head 里。。
⑤ 浏览器窗口变化,浮动元素往下移,怎么解决
这是支持者的优势,说:
傲游浏览器[傲游浏览器]是一款基于IE内核的,多功能,个性化多页面浏览器,允许
打开更多的在同一个窗口。页面上,对系统资源的浏览器,以减少占用率,提高网上冲浪的效率,同时它又能有效防止恶意插件,阻止各种弹出式,浮动式广告,加强网上浏览的安全性。傲游浏览器支持各种外挂工具及IE插件,使你可以把所有的傲游浏览器的在线资源的充分利用,尽情享受网上冲浪的乐趣。
***公平的,所有这些浏览器,除了IE浏览器存在的唯一希望打破微软的垄断罢了。且不说什么优势。微软的IE浏览器只是最常见的,很多病毒插件的IE浏览器而已。如果你真的想节省系统资源,他们可以使用迷你浏览器,浏览器,只有几百K。但很多人真正使用的时候,各种病毒,插件也将保持在一起。
⑥ html中浮动窗口怎么做啊就是一个小窗口飘在在页面上那种
浮动窗口可以用js实现。带关闭窗口的简单全屏浮动代码如下:
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>带关闭按钮的浮动窗口</title>
</head>
<styletype="text/css">
#fdck{border:1pxsolid#c0c0c0;margin:0auto;padding:5px;background:#f0f0f0}
</style>
<body>
<divid="img"style="position:absolute;left:311;top:815;visibility:hidden;"onmouseover="clearInterval(interval)"onmouseout="interval=setInterval('changePos()',delay)"align="middle">
<spanstyle="CURSOR:hand;color:red;font-weight:bold;font-size:12px"onclick="clearInterval(interval);img.style.visibility='hidden'">关闭</span>
<divid="fdck">
浮动测试TEST
</div>
</div>
<scriptlanguage=javascript>
varxPos=20;
varyPos=document.body.clientHeight;
varstep=1;
vardelay=30;
varheight=0;
varHoffset=0;
varWoffset=0;
varyon=0;
varxon=0;
varpause=true;
varinterval;
img.style.top=yPos;
functionchangePos(){
width=document.body.clientWidth;
height=document.body.clientHeight;
Hoffset=img.offsetHeight;
Woffset=img.offsetWidth;
img.style.left=xPos+document.body.scrollLeft;
img.style.top=yPos+document.body.scrollTop;
if(yon){
yPos=yPos+step;
}
else{
yPos=yPos-step;
}
if(yPos<0){
yon=1;
yPos=0;
}
if(yPos>=(height-Hoffset)){
yon=0;
yPos=(height-Hoffset);
}
if(xon){
xPos=xPos+step;
}
else{
xPos=xPos-step;
}
if(xPos<0){
xon=1;
xPos=0;
}
if(xPos>=(width-Woffset)){
xon=0;
xPos=(width-Woffset);
}
}
functionstart(){
img.style.visibility="visible";
interval=setInterval('changePos()',delay);
}
start();
</script>
</body>
</html>
粘贴到本地一个记事本,保存为HTML格式打开即可看见。
如果只是固定在一个位置不动,可以在div的style设置‘position:fixed;’即可。
⑦ css/div做的浮动网页 当左右浮动的时候怎么当浏览器的窗口缩小的时候浮动的就往下跑了
最简单的方法是在body标签里设置min-width样式即可,如
<body style="min-width: 1900px;">1900px最好设置为你操作电脑的分辨率</body>
⑧ 一个在浏览器底部固定浮动的DIV怎么实现
HTML code<!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>
<title>testing</title>
<style type="text/css">
.shape{width:200px; height: 140px; position:fixed!important; position:absolute; right:5px; bottom:5px!important; bottom:auto; top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop+(documentElement.clientHeight - this.clientHeight):document.body.scrollTop+(document.body.clientHeight - this.clientHeight));}
.shape .con{width:200px; height:100px; background: url(http://static.l99.com/skin/default/images/versus/pk_vote_record.gif) no-repeat;}
.shape .btn{width:200px; height:40px; background: url(http://static.l99.com/skin/default/images/versus/pk_vote_record.gif) no-repeat 0 -100px;}
.height{height:1300px;}
</style>
</head>
<body>
<div class="shape">
<div class="con"></div>
<div class="btn"></div>
</div>
<div class="height">
</div>
</body>
</html>
⑨ css+div 布局的时候使用浮动后改变浏览器大小会发生变形
最外层不要浮动 或者说 浮动层外面套一个固定宽度的DIV 并且margin:auto