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.
Next Section