Question

我创建了一个简单的登录网页，其中包含CSS和背景图片等。单击LOGIN / SUBMIT时，它使用PHP访问数据库。

问题是当我使用WAMP中的Localhost进行测试/查看时。它显示表单和其他内容，如文本和段落..但用作登录页面边框和按钮的背景图像和图像不显示。它只显示损坏的图像图标。

当我在浏览器中打开php页面时，它显示了一切，它唯一不正确的是数据库中的查找，但这是可以理解的，因为PHP服务器在WAMP中。

如何在WAMP的Localhost中正确显示图像？

以下是我的登录页面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/cssLoginPage.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script>

$(document).ready(function() {  

    //Put in the DIV id you want to display
    launchWindow('#dialog1');

    //if close button is clicked
    $('.window #close').click(function () {
        $('#mask').hide();
        $('.window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });         


    $(window).resize(function () {

        var box = $('#boxes .window');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        box.css('top',  winH/2 - box.height()/2);
        box.css('left', winW/2 - box.width()/2);

    }); 

});

function launchWindow(id) {

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        $(id).css('top',  10);
        $(id).css('left', 780);
        /*      
        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height());
        $(id).css('left', winW/2-$(id).width()/2);
        */

        //transition effect
        $(id).fadeIn(2000); 


}

</script>


<title>Untitled Document</title>
</head>

<body>


<div id="boxes">

<!-- Start of Login Dialog -->  

<div id="dialog1" class="window">
  <div class="d-header">
  <form name="form1" method="post" action="loginproc.php">
    <input name="myusername"  type="text" id="myusername" value="username" onclick="this.value=''"/><br/>
    <input name="mypassword"  type="password" id="mypassword" value="Password" onclick="this.value=''"/>    
  </div>
  <div class="d-blank"></div>

  <div class="d-login"><input type="image" alt="Login" title="Login" src="./css/images/login-button.png"/></div>
  </form>
  </div>


  <!-- End of Login Dialog -->  
</div>
</div>
</body>
</html>

这是CSS：

@charset "utf-8";
/* CSS Document */

.loginTable { 
    width:300px; margin: 250px auto;
    box-shadow: 1px 1px 3px #000;
            }

body
{
background:url(../css/images/homepage.jpg)no-repeat top center;

}
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}

#boxes .window {
  position:fixed;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
}

#boxes #dialog1 {
  width:375px; 
  height:203px;
}

#dialog1 .d-header {
  background:url(../css/images/login-header.png) no-repeat 0 0 transparent; 
  width:375px; 
  height:150px;
}

#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}

#dialog1 .d-blank {
  float:left;
  background:url(../css/images/login-blank.png) no-repeat 0 0 transparent; 
  width:267px; 
  height:53px;
}

#dialog1 .d-login {
  float:left;
  width:108px; 
  height:53px;
}

#boxes #dialog2 {
  background:url(../css/images/notice.png) no-repeat 0 0 transparent; 
  width:326px; 
  height:229px;
  padding:50px 0 20px 25px;

Answer 1

图片代码中的src必须如下：

<div class="d-login">
    <input type="image" alt="Login" title="Login" 
           src="/css/images/login-button.png"/>
</div>

请注意，src属性不再具有.。另外，请确保图像位于www文件夹中。

在Localhost中进行WAMP PHP测试

1 个答案: