뉴스 목록 페이지의 목록 표시, 기능 프런트엔드 코드 삭제

이 장에서는 뉴스 목록의 프런트엔드 표시를 소개하며 주로 기능 구현을 소개하므로 프런트엔드는 비교적 간단합니다.

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

제출하다 코드 재설정

자동운전