新聞列表頁之列表展示，刪除功能前端代碼

本章節介紹了新聞列表的前端展示，主要是功能實現，所以前端做的比較簡單。

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

提交重置程式碼

自動運行

全螢幕