Question

您好我需要一些PHP的帮助，我是新手，所以很容易，我的朋友给我一个关于如何创建图库的pdf教程，我已经按照一步一步但似乎有一个不同结果，即使我的朋友似乎也找不到。 HTML：

<?php 

include_once ("scripts/connection.php");

?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>website</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="scripts/script.js"></script>
</head>
<body>

<header>
<h1>Website</h1>
<nav>
    <ul>
        <li><a href="index.php" title="home">home</a></li>
        <li><a href="register.php" title="register">register</a></li>
        <li><a href="gallery.php" title="gallery">gallery</a></li>
    </ul>
</nav>
</header>

<div class="container">

<?php

if(isset($_GET["id"])){

    $id = $_GET["id"];
    $sql = "SELECT * FROM images WHERE id = '$id'";
    $result = mysqli_query($dbconnect, $sql);

     while($row = mysqli_fetch_assoc($result)){

    echo "<h2>" . $row["title"] . "</h2>";
    echo "<div class='full' style='background:url(" . $row["url"] . ");      background-size:cover;'></div>";
    echo "<p>" . $row["description"] . "</p>";
    echo "<p><a href='gallery.php' title=‘close'>close</a></p>";
    }
    }
    $sql = "SELECT * FROM images";
    $result = mysqli_query($dbconnect, $sql);

    while($row = mysqli_fetch_assoc($result)){

    echo "<a class='preview' title='see full image' href='?id=" .          $row["id"] . "'>";
    echo "<div class='thumbnail' style='background:url(" . $row["url"]   . "); background-size:cover;’></div>";
    echo "<div class='title'>" . $row["title"] . "</div>";
    echo "</a>";

    }
    ?>


</div>
</body>
</html>
<?php 

mysqli_close($dbconnect);

?>

CSS：

*{
margin: 0;
padding: 0;
}

body{
font-family:sans-serif;
 }

header{
text-align:center;
box-shadow:0 3px 5px #DDDDDD;
-webkit-box-shadow:0 3px 5px #DDDDDD;
-moz-box-shadow:0 3px 5px #DDDDDD;
}

h1{
font-weight:lighter;
font-size:2.5em;
line-height:2em;
}

nav ul li{
list-style-type: none;
display: inline;
line-height: 3em;
padding: 0 20px;
}

a, a:visited{
text-decoration: none;
color: #2A80B9;
}

a:hover, a:active{
color: #3598DC;
}

.container{
width: 70%;
margin: 50px auto;
}

.preview{
display: inline-block;
width:20%;
margin:40px 0 0 4%;
font-size:0;
}

.preview:hover{
box-shadow:0 5px 7px #BBBBBB;
-webkit-box-shadow:0 5px 7px #BBBBBB;
-moz-box-shadow:0 5px 7px #BBBBBB;
}

.thumbnail{
width: 100%;
height: 200px;
}

.title{
width: 100%;
text-align: center;
line-height: 2.5em;
background:#222222;
font-size: 16px;
margin-top: -2.5em;
color: white;
opacity: 0.75;
filter: alpha(opacity=75);
}

.preview:hover .title{
opacity:1;
filter: alpha(opacity=100);
}

.full{
width:100%;
height: 500px;
}

首先感谢您的阅读，如果您看一下代码，您会发现缺少中间图片，这就是我可以修复真正问题的数据库问题是缩略图文本没有显示某种原因。

图片1是我当前的结果：

图片2是我的freinds结果，它应该是什么样的：

先谢谢你们的帮助。

Answer 1

下面的代码与您的朋友示例相似，所以为什么您的版本不是特殊的〜这几乎与您的原始发布相同，只是一些小的改动，但没有任何IMO会影响输出。您所包含的styles.css中的css与您的问题中引用的css完全相同吗？ javascript中是否有可能删除带有类title的div或隐藏它的div？

<?php 
    $host   =   'localhost';
    $uname  =   'xxxx'; 
    $pwd    =   'xxxx'; 
    $db     =   'xxxx';
    $conn=new mysqli( $host, $uname, $pwd, $db );
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>website</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/javascript" src="scripts/script.js"></script>
    </head>
    <body>
        <header>
            <h1>Website</h1>
            <nav>
                <ul>
                    <li><a href="index.php" title="home">home</a></li>
                    <li><a href="register.php" title="register">register</a></li>
                    <li><a href="gallery.php" title="gallery">gallery</a></li>
                </ul>
            </nav>
        </header>
        <div class="container">
        <?php

            if( isset( $_GET["id"] ) ){
                $id = $_GET["id"];
                $sql = "SELECT * FROM images WHERE id = '$id'";
                $result = mysqli_query($conn, $sql);

                 while( $row = mysqli_fetch_object( $result ) ){
                     echo "
                     <h2>" . $row->title . "</h2>
                     <div class='full' style='background:url(" . $row->url . ");background-size:cover;'></div>
                     <p>" . $row->description . "</p>
                     <p><a href='gallery.php' title='close'>close</a></p>";
                }
                mysqli_free_result( $result );
            }



            $sql = "SELECT * FROM images";
            $result = mysqli_query( $conn, $sql );

            while( $row = mysqli_fetch_object( $result ) ){
                echo "
                <a class='preview' title='see full image' href='?id=" . $row->id . "'>
                    <div class='thumbnail' style='background:url(" . $row->url   . "); background-size:cover;'></div>
                    <div class='title'>" . $row->title . "</div>
                </a>";
            }
            mysqli_free_result( $result );
            ?>
        </div>
    </body>
</html>
<?php 
    mysqli_close($conn);
?>

PHP帮助图库

1 个答案: