List display of news list page, delete function front-end code

This chapter introduces the front-end display of the news list, mainly functional implementation, so the front-end is relatively simple.

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

Code explanation:

The style tag contains CSS styles, I believe everyone can understand it.

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

Some people may not understand this code Understand, this is to cycle the data from the database in the list. In other words, as many pieces of news data are in the database, as many pieces will be displayed on the page, and we do not need to write them out one by one.

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

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

like This is also a loop, which loops out the title, content, etc.

Continuing Learning

new file

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

submit Reset Code

Automatic operation

List display of news list page, delete function front-end code

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]