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

最新推荐文章于 2022-06-22 17:53:51 发布

HorseRunningNoStop

最新推荐文章于 2022-06-22 17:53:51 发布

阅读量2k

点赞数

分类专栏： PHP HTML

本文链接：https://blog.csdn.net/HorseRunningNoStop/article/details/51527032

版权

PHP 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

作为新手，在学习网站开发时，总会有点不知所措。前端开发涉及的内容很多：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布局