你好,欢迎访问远方教程PC版!
广告位招租

Div+CSS速成第十天:div+css网页标准布局实例三(第4页)

[日期:2015-04-19]   来源:远方教程  作者:远方教程   阅读:9126次[字体: ] 访问[旧版]
 捐赠远方教程 

 

四、php读取数据
以上的工作都完成后,下面就该用程序读取数据了。首先需要创建一个数据库连接文件,让php程序可以访问数据库,这样才能读取里边的数据,在根目录下创建一个inc文件夹,并创建一个conn.php文件,然后打开文件,在源代码里插入如下代码:
<?
$conn = mysql_connect ("localhost","root","") or die ("数据库连接出错" . mysql_error());
mysql_select_db ("jiaocheng",$conn);
mysql_query("set names 'gbk'");
?>
 
之所以单独创建一下文件,是因为后边很多页面都要用,这样只需包含这个页面即可,不用每个页面再写这段代码了。数据库连接文件创建好后,下面就该在index.html调用了。注意:这里要将后缀改为php才行,如果还是html的话,那么它将直接输出,不会经过服务器加工。接下来打开index.php,在源代码的最顶部插入如下代码,把conn.php文件包含进来:
<?
include("inc/conn.php");
?>
记得要把inc文件夹上传到服务器上哟。下面就先做“热门新闻”列表吧,把原来做的#news_list下的ul列表改为如下形式:
<ul>
<?
$sql="select * from news order by id desc limit 0,6";
$query=mysql_query($sql);
while($row=mysql_fetch_array($query)){
?>
<li><span><?=$row['add_time']?></span><a href="#"><?=$row['title']?></a></li>
<? }?>
</ul>
第一句是创建一个sql查询语句,表示查询news表以id的倒序排列且只查询前6条,接下来循环读取出来。上传预览一下吧,是不是变形了,一方面标题太长了,另一方面日期应该只显示月和日,日期通过程序只取月日两位,处理标题有两种方法,一种是用程序截取,一种是css超出隐藏。下面先把日期给改了,把<?=$row['add_time']?>替换为:<?=date('m-d',strtotime($row['add_time']))?>

DIV CSS教程——第十天_div css网页标准布局实例

把日期改短后,显示正常了,但为了防止以后出现长标题把页面撑乱,让程序员注意截取一下标题或者你用css来实现,css超出隐藏的话可以给li定义高度和overflow:hidden属性。得了,从数据库中读取数据出来,就这么简单,下面说一下幻灯部分的实现吧。

DIV CSS教程——第十天_div css网页标准布局实例

和上边的读取方法一样,只不过用if判断一下$pic是否为空,来解决开头没有|的问题。上传上再预览一下吧,看看是不是显示出来了呢?是吧,已经显示出来了,打开源代码看看,刚才我们添加的程序部分并没有显示出来,取而代之的是数据库中的数据,这就是程序的奇妙之处。

DIV CSS教程——第十天_div css网页标准布局实例

好了,有关程序部分就讲这么多了,相信你也该明白是怎么回事了,剩下的你可以自己对照着制作个试试,如果你想学习程序的话,给大家推荐以前我学过的教程,asp的话可以学习fif小组的asp视频教程,在百度里搜索:fif asp,就出来了,第一个结果便是网易学院的fif视频教程;如果你对php感兴趣的话,建议去php100中文网,听听张恩民老师讲解的php系列教程,相信很快你也会成为一个程序高手的。

图片展示
 
相关评论
站长推荐