新聞列表頁(yè)之列表展示，刪除功能前端代碼
本章節(jié)介紹了新聞列表的前端展示，主要是功能實(shí)現(xiàn)，所以前端做的比較簡(jiǎn)單。
<!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>新聞網(wǎng)站</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;">新聞網(wǎng)頁(yè)簡(jiǎn)單實(shí)例</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>標(biāo)題：<?php echo $row['title'];?></p>
<p>內(nèi)容：<?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標(biāo)簽內(nèi)的是CSS樣式，相信大家都能看的懂。
<?php while($row=mysqli_fetch_assoc($result)):?><?php endwhile;?>
這段代碼可能有的人會(huì)不太理解，這個(gè)就是將數(shù)據(jù)庫(kù)的數(shù)據(jù)在列表中循環(huán)出來(lái)。也就是說(shuō)，數(shù)據(jù)庫(kù)中有多少條新聞數(shù)據(jù)，頁(yè)面上就會(huì)展示多少條，不需要我們一條一條寫(xiě)出來(lái)。
<?php echo $row['id']?>
<?php echo $row['title'];?>
像這樣的也是循環(huán)，是將標(biāo)題，內(nèi)容等都循環(huán)出來(lái)。
