如何根据数据库信息制作样式列表

Question

我意识到这不是典型的问题，我今晚将删除它，以免占用空间与非代码错误问题，但我真的需要一些帮助。我正在尝试从问题数据库中提取信息并创建一个按问题标题组织的问题列表。当用户点击问题标题时，它会根据 question_id 将他们带到下一页。

我发布了问题列表当前显示方式的代码，但我不知道如何设置它们的样式以使其看起来真正吸引人。我会使用带有 10 个不同 id 的 10 个 div 标签，它们都指定了背景以及与顶部的距离吗？还是我会用一张桌子？或者还有什么我可以用的吗？

我是 php 和 html 的新手，我真的不知道有多少方法可以显示从数据库中提取的信息....

Current_questions.php

<?php
        $i = 0;
        $str = "";
        $sql = "SELECT * FROM questions";
        $result = mysql_query ($sql, $conn) or die(mysql_error());
        if (mysql_num_rows($result) >= 0)
            {
                while ($row = mysql_fetch_array($result, MYSQL_ASSOC) and $i<10 ) 
                    {
                        $i++;
                        $str .= $i . ". ";
                        $str .= "<a href='show_question2.php?question_id=" . $row["question_id"] . "'>"
                                . $row["title"] . "</a> <br> ";
                    }
                print $str;

            } 

?>

此代码当前仅打印标题列表，这并不理想。谢谢！

我不是在寻找如何编码，只是建议最好的方法。几句话的简单答案就是我要寻找的全部 -

Answer 1

学习一些 CSS 真的很有帮助

$toggle = false;
while ($row = mysql_fetch_array($result, MYSQL_ASSOC) and $i<10 ) 
                    {
                        $i++;
                        $str .= $i . ". ";
                        $toggle = !$toggle;
                        if($toggle)
                            $style = "background: Grey;";
                        else
                            $style = "background: White;";

                        $str .= "<a style='padding: 10px;$style' href='show_question2.php?question_id=" . $row["question_id"] . "'>"
                                . $row["title"] . "</a> <br> ";
                    }

Answer 2

从最能描述您正在做什么的 HTML 实体开始。对我来说，这听起来像是list。现在决定它是有序列表还是无序列表。如果不确定，请使用 u-ordered

您可能希望您的 html 以如下形式结束：

<ul>
   <li><a href='show_question2.php?question_id=1'>Question 1 Title</a></li>
   <li><a href='show_question2.php?question_id=2'>Question 2 Title</a></li>
   <li><a href='show_question2.php?question_id=3'>Question 3 Title</a></li>
 </ul>

现在在 Internet 上查找有关设置列表样式的众多文章中的一篇。

这里有 3 个开始：

1. http://www.alistapart.com/articles/taminglists/ -- 我是这些家伙的忠实粉丝
2. http://www.webreference.com/programming/css_style2/index.html
3. http://www.marcofolio.net/css/8_different_ways_to_beautifully_style_your_lists.html

A real quick and dirty examples with lists