新闻列表页之列表展示,删除功能前端代码

本章节介绍了新闻列表的前端展示,主要是功能实现,所以前端做的比较简单。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no" />
    <title>新闻网站</title>
    <style>
 .top{
            width: 410px;
 margin:0 auto;
 }
        .ti{
            font-family: 微软雅黑;
 }
        a{
            text-decoration: none;
 }
        .cl{
            color:#000000;
 line-height:50px;
 }
        .pt50{
            padding-top: 50px;
 }
        .w200{
            width:100px;
 }
        .w410{
            width: 410px;
 }
        .btn_1 {
            display: inline-block;
 line-height: 5px;
 padding: 15px 0;
 margin-bottom: 30px;
 border-radius: 3px;
 font-family: 微软雅黑;
 background: #03a9f4;
 border: 1px solid #0398db;
 color: #fff;
 font-size: 17px;
 text-align: center;
 cursor: pointer;
 float: right;
 }
    </style>
</head>
<body>
<div  class="top">
    <div style="background:#00CC66;width: 400px;height: 80px;">
        <h2 style= "text-align:center;">新闻网页简单实例</h2>
    </div>
    <div class="pt50 w410">
        <span>
               <form method="post" action="lists.php">
 <?php while($row=mysqli_fetch_assoc($result)):?>
 <p style="float:right">
         <a href="xgai.php?id=<?php echo $row['id']?>" target="_blank;">修改</a>/<a href="?idD=<?php echo $row['id']?>">删除</a></p>
                    <p>标题:<?php echo $row['title'];?></p>
                    <p>内容:<?php echo $row['content'];?></p>
                    <p>作者:<?php echo $row['author'];?></p>
                 <p><?php echo $row['create_at']?></p>
                 <hr>
 <?php endwhile;?>
 </form>
            <div class="btn_1 w200">
                <p ><a href="xgai.php" target="_blank;">新增</a></p>
            </div>
        </span>
    </div>
</body>
</html>

代码解释:

style标签内的是CSS样式,相信大家都能看的懂。

<?php while($row=mysqli_fetch_assoc($result)):?><?php endwhile;?>

这段代码可能有的人会不太理解,这个就是将数据库的数据在列表中循环出来。也就是说,数据库中有多少条新闻数据,页面上就会展示多少条,不需要我们一条一条写出来。

<?php echo $row['id']?>

<?php echo $row['title'];?>

像这样的也是循环,是将标题,内容等都循环出来。

继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no" /> <title>新闻网站</title> <style> .top{ width: 410px; margin:0 auto; } .ti{ font-family: 微软雅黑; } a{ text-decoration: none; } .cl{ color:#000000; line-height:50px; } .pt50{ padding-top: 50px; } .w200{ width:100px; } .w410{ width: 410px; } .btn_1 { display: inline-block; line-height: 5px; padding: 15px 0; margin-bottom: 30px; border-radius: 3px; font-family: 微软雅黑; background: #03a9f4; border: 1px solid #0398db; color: #fff; font-size: 17px; text-align: center; cursor: pointer; float: right; } </style> </head> <body> <div> <div style="background:#00CC66;width: 400px;height: 80px;"> <h2 style= "text-align:center;">新闻网页简单实例</h2> </div> <div class="pt50 w410"> <span> <form method="post" action="lists.php"> <?php while($row=mysqli_fetch_assoc($result)):?> <p style="float:right"> <a href="xgai.php?id=<?php echo $row['id']?>" target="_blank;">修改</a>/<a href="?idD=<?php echo $row['id']?>">删除</a></p> <p>标题:<?php echo $row['title'];?></p> <p>内容:<?php echo $row['content'];?></p> <p>作者:<?php echo $row['author'];?></p> <p><?php echo $row['create_at']?></p> <hr> <?php endwhile;?> </form> <div class="btn_1 w200"> <p ><a href="xgai.php" target="_blank;">新增</a></p> </div> </span> </div> </body> </html>
提交重置代码