域名不卖,勿扰!

手写代码建一个简单网站。

下面我们用刚介绍过的html、css、php、mysql来做一个简单的动态网站。外观如下:
ea031445349426.jpg
那么我们的思路是这样的。网站主要是三部分。
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%;}
}

版权共享,随意转载:云破天开 » 手写代码建一个简单网站。

5 评论

7+1=

  1. 飞雪

    你用Emlog6.0没BUG吗?好几篇文章评论框都不见了,还有sitemap插件也不能用,好多主题也是一样

    来自香港
    回复
    • yptk

      @飞雪:目前还没发现啊。

      来自河北
      回复
      • 飞雪

        @yptk:我用的时候怎么BUG一大堆

        来自江西
        回复
        • 云破天开

          @飞雪:那你又换回emlog5了么?

          来自北京
          回复
  2. 啦啦啦

    不错(*๓´╰╯`๓)♡支持你!!!

    来自山东
    回复