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">

即可完美解决。

posted on 2015-12-07 13:54  码农康康  阅读(683)  评论(0编辑  收藏  举报

导航