1

我用php尝试了figcaption的实验，但我发现了直到现在无法解决的错误..

figcaption在没有php的情况下一直运行流畅，但是结合php出现了一些错误

我的 php ：

<h1>Article</h1> 
    <figure>
    <?
    include("koneksi.php");

        $lihat=mysql_query("SELECT * FROM papi ");
        $j=0;
        while($datax = mysql_fetch_array($lihat)){
        echo "<img src="\images/$datax[3]\"><figcaption>
        <h3>$datax[1]</h3><p>$datax[2]</p>";
        } 
       $j++;
       ?>
    </figure>

我的 CSS ：

    body {
   width:400px;
   margin:50px auto;
   font-family:sans-serif;
}

img {
   width:100%;
}

figure {
   margin:0;
   position:relative;
   border:5px solid white;

   -webkit-box-shadow:0 0 4px rgba(0,0,0,.3);
   -moz-box-shadow:0 0 4px rgba(0,0,0,.3);
   box-shadow:0 0 4px rgba(0,0,0,.3);
   display:block;
   cursor:pointer;
   overflow:hidden;
}

figure:hover figcaption {
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter:alpha(opacity=100);
   opacity:1;

   -webkit-transform:rotate(0);
   -moz-transform:rotate(0);
   -o-transform:rotate(0);
   -ms-transform:rotate(0);
   transform:rotate(0);
   top:0;
}

figcaption {
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter:alpha(opacity=0);
   opacity:0;
   position:absolute;
   height:100%;
   width:100%;
   top:-100%;
   background:rgba(0,0,0,.4);
   color:white;

   -webkit-transition:all .4s ease-in;
   -moz-transition:all .4s ease-in;
   -o-transition:all .4s ease-in;
   -ms-transition:all .4s ease-in;
   transition:all .4s ease-in;

   -webkit-transition-delay:.5s;
   -moz-transition-delay:.5s;
   -o-transition-delay:.5s;
   -ms-transition-delay:.5s;
   transition-delay:.5s;

   -webkit-transform:rotate(360deg);
   -moz-transform:rotate(360deg);
   -o-transform:rotate(360deg);
   -ms-transform:rotate(360deg);
   transform:rotate(360deg);
}

figure img {
   -webkit-transition:all 1.5s;
   -moz-transition:all 1.5s;
   -o-transition:all 1.5s;
   -ms-transition:all 1.5s;
   transition:all 1.5s;
}

figure:hover img {
   -webkit-transform:scale(1.1);
   -moz-transform:scale(1.1);
   -o-transform:scale(1.1);
   -ms-transform:scale(1.1);
   transform:scale(1.1);
}

figcaption h3,figcaption p {
   padding:10px 20px;
   margin-bottom:0;
   margin-top:0;
   position:relative;
   left:100%;

   -webkit-transition:all .4s;
   -moz-transition:all .4s;
   -o-transition:all .4s;
   -ms-transition:all .4s;
   transition:all .4s;
}

figure:hover h3,figure:hover p {
   left:0;
}

figcaption h3 {
   background:black;
   margin-top:20px;
}

figcaption p {
   -webkit-transition-delay:1.2s;
   -moz-transition-delay:1.2s;
   -o-transition-delay:1.2s;
   -ms-transition-delay:1.2s;
   transition-delay:1.2s;
}

figcaption h3 {
   -webkit-transition-delay:1s;
   -moz-transition-delay:1s;
   -o-transition-delay:1s;
   -ms-transition-delay:1s;
   transition-delay:1s;
}

figcaption a {
   color:white;
}

koneksi php：

<?php
define("HOST","localhost");
define("USER","root");
define("PASS","");
define("DB","test");

$connect=mysql_connect(HOST,USER,PASS);
if (!$connect){
    echo "Koneksi gagal dilakukan";
}
$db=mysql_select_db(DB);
if (!$db){
    echo "Database gagal dipilih";
}
?>

我的数据库字段：没有标题内容图片

4

0 回答 0