如何为PHP查询结果设置样式并换行？美化滚动Marquee效果求助

嘿，我来帮你搞定这个问题！咱们分两部分来处理：一是给从数据库拿到的结果加样式和换行，二是美化滚动效果的样式。

一、完善PHP代码：给查询结果加样式与换行 #

首先我把你的代码补全并优化，重点是给每条查询结果套上可样式化的HTML容器，同时处理换行问题：

<?php 
$data_source='ss'; 
$user='su'; 
$password='pass'; 

// 连接到数据源并获取该连接的句柄 
$conn=odbc_connect($data_source,$user,$password); 
if (!$conn){ 
    if (phpversion() < '4.0'){ 
        exit("Connection Failed: " . $php_errormsg); 
    } else{ 
        exit("Connection Failed:" . odbc_errormsg()); 
    } 
} 

// 替换成你实际的SQL查询，这里假设你要获取标题和内容
$sql="SELECT title, content FROM your_table_name"; 
$result=odbc_exec($conn,$sql); 

// 外层容器，方便整体样式控制
echo '<div class="scroll-wrapper">';
// 用marquee标签实现滚动，给它加自定义类方便样式
echo '<marquee class="custom-scroll">';

// 循环遍历每一条查询结果
while($row=odbc_fetch_array($result)){
    // 给每条结果套一个独立容器，方便单独加样式，同时自动换行
    echo '<div class="scroll-item">';
    // 用htmlspecialchars防止XSS攻击，同时给标题加标签
    echo '<h4>' . htmlspecialchars($row['title']) . '</h4>';
    // nl2br把数据库里的换行转成HTML的<br>标签，实现内容换行
    echo '<p>' . nl2br(htmlspecialchars($row['content'])) . '</p>';
    echo '</div>';
}

echo '</marquee>';
echo '</div>';

// 记得关闭数据库连接
odbc_close($conn);
?>

这里几个关键细节：

• htmlspecialchars()：防止用户输入的特殊字符破坏HTML结构，同时避免XSS攻击，一定要加！
• nl2br()：把数据库中存储的换行符（\n）转换成HTML的<br>标签，让内容在网页上正常换行。
• 用<div class="scroll-item">包裹每条结果：这样可以给每条数据单独设置样式，而且块级元素会自动换行，不用额外加<br>。

二、给滚动效果和查询结果加CSS样式 #

接下来写CSS样式，不管是用原生的<marquee>还是现代CSS动画，都能轻松美化：

方案1：给原生<marquee>加样式 #

/* 外层容器样式，控制整体布局 */
.scroll-wrapper {
    width: 90%;
    max-width: 1200px;
    margin: 20px auto;
    border: 1px solid #e0e0e0;
    padding: 15px;
    border-radius: 8px;
    background-color: #fafafa;
}

/* 自定义marquee的滚动样式 */
.custom-scroll {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    scrollamount: 2; /* 控制滚动速度，数值越大越快 */
    direction: left; /* 滚动方向：left/right/up/down */
    behavior: scroll; /* 滚动方式：scroll(循环滚动)/slide(滑一次)/alternate(来回滚) */
}

/* 每条查询结果的样式 */
.scroll-item {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ccc;
}

.scroll-item h4 {
    margin: 0 0 5px 0;
    color: #2d3748;
    font-weight: 600;
}

.scroll-item p {
    margin: 0;
    color: #4a5568;
}

方案2：用现代CSS动画代替<marquee>（更推荐） #

原生<marquee>标签其实已经被W3C标记为过时特性，虽然大部分浏览器还支持，但用CSS动画更灵活、可控性更强，这里给你一个水平滚动的示例：

修改后的HTML/PHP部分：

// 把原来的marquee换成普通div
echo '<div class="scroll-wrapper">';
echo '<div class="css-scroll">';
while($row=odbc_fetch_array($result)){
    echo '<div class="scroll-item">';
    echo '<h4>' . htmlspecialchars($row['title']) . '</h4>';
    echo '<p>' . nl2br(htmlspecialchars($row['content'])) . '</p>';
    echo '</div>';
}
echo '</div>';
echo '</div>';

对应的CSS：

.scroll-wrapper {
    width: 90%;
    max-width: 1200px;
    margin: 20px auto;
    border: 1px solid #e0e0e0;
    padding: 15px;
    border-radius: 8px;
    background-color: #fafafa;
    overflow: hidden; /* 隐藏超出容器的内容 */
}

.css-scroll {
    display: flex;
    gap: 30px; /* 每条数据之间的间距 */
    animation: scroll-left 30s linear infinite;
}

/* 每条查询结果保持块级显示 */
.scroll-item {
    min-width: 300px; /* 每条数据的最小宽度，防止被挤压 */
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
    background-color: white;
}

.scroll-item h4 {
    margin: 0 0 5px 0;
    color: #2d3748;
    font-weight: 600;
}

.scroll-item p {
    margin: 0;
    color: #4a5568;
    font-size: 14px;
}

/* 定义滚动动画 */
@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

如果需要垂直滚动，只需要调整CSS的动画和布局，把flex改成垂直方向，动画改成translateY即可。

内容的提问来源于stack exchange，提问作者ganga