固定在网页右侧的浮动层实现代码
来源:易贤网 阅读:3039 次 日期:2014-05-15 21:12:27
温馨提示:易贤网小编为您整理了“固定在网页右侧的浮动层实现代码”,方便广大网友查阅!

在使用dreamweaver或者frontpage来制作HTML网页时,我们有可能会遇到这样的问题:在软件中好好的网页一旦放到浏览器中,就会在网页的下方莫名其妙的多出来或多或少的空白。那么这种空白又要怎么去消除呢?

起先我以为只要在网页的代码中加一个CSS来约束一下网页的高度就行了,事实证明这样是行不通的。

原因:

首先我们要知道,用软件来写网页的话,大多数都是通过图形化的界面来“堆”网页,这样堆网页的话,在创建层或者表格的时候,软件给层或者表格定义的高度往往会超出我们所想要的高度,但是在软件上是看不出来的;然而,当我们在浏览器中打开网页的时候,我们就会发现,软件中不存在的空白就会在浏览器中显示出来。

而不能仅仅通过添加一个html{height:XXpx;}来约束网页的高度,是因为在网页中,嵌套在元素内部的其他元素的特性会具有更高的优先级。例如:你如果在同一个网页中有如下代码:body{font-size:10px;}p{font-size:9px;}那么该网页<p>元素中字体大小就应该是9px而不是10px了。由于这个规则的存在,网页中层的总高度大于html{height:XXpx;}中XX的值时,html{height:XXpx;}也就自然没有作用了。

解决方式:

像这种用软件写的网页代码,通过去寻找CSS中关于层或者表格高度的定义,然后修改高度的值,就能去掉网页中不必要的空白了。

代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.***.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.***.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>无标题文档</title>

<styletype="text/css">

body

{

margin:0px;

padding:0px;

margin-top:60px;

margin-bottom:60px;

}

#div_nav_zone_right

{

position:absolute;

float:right;

z-index:3;

width:120px;

height:100px;

right:0px;

top:332px;

background-color:#999;

}

#div_nav_zone_right_bottom

{

position:absolute;

float:right;

z-index:3;

width:120px;

height:100px;

right:0px;

top:532px;

background-color:#CCC;

}

#div_ul

{

position:fixed;

height:50px;

}

ul,li

{

margin:0px;

}

li

{

list-style:none;

}

</style>

<scripttype="text/javascript"src="js/jquery.js"></script>

<scripttype="text/javascript">

$(function()

{

moveDiv();//页面初始化执行

$(window).scroll(function(){

moveDiv();

moveRightBottomDiv();

});

});

//右侧居中

functionmoveDiv()

{

varscrollTop=$(document).scrollTop();//滚动条上端隐藏的高度

varclientHeight=$(window).height();//网页内容区高度

//设置位置为

varhei=$("#div_nav_zone_right").css("height");

hei=hei.replace("px","");

varnewPosY=scrollTop+(clientHeight-hei)/2;

$("#div_nav_zone_right").css("top",newPosY+"px");

}

//右侧居下100像素

functionmoveRightBottomDiv()

{

varscrollTop=$(document).scrollTop();//滚动条上端隐藏的高度

varclientHeight=$(window).height();//网页内容区高度

//设置位置为

varhei=$("#div_nav_zone_right_bottom").css("height");

hei=hei.replace("px","");

varnewPosY=clientHeight+scrollTop-hei-100;

$("#div_nav_zone_right_bottom").css("top",newPosY+"px");

}

</script>

</head>

<body>

1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>

<p>sd</p>

<p>f</p>

<p></p>

<p>ads</p>

<p>f</p>

<p>ads</p>

<p>

<inputtype="button"name="button"id="button"value="提交"onclick="clk()"/>

</p>

<p>ad</p>

<p>sfAS

D

as

d

SA

D

</p>

<p></p>

<p>ads</p>

<p>f</p>

<p>ads</p>

sad

SA

D

a

d

A

D

a

<divid="div_nav_zone_right">

<ul>

<li>边栏菜单1</li>

<li>边栏菜单2</li>

<li>边栏菜单3</li>

<li>边栏菜单4</li>

</ul>

</div>

<divid="div_nav_zone_right_bottom">

<ul>

<li>边栏菜单1</li>

<li>边栏菜单2</li>

<li>边栏菜单3</li>

<li>边栏菜单4</li>

</ul>

</div>

</body>

</html>

更多信息请查看IT技术专栏

更多信息请查看网页制作
易贤网手机网站地址:固定在网页右侧的浮动层实现代码
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标