下面我们用刚介绍过的html、css、php、mysql来做一个简单的动态网站。外观如下：
那么我们的思路是这样的。网站主要是三部分。
index.php：主页面，实现数据的添加、查询。样式表和数据库的链接。
style.css：控制页面样式，实现自适应。
mysql数据库：按存储需求添加数据表。
相信大部分代码大家都能看懂我就不赘述了。
index.php内的代码如下，链接数据库部分我已经做了注释：
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="./style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<center>
<div class="wrapper">
<div class="box1">
<h1>YPTK</h1>
<span>sense and simplicity</span>
</div>
<div>
<div>
<form method="post" action="">
<textarea name="liuyan" rows="6"></textarea>
</div>
<div class="box2">
<div class="">
<input type="text" name="name" value="">
</div>
<div class="btn">
<input type="submit" name="sub" value="Submit">
</form>
</div>
</div>
</div>
<div class="box2">
<?php
$link = mysql_connect('localhost','root','root');//链接数据库服务器
mysql_select_db('yptk');//选择数据库
mysql_set_charset('utf8');//定义字符集编码
if(isset($_POST['sub'])){
$name = $_POST['name'];//得到用户提交的内容
$liuyan= $_POST['liuyan'];
($liuyan=='') and die('请输入留言内容');
($name=='') and die('请输入姓名');
$time=date("M jS Y, l H:i");
$sql_1 = "INSERT INTO user(name,text,time) values('$name','$liuyan','$time')";
$res_1 = mysql_query($sql_1);}
$sql = "SELECT name,text,time FROM user ORDER BY id desc";//选择数据
$res = mysql_query($sql);//发送执行
?>
<?php
while(list($name,$liuyan,$time) = mysql_fetch_row($res)){//获取索引数组，将值赋给list（）
echo "<div class=post><div class=time>{$time}</div><div class=name>{$name}:</div><div>{$liuyan}</div></div>"; //打印结果
}
?>
<p>2015©YPTK.CN</p>
</div>
</div>
</center>
</body>
</html>
style.css的代码如下：
body {font-size: 1.2em;font-family:times,Arial,serif;}
*{margin-top:5px}
h1{color:#69b40f}
span{color:#fff}
.wrapper{width: 100%;}
textarea {padding:2pt;border: 1px solid #000000;width: 50%;font-size:1.2em;}
.box1{width:50%;padding-top:20px;padding-bottom:10px;background-image:url(./img/bg.png);background-color:#333;text-align:center;}
.box2{width:50%}
.name{color:#69b40f;font-size:1.4em}
.post {clear:left;border-bottom: 1px solid #000000;padding-bottom: 10px;width: 100%;margin: 10px auto;text-align:left;overflow:hidden;}
.time{font-size: .8em;padding: 2px 6px;text-align: center;float: right;border: 1px solid;border-radius: 8px;width: 60px;}
input[type="text"]{margin:6px 0;padding: 2pt;border: 1px solid #000000;width: 49%;font-size:1.2em;float:left}
input[type="submit"]{margin: 6px 0;font-size:1.2em;width:49%;float:right}
@media screen and (max-width: 800px){
textarea {width:100%;height: auto;}
.post,.box2,.box1{width: 100%;}
}
版权共享，随意转载：云破天开 » 手写代码建一个简单网站。