Question

我正在构建这个简单的PHP网站，而且我遇到了一些让正常工作正常的问题。

首先，我喜欢每个POST都有一个黑色边框，出于某种原因，它会将边框放在整个网页上。我也喜欢每个帖子都加盖时间戳，以显示发布的时间，但与边框相同。所有时间戳都是一样的，当我添加帖子时，所有帖子都会更改为最新帖子的制作时间。我将在下面发布我的php，以及form.php，希望它是一个小修复。

谢谢！

PHP

<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="post.css" />

<meta name="viewport" content="width=device-width" />
<title>Daily Dorm News</title>
</head>

<body>
<h1>Your Daily Dorm News Post! </h1>
<div id="container"> <?php if ( isset($_GET['name']) and preg_match("/^[A-Za-z0-9]+$/", $_GET['name']) ) {

    echo $_GET['name'];

} else {

    echo "You entered an invalid name!\n";

}

?><br>


Your email address is: <?php if ( isset($_GET['email']) and preg_match("/.+@.+\..+/i", $_GET['email']) ) {

    echo $_GET['email'];

} else {

    echo "You didn't enter a proper email address!\n";

}
?><br>
You Posted : <?php echo $_GET["message"]; ?><br>


This event happened :<?php echo $_GET["date"]; ?><br>


</div>
<?php 
/* [INFO/CS 1300 Project 3] index.php 
 * Main page for our app.
 * Shows all previous posts and highlights the current user's post, if any.
 * Includes a link to form.php if user wishes to create and submit a post.
 */ 

require('wall_database.php');

// Fetching data from the request sent by form.php  
$name = strip_tags($_REQUEST['name']);
$email = strip_tags($_REQUEST['email']);
$message = strip_tags($_REQUEST['message']);
$date = strip_tags($_REQUEST['date']);

$is_valid_post = true;
// Checking if a form was submitted
if (isset($_REQUEST['name'])){
  // Fetching data from the request sent by form.php  
$name = strip_tags($_REQUEST['name']);
$email = strip_tags($_REQUEST['email']);
$message = strip_tags($_REQUEST['message']); 
$date = strip_tags($_REQUEST['date']);  
  // Saving the current post, if a form was submitted
  $post_fields = array();
  $post_fields['name'] = $name;
  $post_fields['email'] = $email;
  $post_fields['message'] = $message;
  $post_fields['date'] = $date;
  $success_flag = saveCurrentPost($post_fields);
}

//Fetching all posts from the database
$posts_array = getAllPosts();

require('header.php');
?>
    <p><a href="form.php">Submit a Post</a></p>

    <?php
    if(isset($name)) {
      echo "<h3>Thanks ".$name." for submitting your post.</h3>";
    }
    ?>

    <p>Here are all the posts we have received.</p>
    <ul id="posts_list">
    <div id="posts">
    <?php 

    // Looping through all the posts in posts_array
    $counter = 1;
    foreach(array_reverse($posts_array) as $post){
      $name = $post['name'];
      $email = $post['email'];
      $message = $post['message'];
      $date = $post['date'];
      if ($counter % 2==1)
        $li_class = "float-left";
      else
        $li_class = "float-right";

      echo '<li class="'.$li_class.'"><h3><span>'.$name.'</span> wrote a post.</h3></li>';
      echo '<li class="'.$li_class.'"><h3><span>'.$name.' email is: '.$email.'</span></h3></li>';
      echo '<li class="'.$li_class.'"><h3><span>'.$name.' wrote '.$message.'</span> wrote a post.</h3></li>';
      echo '<li class="'.$li_class.'"><h3><span>This evemt occured on '.$date.'</span></h3></li>';
      date_default_timezone_set('EST');
      echo date('l jS \of F Y h:i:s A');

    }
    ?>
    </ul>
  </div>

</body>
</html>

表格

<!DOCTYPE HTML>
<html> 
<head>

<link type="text/css" rel="stylesheet" href="index.css" />
<meta name="viewport" content="width=device-width" />
<title>Daily Dorm News</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
$('form').submit(function (e) {
    var value;

    // "message" pattern : from 3 to 15 alphanumerical chars

    value = $('[name="message"]').val();
    if (!/^[A-Za-z0-9]{3,15}$/.test(value)) {
        alert('Wrong value for "message".');
        e.preventDefault();
        return;
    }

    // "name" pattern : at least 1 digit

    value = $('[name="name"]').val();
    if (!/\d+/.test(value)) {
        alert('Wrong value for "name".');
        e.preventDefault();
        return;
    }
});

});
</script>

</head>
<body>
<h1> <u>Daily Dorm News</u> <br> The best place to get your latest Dorm news </h1>
<form action="posting_wall.php" method="get">
<div id="container">
Name:<input type="text" name="name" pattern="[A-Za-z0-9]{3,15}" title="Letters and numbers only, length 3 to 15" required autofocus><br>
E-mail: <input type="email" name="email" maxlength="20" required><br>

Post:<br>

<textarea rows="15" cols="50" name='message'></textarea>
</div>
Date this event took place: <input type="text" name='date' id="datepicker" required> <br>

<input type="reset" value="Reset">
<input type="submit">
</form>
<p><a href="posting_wall.php">Posting Wall</a></p>
</body>
</html>

CSS

h1 {
font-size:200%;
text-decoration:underline;
font-weight:bold;
color:blue;
text-align:center;

}
div#container {
font-size:150%;
text-align:center;
}
div#posts{
border-style:solid;
border-width:5px;
}

[IMG] http://i41.tinypic.com/260aog7.jpg [/ IMG]

Answer 1

您的CSS目前定位

div #posts{
}

，从阅读你的PHP，是整个邮政容器。如果您想在每个帖子周围添加边框，则需要在单个帖子中添加一个类。在您的代码中，这是foreach块

我会考虑使用类似

的类添加div来包装每个帖子

echo '<div class=post>';
  echo '<li class="'.$li_class.'"><h3><span>'.$name.'</span> wrote a post.</h3></li>';
  echo '<li class="'.$li_class.'"><h3><span>'.$name.' email is: '.$email.'</span></h3></li>';
  echo '<li class="'.$li_class.'"><h3><span>'.$name.' wrote '.$message.'</span> wrote a post.</h3></li>';
  echo '<li class="'.$li_class.'"><h3><span>This evemt occured on '.$date.'</span></h3></li>';
  date_default_timezone_set('EST');
  echo date('l jS \of F Y h:i:s A');
echo '</div>';

然后重写你的CSS说：

.post{
     border: 5px solid;
}

试图编辑我的博客网站

1 个答案: