4

我的项目目录
登录.css

body {
    font-family: "Trebuchet MS", Tahoma, Arial, Geneva, sans-serif, Helvetica, sans-serif;
    font-size: 13px;
    background: url(../images/bg.png) 0 64px repeat-x;
    margin: 0;
}

.wrapper {
    xmargin: 0 auto;
}

#border-top.h_green {
    background: url(../images/j_header_middle.png) repeat-x;
    height: 84px;
    xmargin: 0 auto;
}

#contentbox {
    width: 755px;
    margin: 0 auto;
    xbackground: #efefef;
    padding: 0px;
    position: relative;
}
#header-top {
    width: 960px;
    margin: 0 auto;
    xbackground: #efefef;
    padding: 0px;
    position: relative;
}

#menuheader {
    position: relative;
}

#contentbox p {
    padding: 0 0 10px 0;
}

#menubox {
    background: #fff;
    padding: 3px 10px;
    border-left: 1px solid #cccecc;
    border-right: 1px solid #cccecc;
    height: 15px;
}

#user_name {
    position: absolute;
    right: 0px;
    top: 0px;
    xbackground: url(../../../images/icons/user.png) no-repeat scroll 0 2px
        transparent;
    padding-left: 20px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #666;
}

.loginwrapper {
    width: 755px;
    margin: 0 auto;
}

.btn{ 
    background:url(../images/btn.jpg) repeat-x;
    height:28px;
    border:none;
    color:#fff;
    margin-top:20px;
}

.loginbox {
    background: url(../images/login_shadow.png) no-repeat;
    height: 310px;
    padding: 40px;
}

.rightsection {
    width: 85%;
    float: right;
    border-bottom: 1px solid #cccc;
}

.rightboxwrapper {
    float: left;
    width: 325px;
    padding-right: 30px;
    background: url(../images/loginleft.png) no-repeat center bottom;
    height: 262px;
}

.rightboxwrapper .loginheader h2 {
    color: #0588ab;
    font-size: 16px;
    font-family: trebuchet MS;
    margin: 0;
    text-align: left;
}

.loginform input {
    width: 170px;
}

.loginform input#btnsubmit {
    width: 80px !important;
    border: none;
}

.loginform {
    padding: 10px 0 0 45px;
    line-height: 35px;
    background: url(../images/lock.png) no-repeat right center;
    width: 335px;
}

.loginform td {
    color: #333333;
    font-family: trebuchet MS;
    font-size: 12px;
    padding: 0;
    margin: 0;
}

.copyright {
    width: 100%;
    text-align: right;
    padding: 5px 0px;
    font-size: 11px;;
    color: #0588ab;
    font-family: trebuchet MS;
}

.copyright p {
    padding-right: 15px !important;
}

索引.jsp

<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.metadata.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
    $("#commentForm1").validate({meta: "validate"});
                required: 'Enter this!'
            });
</script>
<style type="text/css">
form { width: 500px; }
form label { width: 250px; }
form label.error, 
form input.submit { color: red; font-size: 20px; }
</style>
</head>
<body>
<div class="wrapper">
<!--maindiv wrapper starts-->
    <div id="border-top" class="h_green">
      <!--header starts-->
      <div id="header-top">

        <div><img width="249" height="54" style="padding:15px 0 0 0px" src="images/companylogo.png"> </div>
      </div>    
    </div>
    <div id="contentbox">
<div style="background:none;border:none;" id="menubox">
  <div id="menuheader">
    <div id="message">
      <p style="text-align:center; padding-top:10px;" class="message_text"> </p>

    </div>
    <div id="user_name">
          </div>
  </div>
  </div>
<div class="loginbox">
<div style="width:100%!important;" class="rightsection">

    <form name="loginform" action="loginServlet" method="post" id="commentForm1">

        <div class="loginwrapper">

            <div class="rightboxwrapper">

            <table cellspacing="0" cellpadding="0" border="0" align="center" class="loginform">
           <tbody><tr class="loginheader">
            <th style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:35px;"> <h2>Login</h2></th>
          </tr>
          <tr>
            <td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;">User ID </td></tr>
            <tr>

            <td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;"><input type="text" id="username" name="username" class="{validate:{required:true, messages:{required:'*'}}}"></td>
          </tr>
          <tr>
             <td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;">Password</td></tr>
            <tr>
            <td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;"><input type="password" id="password" name="password" class="{validate:{required:true, messages:{required:'*'}}}"></td>
          </tr>

          <tr>
           <td colspan="2">
         <input value="Login" class="btn"  style="width:60px;" type="submit"/>
         <input value="Reset" class="btn" style="width:60px; margin-left:10px;" type="reset"/>
         </td>


         </tr>

        </tbody></table>
            </div>
            <div class="imagewrapper">
            <img width="323px" height="262px" src="images/loginimg.png">     

            </div>
         </div> <div style="clear:both; color:fff"></div>
    </form>
</div>
<div class="cleared"></div>

</div>

 <div id="footerwrapper"><!--Div for the Footer -->
    <div class="copyright">
        <p>Copyright &copy; 2012 BitsCrafters HRM All rights reserved.</p>
    </div><!--ended Footer Div-->
 </div>   
</div>
</div>

</body>
</html>

这段代码有什么问题？谁能帮我解决这个问题？出了点问题，因为当我通过 tomcat 运行它时，有时它可以工作，但有时它不起作用，某些图标和图像不显示。在浏览器中，我检查了查看源代码以检查 css 路径是否正确。

4

2 回答 2

5

遇到同样的问题，只需更正 href 路径：

<link rel="stylesheet" type="text/css" href="./css/login.css"/>
于 2013-06-25T15:20:23.437 回答
0

代码和 CSS 乍一看是正确的，所以错误在别处。

  1. 使用 Firebug 或“Ins​​pect Element”之类的工具来检查您的浏览器得到了什么。所有这些工具都有一个网络选项卡，您可以在其中查看浏览器请求的内容和获得的内容。寻找：

    1. 您是否看到所有您期望的 URL？
    2. 服务器能否提供所有这些服务（HTTP 状态 200）
    3. 检查文件的内容。它们是否包含您的期望？

  2. 检查错误控制台。你有任何 CSS / JavaScript 错误吗？

  3. 检查有问题的元素。它有正确的 CSS 样式吗？在 CSS 面板中，您看到正确的样式了吗？
于 2012-07-09T13:59:17.690 回答