分层图像在PHP中混乱

时间：2016-08-27 00:43:38

标签： php html css image

我最近正在设计一个自定义构建网站的主页，我不得不在其上添加分层图像，网站是使用PHP构建的，但我选择在函数echo中使用html来分层图像，这完美地工作在我的电脑上很好，页面设计很完美但是当我在服务器上传文件时，这些照片现在变得杂乱无章。见b-sidebywale.com 

 `  <?
`enter code here`require_once("includes/configure.php");

$Page = (isset($_REQUEST['Page']) && $_REQUEST['Page'] !="")?$_REQUEST['Page']:"index";
require_once(DIR_FS_SITE_INCLUDES."include.php");
if($Page !="")
 {
    $Page = basename($Page);
    if(file_exists(DIR_FS_SITE_FRONT_SCRIPT.$Page.".php"))
        require_once(DIR_FS_SITE_FRONT_SCRIPT.$Page.".php");                        

 }

 if(@$_REQUEST['Meta'] !="false")
    require_once(DIR_FS_SITE_INCLUDES."site_meta.php");
 ?>
 <body <?=@$_REQUEST['Popup'] == "true"?"style='background:none;'":""?>  id="indexHomeBody">
 <?
 if(@$_REQUEST['Popup'] == "true")
 {
         if(file_exists(DIR_FS_SITE_FRONT_FORM.$Page.".php"))
                require_once(DIR_FS_SITE_FRONT_FORM.$Page.".php");                      

 }
 else 
 {
   require_once(DIR_FS_SITE_TEMPLATES.TEMPLATE_STYLE."/site_header.php");   
?>
<?

echo'

     <html>
    <head>
        <title>

        </title>
        <link rel="stylesheet" href="http://b-sidebywale.com/templates/default/css/layeredImages.css">
    </head>
    <body>
        <div id="layeredImages" position="inherit">


            <img id="img_1" src="http://www.b-sidebywale.com/images/def3bw.jpg" width="500" height="555" >  
            <img id="img_5" src="http://www.b-sidebywale.com/images/DZ1C7823-2.jpg" width="800" height="655">
            <img id="img_6" src="http://www.b-sidebywale.com/images/DZ1C7753.jpg" width="700" height="700">
            <img id="img_7" src="http://www.b-sidebywale.com/images/coach 7 bw.jpg" width="600" height="855">
            <img id="img_8" src="http://www.b-sidebywale.com/images/DZ1C6438.jpg" width="400" height="655">
            <img id="img_9" src="http://www.b-sidebywale.com/images/canilive 2 bw.jpg" width="500" height="755">
            <img id="img_10" src="http://www.b-sidebywale.com/images/DZ1C7665.jpg" width="900" height="755">
            <img id="img_11" src="http://www.b-sidebywale.com/images/DZ1C7438.jpg" width="800" height="655">
            <img id="img_12" src="http://www.b-sidebywale.com/images/coach 4 bw.jpg" width="400" height="700">
            <img id="img_13" src="http://www.b-sidebywale.com/images/coach 5 bw.jpg" width="500" height="755">
            <img id="img_14" src="http://www.b-sidebywale.com/images/B side shoot-30.jpg" width="500" height="755">
            <img id="img_15" src="http://www.b-sidebywale.com/images/bside bw.jpg" width="500" height="755">
            <img id="img_16" src="http://www.b-sidebywale.com/images/B side shoot-21.jpg" width="800" height="500">
            <img id="img_17" src="http://www.b-sidebywale.com/images/DZ1C7527.jpg" width="600" height="500">
            <img id="img_18" src="http://www.b-sidebywale.com/images/coach 6 bw.jpg" width="600" height="500">
            <img id="img_19" src="http://www.b-sidebywale.com/images/B side shoot-27.jpg" width="400" height="600">
            <img id="img_20" src="http://www.b-sidebywale.com/images/towel bw.jpg" width="550" height="500">
            <img id="img_21" src="http://www.b-sidebywale.com/images/B side shoot-7.jpg" width="800" height="500">
            <img id="img_22" src="http://www.b-sidebywale.com/images/coach 7 bw.jpg" width="400" height="600">
            <img id="img_23" src="http://www.b-sidebywale.com/images/DZ1C7958-2.jpg" width="500" height="755">
            <img id="img_24" src="http://www.b-sidebywale.com/images/B side shoot-17.jpg" width="400" height="500">
            <img id="img_25" src="http://www.b-sidebywale.com/images/canilive bw.jpg" width="500" height="700">
            <img id="img_26" src="http://www.b-sidebywale.com/images/DZ1C6906.jpg" width="800" height="455">
            <img id="img_27" src="http://www.b-sidebywale.com/images/vh bw.jpg" width="500" height="655">
            <img id="img_28" src="http://www.b-sidebywale.com/images/bside 2 bw.jpg" width="600" height="555">
            <img id="img_29" src="http://www.b-sidebywale.com/images/coach 3 bw.jpg" width="500" height="755">
            <img id="img_30" src="http://www.b-sidebywale.com/images/def sweat bw.jpg" width="600" height="755">
            <img id="img_31" src="http://www.b-sidebywale.com/images/DZ1C7364.jpg" width="350" height="500">
            <img id="img_32" src="http://www.b-sidebywale.com/images/B side shoot-15.jpg" width="800" height="500">

            <img id="img_33" src="http://www.b-sidebywale.com/images/def bw.jpg" width="400" height="400">
            <img id="img_34" src="http://www.b-sidebywale.com/images/towel bw.jpg" width="600" height="455">
            <img id="img_35" src="http://www.b-sidebywale.com/images/scoach 1 bw.jpg" width="500" height="655">



        </div>
        </body>
</html>';?>

<? 
 require_once(DIR_FS_SITE_TEMPLATES.TEMPLATE_STYLE."/site_footer.php"); 
}?>
<?if(function_exists("SKExtraFooter"))SKExtraFooter();?>
<?
$sk_timeend = explode(' ', microtime() );
$sk_timeend = $sk_timeend[1] + $sk_timeend[0];
echo "<!--".number_format($sk_timeend-$sk_timestart,3)."-->";   
?></body>
</html>
<?//@mysql_close();?>
`

