下面我们用刚介绍过的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%;} }
版权共享,随意转载:云破天开 » 手写代码建一个简单网站。
你用Emlog6.0没BUG吗?好几篇文章评论框都不见了,还有sitemap插件也不能用,好多主题也是一样
@飞雪:目前还没发现啊。
@yptk:我用的时候怎么BUG一大堆
@飞雪:那你又换回emlog5了么?
不错(*๓´╰╯`๓)♡支持你!!!