jsp页面整体无法居中问题的解决方案
2015-12-07 13:54
549 查看
index.jsp代码如下：
head.jsp代码如下：
head.css代码如下：
common.css代码如下：
运行起来后，head.jsp在index.jsp中无法居中，只是左面对齐浏览器。解决方案：
在index.jsp中将头部的
修改为
即可完美解决。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>首页面</title> <link rel="stylesheet" href="/xiaoneiwang/css/common.css" type="text/css"/> <link rel="stylesheet" href="/xiaoneiwang/css/index.css" type="text/css"/> </head> <body> <!-- 引入多页面 --> <jsp:include page="head.jsp"/> </body> </html>
head.jsp代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="/xiaoneiwang/css/head.css" type="text/css" />
<script type="text/javascript">
<!--
function changeBG(o){
o.style.backgroundColor="#5C75AA";
}
function changeBG2(o){
o.style.backgroundColor="";
}
-->
</script>
</head>
<body>
<div class="head1">
<img class="img1" src="/xiaoneiwang/images/front/top1.gif" />
<img class="img2" src="/xiaoneiwang/images/front/top2.jpg" />
<img src="/xiaoneiwang/images/front/xnw3.jpg" style="float: left;"/>
<ul class="navi1">
<li onmouseover="changeBG(this)" onmouseout="changeBG2(this)"><a class="anavi" href="/xiaoneinew/register.do?flag=regUI">注册</a></li>
<li onmouseover="changeBG(this)" onmouseout="changeBG2(this)"><a class="anavi" href="#">设为首页</a></li>
<li onmouseover="changeBG(this)" onmouseout="changeBG2(this)"><a class="anavi" href="#">加入收藏</a></li>
<li onmouseover="changeBG(this)" onmouseout="changeBG2(this)"><a class="anavi" href="#">帮助</a></li>
</ul>
</div>
</body>
</html>head.css代码如下：
.head1{
height:101px;
width:1005px;
background-color: #3B5888;
margin:0 auto;/*该句为了使居中*/
}
.head1 .img1{
width: 713px;
float: left;
}
.head1 .img2{
width: 280px;
float: left;
margin-left: 6px;
}
.navi1{
float:right;
}
.navi1 li{
float:left;
color:#C3CDDF;
height: 33px;
width: 55px;
line-height: 33px;
text-align: center;
}common.css代码如下：
body{
font-size: 12px;
margin: 0;
}运行起来后，head.jsp在index.jsp中无法居中，只是左面对齐浏览器。解决方案：
在index.jsp中将头部的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
修改为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
即可完美解决。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 