做了个登录页,开始底部有空白,加了个js高度控制,后来问题是在兼容模式下图片各种错位,求高手帮忙解决啊,我初学不太熟练,或者帮我改成div+css的,谢谢各位,急用非兼容模式是这样:
显示正常
兼容模式下就成了这样子:下面是代码:----------------------分割线-------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="LOGIN.login" %><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="<%=CssPath%>base.css" rel="stylesheet" type="text/css" />
<link href="<%=HwuiPath%>themes/blue/css/hwui-all.css" rel="stylesheet" />
<script src="<%=JSPath%>jquery-1.7.2.min.js"></script>
<script src="<%=HwuiPath%>hwui.min.js"></script>
<title>登录页</title>
<style type="text/css">
.userInfo
{
color: #275a79;
font-size: 12px;
} .banquan
{
color: #275a79;
height: 30px;
font-size: 12px;
} .user
{
width: 130px;
height: 18px;
border: solid 1px #62a5d9;
font-size: 12px;
color: #275a79;
line-height: 18px;
}
.top
{
background-color: #cee6f5;
} .down
{
background-color: #62a5d9;
} .ler
{
height: 608px;
}
body
{
margin: 0px;
overflow: hidden;
height: 640px;
}
#tabid
{
height: 640px;
}
</style>
</head>
<body>
<form id="form1" width="120%" height="120%" style="margin:0px;" runat="server" autocomplete="off">
<table id="tabid" width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td class="top"> </td>
</tr>
<tr>
<td class="ler" background="<%=ImagePath%>login_03.gif">
<table width="862" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td height="266" background="<%=ImagePath%>login_04.gif"> </td>
</tr>
<tr>
<td height="95">
<table width="100%" style="height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="424" height="95" background="<%=ImagePath%>login_06.gif"> </td>
<td width="183" background="<%=ImagePath%>login_07.gif">
<table width="100%" height="95" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="21%" height="30">
<div align="center"><span class="userInfo">用户</span></div>
</td>
<td width="79%">
<input type="text" id="txtUserName" class="user" /></td>
</tr>
<tr>
<td height="30">
<div align="center"><span class="userInfo">密码</span></div>
</td>
<td>
<input type="password" id="txtPsd" class="user" /></td>
</tr>
<tr>
<td height="35"> </td>
<td align="center">
<img id="btnQd" src="<%=ImagePath%>dl.gif" width="41" height="21" border="0" style="cursor: pointer; margin-left: -10px;" onclick="denglu()" />
<img src="<%=ImagePath%>cz.gif" style="cursor: pointer;" width="41" height="21" border="0" onclick="reset()" />
</td>
</tr>
</table>
</td>
<td width="255" height="95" background="<%=ImagePath%>login_08.gif"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="247" valign="top" background="<%=ImagePath%>login_09.gif">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="22%" height="30"> </td>
<td width="56%"> </td>
<td width="22%"> </td>
</tr>
<tr>
<td> </td>
<td class="banquan" align="center">版权:鲁明公司 技术支持:<a href="http://www.hanweikeji.com" target="_blank">东营汉威</a>
</td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="down"> </td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
$(function () {
//高度设置
setH(); //高度控制
$(window).resize(function () {
setH();
})
})
function setH() {
$("#tabid").height($(window).height());
}
//登录验证用户名密码是否为空
function denglu() {
var un = $.trim($("#txtUserName").val());
var pw = $.trim($("#txtPsd").val());
if (un == "") {
$.hwDialog.warn('用户名不能为空!', function (type) {
$("#txtUserName").focus();
});
return;
}
if (pw == "") {
$.hwDialog.warn('密码不能为空!', function (type) {
$("#txtPsd").focus();
});
return;
}
//alert("login.aspx?act=loginSys&r" + Math.random()+"&loginID="+ escape(un)+"&loginPSD="+escape(pw))
$.get("login.aspx?act=loginSys&r" + Math.random(), { loginID: escape(un), loginPSD: escape(pw) }, function (data) {
//debugger;
if (data)
$.hwDialog.error(data);
else
location.href = 'default.aspx';
})
}
//回车登录
document.onkeydown = function (evt) {
var evt = window.event ? window.event : evt;
if (evt.keyCode == 13) {
$("#btnQd").trigger("click");
}
}
</script>
</html>
---------------------------------继续分割线---------------------------------------
下面是所有的切图:
cz.gifdl.giflogin_03.giflogin_04.giflogin_06.giflogin_07.giflogin_08.giflogin_09.gif
登录divcss
显示正常
兼容模式下就成了这样子:下面是代码:----------------------分割线-------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="LOGIN.login" %><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="<%=CssPath%>base.css" rel="stylesheet" type="text/css" />
<link href="<%=HwuiPath%>themes/blue/css/hwui-all.css" rel="stylesheet" />
<script src="<%=JSPath%>jquery-1.7.2.min.js"></script>
<script src="<%=HwuiPath%>hwui.min.js"></script>
<title>登录页</title>
<style type="text/css">
.userInfo
{
color: #275a79;
font-size: 12px;
} .banquan
{
color: #275a79;
height: 30px;
font-size: 12px;
} .user
{
width: 130px;
height: 18px;
border: solid 1px #62a5d9;
font-size: 12px;
color: #275a79;
line-height: 18px;
}
.top
{
background-color: #cee6f5;
} .down
{
background-color: #62a5d9;
} .ler
{
height: 608px;
}
body
{
margin: 0px;
overflow: hidden;
height: 640px;
}
#tabid
{
height: 640px;
}
</style>
</head>
<body>
<form id="form1" width="120%" height="120%" style="margin:0px;" runat="server" autocomplete="off">
<table id="tabid" width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td class="top"> </td>
</tr>
<tr>
<td class="ler" background="<%=ImagePath%>login_03.gif">
<table width="862" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td height="266" background="<%=ImagePath%>login_04.gif"> </td>
</tr>
<tr>
<td height="95">
<table width="100%" style="height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="424" height="95" background="<%=ImagePath%>login_06.gif"> </td>
<td width="183" background="<%=ImagePath%>login_07.gif">
<table width="100%" height="95" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="21%" height="30">
<div align="center"><span class="userInfo">用户</span></div>
</td>
<td width="79%">
<input type="text" id="txtUserName" class="user" /></td>
</tr>
<tr>
<td height="30">
<div align="center"><span class="userInfo">密码</span></div>
</td>
<td>
<input type="password" id="txtPsd" class="user" /></td>
</tr>
<tr>
<td height="35"> </td>
<td align="center">
<img id="btnQd" src="<%=ImagePath%>dl.gif" width="41" height="21" border="0" style="cursor: pointer; margin-left: -10px;" onclick="denglu()" />
<img src="<%=ImagePath%>cz.gif" style="cursor: pointer;" width="41" height="21" border="0" onclick="reset()" />
</td>
</tr>
</table>
</td>
<td width="255" height="95" background="<%=ImagePath%>login_08.gif"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="247" valign="top" background="<%=ImagePath%>login_09.gif">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="22%" height="30"> </td>
<td width="56%"> </td>
<td width="22%"> </td>
</tr>
<tr>
<td> </td>
<td class="banquan" align="center">版权:鲁明公司 技术支持:<a href="http://www.hanweikeji.com" target="_blank">东营汉威</a>
</td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="down"> </td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
$(function () {
//高度设置
setH(); //高度控制
$(window).resize(function () {
setH();
})
})
function setH() {
$("#tabid").height($(window).height());
}
//登录验证用户名密码是否为空
function denglu() {
var un = $.trim($("#txtUserName").val());
var pw = $.trim($("#txtPsd").val());
if (un == "") {
$.hwDialog.warn('用户名不能为空!', function (type) {
$("#txtUserName").focus();
});
return;
}
if (pw == "") {
$.hwDialog.warn('密码不能为空!', function (type) {
$("#txtPsd").focus();
});
return;
}
//alert("login.aspx?act=loginSys&r" + Math.random()+"&loginID="+ escape(un)+"&loginPSD="+escape(pw))
$.get("login.aspx?act=loginSys&r" + Math.random(), { loginID: escape(un), loginPSD: escape(pw) }, function (data) {
//debugger;
if (data)
$.hwDialog.error(data);
else
location.href = 'default.aspx';
})
}
//回车登录
document.onkeydown = function (evt) {
var evt = window.event ? window.event : evt;
if (evt.keyCode == 13) {
$("#btnQd").trigger("click");
}
}
</script>
</html>
---------------------------------继续分割线---------------------------------------
下面是所有的切图:
cz.gifdl.giflogin_03.giflogin_04.giflogin_06.giflogin_07.giflogin_08.giflogin_09.gif
登录divcss
解决方案 »
- 请问各位,为什么我把default.aspx切换到《设计》时会出现“正在准备安装”?这是怎么回事啊?
- 使用服务器控件后Jquery找不到img了
- 来个懂FTP和上传后出现问题的解决下问题
- 求一正则表达式
- 请问各位朋友一个ASP.NET中大文本存储问题
- 安装了Microsoft Visual Studio .NET 2003后,再安装Microsoft Visual Studio 6.0提示有版本冲突,请问能否再安装Microsoft Visual Studio
- 请教数据显示问题,希望下班前结帖
- 安装了vs2005怎么还不能用asp.net2.0
- 请问高手:有否工程背景的session实例
- 又搞不明白了!asp.net真是让我又爱又狠。
- MVC3 DropDownListFor这样绑定如何实现
- 怎么用标签<a><a/>实现数据的增删查改
login_03.gif和login_09.gif所在单元格的样式有没有什么差异,如果有差异调整过来,因为现在是这两幅图在纵向对齐上,有不同。我看你03所在的那个单元格好像有个class="ler"的样式,可以细分析一下。
美工神马的不管这事啊,伤不起
1、 <td class="ler" background="login_03.gif" valign="top" >
2、 function setH() {
var curHeight = $(window).height();
var trs = $("#tabid .ler").parent().siblings();
var t_d_height = (curHeight - $("#tabid .ler").height()) / 2;
trs.eq(0).find("td").height(t_d_height);
trs.eq(1).find("td").height(t_d_height);
}
3、body
{
margin: 0px;
overflow: hidden;
/*height: 640px;*/
}
美工神马的不管这事啊,伤不起
1、 <td class="ler" background="login_03.gif" valign="top" >
2、 function setH() {
var curHeight = $(window).height();
var trs = $("#tabid .ler").parent().siblings();
var t_d_height = (curHeight - $("#tabid .ler").height()) / 2;
trs.eq(0).find("td").height(t_d_height);
trs.eq(1).find("td").height(t_d_height);
}
3、body
{
margin: 0px;
overflow: hidden;
/*height: 640px;*/
}
按照你的方法果然成功了,三克油啊,万分感谢