【问题标题】:How to use CSS to style the results of a PHP echo?如何使用 CSS 设置 PHP 回显结果的样式?
【发布时间】:2012-10-05 04:10:32
【问题描述】:

我正在为包装数据库创建一个搜索表单,并且我使用 CSS 来设置调用 PHP 页面的 HTML 表单的样式。我希望能够使用与搜索表单样式相同的 CSS 来设置来自 PHP 页面的所有结果的样式,因为 PHP 继续将结果作为单独的元素回显,我希望所有这些结果都显示在单独的小框中。它像我想的那么简单吗?只是用标签包围PHP?正如我目前正在尝试的那样,但它似乎不起作用。

   <body>

        <?php
            $con = mysql_connect ("localhost", "root", "");
                   mysql_select_db ("delyn_db", $con);

            if (!$con)
                { 
                    die ("Could not connect: " . mysql_error());
                }

            $descrip = mysql_real_escape_string($_POST['descrip']); 
            $depth   = mysql_real_escape_string($_POST['depth']);

            $varWidth = mysql_real_escape_string($_POST['traywidth']);
            $varHeight= mysql_real_escape_string($_POST['trayheight']);
            $varRange = mysql_real_escape_string($_POST['trayrange']);
            $varType  = mysql_real_escape_string($_POST['traytype']);
            $varShape = mysql_real_escape_string($_POST['trayshape']);
            $varImage = mysql_real_escape_string($_POST['imagename']);

            if (isset($varHeight) && !empty($varHeight)) {
                    $low  = ($varHeight."00");
                    $high = ($varHeight."99");
                } else {
                    $low  = ("000");
                    $high = ("999");
                }

            if (isset($varWidth) && !empty($varWidth)) {
                    $min  = ($varWidth."00");
                    $max = ($varWidth."99");
                } else {
                    $min  = ("000");
                    $max = ("999");
                }   


            $sql = "SELECT * FROM delyn WHERE 
                        description LIKE '%".$descrip."%'  
                    AND trayrange   LIKE '%".$varRange."%' 
                    AND traytype    LIKE '%".$varType."%' 
                    AND trayshape   LIKE '%".$varShape."%'
                    AND traywidth   BETWEEN '".$min."'  AND '".$max."' 
                    AND trayheight  BETWEEN '".$low."' AND '".$high."' ";

    ?>

    while ($row = mysql_fetch_array($r_query)) 
                    { 
                        echo '<p class="results">';
                        echo '<br /><img src="   '. $row['imagename'] . '" width="120" length="50">';
                        echo '<br /><strong> Tool Code: </strong>  '. $row['toolcode'];
                        echo '<br /><strong> Description: </strong> '. $row['description']; 
                        echo '<br /><strong> Tray range: </strong> '. $row['trayrange']; 
                        echo '<br /><strong> Tray type:  </strong> '. $row['traytype'];
                        echo '<br /><strong> Tray size:  </strong> '. $row['traysize']; 
                        echo '<br /><strong> Tray shape: </strong> '. $row['trayshape'] . '<br />' . '<br />' . '</p>';;  
                    }
                if (mysql_num_rows($r_query) <= 0){
                    echo 'No results match your search, please try again';
               }

        ?>  
  </body>  

CSS(对于 HTML 表单,我希望表单 div 标记的相同属性适用于结果):

  @charset "UTF-8";

/* CSS 文档 */

 body {

}

.results {
width: 190px;
padding: 10px;
background: #E8CF24;
overflow:auto;
display:block;

font-family: Verdana, Geneva, sans-serif; 
font-size: 11px;

border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;

-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}

现已编辑。

【问题讨论】:

  • 您不应该使用 mysql_* 函数与 mysql 数据库进行交互,除了名称之外,它们已被弃用,不再真正维护,并且适用于 mysql 版本 4。您应该切换到mysqli 或 PDO 代替。
  • 我会记住这一点的,谢谢:)

标签: php css forms styles


【解决方案1】:

不要使用断点,而是使用段落标签。

<p><?php echo  $row['imagename']; ?></p>

例如。然后你可以为段落标签分配类。

因此,如果您想为每个部分分配一个类,只需:

<p class="image_name_class"><?php echo  $row['imagename']; ?></p>
<p class="tool_code_class"><?php echo  $row['toolcode']; ?></p>

或以一种形式:

<label class="control-label" for="input01">Tool Code</label>
<input class="input" ID="tool_code" runat="server"><?php echo  $row['toolcode']; ?></input >

虽然您在该 CSS 中有 .input ,但您可以只输入而不是 .input ,这样您就不必为您的输入分配一个类,它会自动分配。

【讨论】:

  • 你不能使用一个

    标签吗?例如&lt;p class="results"&gt; &lt;?php //whole code// ?&gt; &lt;/p&gt; 然后使用 CSS 单独设置所有样式?然后使用属性

  • 你可以,取决于你是否想对每个项目应用非常具体的样式。显然,最好的办法是将项目类传递给函数以运行创建 html,而不是全部内联创建,这样您就可以将代码从内联中抽象出来,使其更易于维护。
  • 我正在尝试这个&lt;p class ="results"&gt; &lt;?php echo '&lt;br /&gt; &lt;img src=" '. $row['imagename'] . '" width="120" length="50"&gt;'; ?&gt; &lt;/p&gt;我已经创建了一个新的css页面来测试,似乎没有任何改变或工作。
  • 你有一个示例页面吗?还要去掉class和=之间的空格,你的css格式是:.results { details }
  • 好的。我已经让 css 能够单独显示每个回声。但是,当我尝试在 while 语句中获取所有回显结果并将它们放在 &lt;p class="results"&gt;&lt;/p&gt; 元素中时,它不起作用。有没有让他们都工作?如果这可行,那么它们应该都显示在一个漂亮的小气泡框中。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-05-08
  • 2013-08-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-07-30
相关资源
最近更新 更多