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

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

<!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>

提交重置代码

自动运行

全屏