CSS 

#img_1 {

            position: absolute;
            left: 120px;
            top: inherit;
            z-index: -1; 
    animation-fill-mode: forwards;  
        }
        #img_2 {
            position: absolute;
            left: 75px;
            top: 550px;
            z-index: +1;
        }
        #img_3 {
            position: absolute
                ;
            left: 750px;
            top: 400;
            z-index: 3;
        }
           #img_4 {
            position: absolute
                ;
            left: 470px;
            top: 700;
            z-index:+4;
        }#img_5 {
            position: absolute
                ;
            left: 550px;
            top: 500;
            z-index: +4;
        } #img_6 {
            position: absolute
                ;
            left: 20px;
            top: 650;
            z-index: -1;
        }#img_7 {
            position: absolute;
            left: 750px;
            top: 1250;
            z-index: 4;
        }#img_8 {
            position: absolute;
            left: 50px;
            top: 1400;
            z-index: 5;
        }
        #img_9 {
            position: absolute;
            left: 450px;
            top: 1500;
            z-index: 4;
        }#img_10{
            position: absolute;
            left: 50px;
            top: 2600;
            z-index: 4;
        }

       #img_11 {
            position: absolute;
            left: 550px;
            top: 2200;
            z-index: +3;
        }#img_12 {
            position: absolute;
            left: 50px;
            top: 3350;
            z-index: 3;
        }
        #img_13 {
           position: absolute;
            left: 400px;
            top: 3800;
            z-index: 2;
        }
        #img_14 {
              position: absolute;
            left: 800px;
            top: 3200;
            z-index: +1;
        }#img_15 {
            position: absolute;
            left: 850px;
            top: 4100;
            z-index: 4;
        }#img_16 {
           position: absolute;
            left: 450px;
            top: 4800;
            z-index: 5;
        }#img_17 {
             position: absolute;
            left: 50px;
            top: 5000;
            z-index:5;
        };
        #img_18 {
              position: absolute;
            left: 600px;
            top: 5400;
            z-index: 5;
        } #img_19 {
              position: absolute;
            left: 100px;
            top: 5450;
            z-index: +5;
        }




        #img_20 {
            position: absolute;
            left: 250px;
            top: 5950px;
            z-index: 5;
        }
        #img_21 {
            position: absolute;
            left: 550px;
            top: 6100;
            z-index: 4;
        }
        #img_22 {
            position: absolute;
            left: 900px;
            top: 6600;
            z-index: 3;
        }
        #img_23 {
            position: absolute;
            left: 100px;
            top: 6500;
            z-index: 3;
        }
        #img_24 {
            position: absolute;
            left: 100px;
            top: 7350;
            z-index: 5;
        }

        #img_25 {
            position: absolute;
            left: 850px;
            top: 7200px;
            z-index: 5;
        }
        #img_26 {
            position: absolute;
            left: 240px;
            top: 7800px;
            z-index: 4;
        }
        #img_27 {
            position: absolute;
            left: 850px;
            top: 8050px;
            z-index: 5;
        }
        #img_28 {
            position: absolute;
            left: 75px;
            top: 8150;
            z-index: 5;
        }
        #img_29 {
            position: absolute;
            left: 550px;
            top: 8600;
            z-index: 3;
        }
        #img_30 {
            position: absolute;
            left: 75px;
            top:8900;
            z-index: -1;
        }
        #img_32 {
            position: absolute;
            left: 150px;
            top: 9500;
            z-index: 5;
        }#img_31 {
            position: absolute;
            left: 850px;
            top: 9200;
            z-index: -1;
        }
      #img_33 {
            position: absolute;
            left: 850px;
            top: 9800;
            z-index: 5;
        }#img_34 {
            position: absolute;
            left: 500px;
            top: 10200;
            z-index: 6;
        }#img_35 {
            position: absolute;
            left: 50px;
            top: 10100;
            z-index: 5;
        }`

1 个答案:

答案 0 :(得分：0)

您错过了将px添加到图片的top属性中！如下面的ss。

相关问题
最新问题