您的位置：首页 > Web前端 > JavaScript

简单样例之：div+css+javascript+php+mysql

2016-05-29 10:26 573 查看

作为新手，在学习网站开发时，总会有点不知所措。前端开发涉及的内容很多：table布局、div布局、css样式、javascript、框架等等，后台语言的选择、数据库操作、服务器配置、与前端的交互等等，为了便于学习和对原理的领悟，本篇设计了一个最小化系统，任何复杂的网页都是从最小的系统慢慢完善复杂化，这也将帮助你更好地进行后期的学习及开发。

该简单样例采用div布局，调用css样式文件进行显示。通过javascript语言的应用改变css的样式，再利用php语言调用数据库，并将数据库数据以表格是形式呈现。

div布局文件代码：(test.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单测试系统</title>
<link rel="stylesheet" type="text/css" href="css/test.css"/>
<script src="/SimpleExemple/js/test.js" type="text/javascript"></script>
</head>

<body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
</div>

<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>

<div id="content">Content goes here</div>

<div id="footer">Copyright W3School.com.cn</div>
<input type="button" id="btn_test" value="点击改变样式" onClick="change()"/>
</div>
</body>
</html>

css样式文件(test.css)：

// JavaScript Document
function change()
{
alert("测试改变样式！");
document.getElementById("footer").style.backgroundColor="rgb(255,0,0)";
document.getElementById("footer").innerHTML="哈哈哈，我变了！！";
}

数据库连接文件：conn.php

<?php
header("Content-Type:text/html;charset=utf-8");
$dbms="mysql";
$dbName="mysql";
$user="root";
$pwd="";
$host="localhost";
$dsn="$dbms:host=$host;dbname=$dbName";
try
{
$pdo=new PDO($dsn,$user,$pwd);
echo "PDO连接MySQL成功！";
}catch(Exception $e)
{
echo $e->getMessage()."<br>";
}
?>

数据显示及网页展示：tableData.php

<table width="500" border="1px" cellspacing="0" cellpadding="0" bordercolor="rgb(255,0,0)">
<tr>
<td>name</td>
<td>id</td>
</tr>
<?php
include_once("conn.php") ;
$query="select * from testtb";
$result=$pdo->prepare($query);
$result->execute();
$res=$result->fetchAll(PDO::FETCH_ASSOC);
for($i=0;$i<count($res);$i++){
?>
<tr>
<td align="center" valign="middle"><?php echo $res[$i]['name'];?></td>
<td align="center" valign="middle"><?php echo $res[$i]['id'];?></td>
</tr>
<?php
}
?>
</table>
<?php
include("test.html");
?>

相信经过测试学习这些代码，你对div布局，css样式，javascript，php之间的关系会有一个清晰的了解，而复杂的网页开发就只需将每块进行深入即可。

该系统测试结果：

（1）Div布局

(2)利用javascript改变样式

（3）调用数据库，并进行数据显示

这个作为学习的例子给大家参考，相信会有所收获的。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航