++++修改首页样式布局

m344739968 · Mar 30, 2017 · 8974c09 · 8974c09
1 parent cc20969
commit 8974c09
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 17 deletions.
diff --git a/PageDemo/connect.php b/PageDemo/connect.php
@@ -1,5 +1,5 @@
 <?php
-$host="localhost";
+$host="127.0.0.1";
 $db_user="root";
 $db_pass="123456";
 $db_name="test";

diff --git a/PageDemo/index.html b/PageDemo/index.html
@@ -6,7 +6,7 @@
 <meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
 <title>jQuery+Ajax+PHP+Mysql实现分页显示数据</title>
 <style type="text/css">
-#list{ height:530px; margin:50px auto 2px auto; position:relative;display:block;}
+#list{ height:530px; margin:2px auto 2px auto; position:relative;display:block;}
 #list ul li{ float:left;width:220px; height:260px; margin:2px; list-style:none;}
 #list ul li img{width:220px; height:220px}
 #list ul li p{line-height:22px}
@@ -91,10 +91,10 @@
 
 <body>
 <div id="header">
-   	<div id="logo"><h3><a href="#" title="首页">PHP分页</a></h3></div>
+	<div id="logo"><i><a href="#" title="首页">PHP无刷新分页</a></i></div>
 </div>
 <div id="main">
-  	<h3 class="top_title"><a href="http://www.helloweba.com/view-blog-195.html" target="_blank">jQuery+Ajax+PHP+Mysql实现分页显示数据</a></h3>
+  	<!--<h3 class="top_title"><a href="http://www.helloweba.com/view-blog-195.html" target="_blank">jQuery+Ajax+PHP+Mysql实现分页显示数据</a></h3>-->
    	<div id="list">
     	<ul></ul>
     </div>

diff --git a/PageDemo2/config.php b/PageDemo2/config.php
@@ -8,10 +8,10 @@
 /*
 *配置数据库信息
 */
-$cfg_dbhost='127.0.0.1';
-$cfg_dbname='test';
-$cfg_dbuser='root';
-$cfg_dbpw='123456';
 $dbms='mysql';     //数据库类型
-$dsn="$dbms:host=$cfg_dbhost;dbname=$cfg_dbname";
+$host='localhost'; //数据库主机名
+$dbName='test';    //使用的数据库
+$user='root';      //数据库连接用户名
+$pass='123456';    //对应的密码
+$dsn="$dbms:host=$host;dbname=$dbName";
 ?>
diff --git a/PageDemo2/conn.php b/PageDemo2/conn.php
@@ -8,12 +8,24 @@
 /*
 *连接数据库 进行相关查询操作
 */
-
 class conn{
+
     public function __construct(){
+        //将数据库用户名密码等信息写到配置文件config.php里，
+        //在在需要引用配置文件内容的文件里用include或require包含进来，
+        //并在函数里用global关键字将存放数据库名，密码等的变量全局化，这样就可以在文件里的函数里使用了。
         include_once('config.php');
+        global $dsn,$user,$pass;
+        //echo 'dsn:'.$dsn;
+        //echo 'user:'.$dsn;
+        $dbms='mysql';     //数据库类型
+        $host='localhost'; //数据库主机名
+        $dbName='test';    //使用的数据库
+        $user='root';      //数据库连接用户名
+        $pass='123456';    //对应的密码
+        $dsn="$dbms:host=$host;dbname=$dbName";
         try{
-            $this->pdo = new PDO('mysql:host=127.0.0.1;dbname=test', 'root', '123456');
+            $this->pdo = new PDO($dsn, $user, $pass);
             $this->pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
             $this->pdo->exec('set names utf8');
         }catch(PDOException $e){

diff --git a/PageDemo2/index.php b/PageDemo2/index.php
@@ -22,7 +22,7 @@
 $data=$conn->getAll($sql);
 ?>
 <div id="header">
-    <div id="logo"><h3><a href="#" title="首页">PHP分页</a></h3></div>
+    <div id="logo"><i><a href="#" title="首页">PHP可刷新分页</a></i></div>
 </div>
 <div id="main">
     <div id="list">
@@ -65,9 +65,9 @@
     <p>PHP add by malei</p>
 </div>
 <style type="text/css">
-    #list{ height:530px; margin:50px auto 2px auto; position:relative;display:block;}
+    #list{ height:530px; margin:2px auto 2px auto; position:relative;display:block;}
     #list ul li{ float:left;width:220px; height:260px; margin:2px; list-style:none;}
-    #list ul li img{width:220px; height:220px}
+    #list ul li img{width: 220px;height: 220px;}
     #list ul li p{line-height:22px}
     #pagecount{width:500px; margin:10px auto 2px auto; padding-bottom:20px; text-align:center}
     #pagecount span{margin:4px; font-size:14px}

diff --git a/index.php b/index.php
@@ -25,19 +25,30 @@
 //echo json_encode($list);
 echo "<br/>" ;
 ?>
-<div>HELLO WORD</div>
+<div id="top" class="top">DEMO</div>
+<div id="menu" class="divCls left">
 <ul>
     <li>
         <div>
             <span>1.</span>
-            <a href="PageDemo/index.html" target="_blank">PHP无刷新分页</a>
+            <a href="PageDemo/index.html" target="content">PHP无刷新分页</a>
         </div>
     </li>
     <li>
         <div>
             <span>2.</span>
-            <a href="PageDemo/index.html" target="_blank">PHP可刷新分页</a>
+            <a href="PageDemo2/index.php" target="content">PHP可刷新分页</a>
         </div>
     </li>
 </ul>
+</div>
+<div id="main" class="divCls right">
+    <iframe id="content" name="content" scrolling="no" frameborder="0" style="width:100%;min-width:1200px; height:100%;min-height: 800px; "></iframe>
+</div>
+<style type="text/css">
+    .divCls{float: left;}
+    .left{width:18%;height:100%;border:1px solid #CCC;}
+    .right{width:80%;min-width: 1024px;height:100%;margin-top: 0px;border:1px solid #CCC;}
+     ul li{margin:5px;list-style:none;}
+</style>