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

即可完美解決。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章