如何处理页面不能在浏览器顶部显示的问题

最新推荐文章于 2021-08-04 08:12:52 发布

weixin_30390075

最新推荐文章于 2021-08-04 08:12:52 发布

阅读量641

点赞数

文章标签： c# xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/zrprj/p/6235450.html

版权

在一个div中，如果加入一个图片对象，而不是背景图片，它下面还有一个div，这样可以把内容显示在顶部，如果是背景图像，就不能显示在顶部。下面的代码中div还要做调整。

下面加粗的代码说明了这种处理办法，而且需要微调，在各个浏览器中很兼容。

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" EnableTheming="true" %>

<!DOCTYPE html>

html

{

/*text-align:center; */

background-image:url("kcimages/bj.jpg")

}

</style>

*{margin:0;padding:0;list-style:none;}

img{border:0 none;}

.box{}

/*主导航菜单*/

#nav-menu{height:40px;width:873px;margin:0 auto;padding-top:50px}

#nav-menu .container{position:relative;overflow:visible; z-index:99;}

#nav-menu .menu{padding:0 0 0 14px;}

#nav-menu .menu li{position:relative;float:left;padding:0 8px 0 5px;display:inline;font-size:14px;}

#nav-menu .menu li h3{font-weight:normal;display:inline-block;float:left;}

#nav-menu .menu li a.xialaguang{margin-top:10px;display:inline-block;color:#FFF;height:30px;text-decoration:none;font-size:14px;width:100px;text-align:center;}

#nav-menu .menu li a.selected,#nav-menu .menu li a.navhover,#nav-menu .menu li a.xialaguang:hover{color:#1a529c;}

#nav-menu .menu li a.navhover, #nav-menu .menu li a.xialaguang:hover{}

#nav-menu .menu li a.xialaguang span{height:30px;line-height:25px;display:inline-block;font-weight:bold;}

#nav-menu .menu li a.selected span,#nav-menu .menu li a.navhover span,#nav-menu .menu li a.xialaguang:hover span{cursor:pointer;}

#nav-menu .menu li a.navhover span, #nav-menu .menu li a.xialaguang:hover span{width:100px;}

#nav-menu .menu ul.children{display:none;position:absolute;top:40px;left:3px;width:100px;background:#FFF;border:2px solid #1a529c;border-top:0;line-height:normal;}

#nav-menu .menu ul.children li{width:100px;padding:0px;display:inline-block;font-size:12px;border-top:1px solid #ccc;}

#nav-menu .menu ul.children li h3{display:block; width:100%;}

#nav-menu .menu ul.children li a{width:100%;height:16px;line-height:16px;overflow:hidden;padding:3px 0;display:block;color:#1a529c;text-align:center;

text-decoration:none; font-size:12px;}

#nav-menu .menu ul.children li a:hover{text-decoration:none;}

</style>

<asp:ContentPlaceHolder id="head" runat="server">

</asp:ContentPlaceHolder>

</head>

<body>

<div><img src="kcimages/logo.jpg" alt="" width="873px" height="165px" /></div>

<!-logo部分，菜单部分->

<div id="cddiv" style="width:873px;height:50px;margin-top:-155px;padding-top:8px "></div>

<li class="stmenu" style="width:140px;padding-right:10px"><h3 style="width:140px;padding-right:10px"><a href="kcfl.aspx?id=1" class="xialaguang" style="width:140px;padding-right:10px"><span style="width:140px;padding-right:10px">课程基地建设概况</span></a></h3></li>

<li class="stmenu" style="width:140px;padding-right:10px"><h3 style="width:140px;padding-right:10px"><a href="kcfl.aspx?id=2" class="xialaguang" style="width:140px;padding-right:10px"><span style="width:140px;padding-right:10px">教学成果研究和推广</span></a></h3></li>

<li class="stmenu" style="width:140px;padding-right:10px"><h3 style="width:140px;padding-right:10px"><a href="kcfl.aspx?id=3" class="xialaguang" style="width:140px;padding-right:10px"><span style="width:140px;padding-right:10px">个性化课程孵化温室</span></a></h3></li>

<li class="stmenu" style="width:100px;padding-right:10px"><h3 style="width:100px;padding-right:10px"><a href="kcfl.aspx?id=4" class="xialaguang" style="width:100px;padding-right:10px"><span style="width:100px;padding-right:10px">教师培训摇篮</span></a></h3></li>

</ul>

</div>

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>

</div>

$('#nav-menu .menu > li').hover(function () {

$(this).find('.children').animate({ opacity: 'show', height: 'show' }, 200);

$(this).find('.xialaguang').addClass('navhover');

}, function () {

$('.children').stop(true, true).hide();

$('.xialaguang').removeClass('navhover');

});

</script>

</form>

</body>

</html>

转载于:https://www.cnblogs.com/zrprj/p/6235450.html

weixin_30390075

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何处理页面不能在浏览器顶部显示的问题

在一个div中，如果加入一个图片对象，而不是背景图片，它下面还有一个div，这样可以把内容显示在顶部，如果是背景图像，就不能显示在顶部。下面的代码中div还要做调整。下面加粗的代码说明了这种处理办法，而且需要微调，在各个浏览器中很兼容。<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.m...
复制链接

扫一扫