简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >12月9日大作业--php培训九期线上班

12月9日大作业--php培训九期线上班

取个名字真难
取个名字真难原创
2019年12月16日 13:58:04709浏览

connect数据库链接

  1. <?php
  2. /** 变量配置 **/
  3. define('DB_NAME', 'dedecmsv57');
  4. define('DB_USER', 'root');
  5. define('DB_PASSWORD', '123456');
  6. define('DB_HOST', 'localhost');
  7. //创建链接数据库的类和数据库操作
  8. class Sql_db
  9. {
  10. public $pdo;
  11. //    链接数据库
  12.     public  function conect($host,$dbname,$user,$pass)
  13.     {
  14.         $dsn = "mysql:host=$host; dbname=$dbname;";
  15.         try{
  16.             $pdo=new PDO($dsn,$user,$pass);
  17.         }catch (PDOException $e){
  18.             die('数据库错误:'.$e->getMessage());
  19.         }
  20. return $pdo;
  21.     }
  22. }

head头部及首页的php代码

  1. <?php
  2. // 连接数据库:$pdo
  3. include 'connect.php';
  4. //创建一个Sql_db的子类
  5. class select extends Sql_db{
  6.     public $pdo;
  7.     public function __construct()
  8.     {
  9. //        调用父类方法链接数据库
  10.        $this->pdo= parent::conect(DB_HOST,DB_NAME,DB_USER,DB_PASSWORD);
  11.     }
  12. //    查询栏目信息和链接
  13.     public function selHead(){
  14.         $sql = 'select * from `coumn` ';
  15.         $stmt = $this->pdo->prepare($sql);
  16.         $stmt->execute();
  17.         $cates = $stmt->fetchAll(PDO::FETCH_ASSOC);
  18.         foreach ($cates as $cate){
  19.           echo ' <li><a href="'. $cate['url'].'.php'.'?id='.$cate['id'].'">'.$cate['cname'].'</a></li>';
  20.         }
  21.     }
  22. //   首页换灯图片
  23. public  function selPic(){
  24.     $sql = 'select `titlename`,`imageurl` from `images` ';
  25.     $stmt = $this->pdo->prepare($sql);
  26.     $stmt->execute();
  27.     $cates = $stmt->fetchAll(PDO::FETCH_ASSOC);
  28.    // 图片路径
  29.     $imgpath='static/images/';
  30.     foreach ($cates as $cate){
  31.         if ($cate['imageurl']===$cate['titlename'])
  32.         {
  33.             echo '<div><img src= '.$imgpath.$cate['titlename'].'></div>';
  34.         }
  35.     }
  36. }
  37. //    查询首页h3红色标题图片
  38. public  function  selTitle(){
  39.     $sql = 'select `*` from `article` limit 1 ';
  40.     $stmt = $this->pdo->prepare($sql);
  41.     $stmt->execute();
  42.     $article = $stmt->fetchAll(PDO::FETCH_ASSOC);
  43.     foreach ($article as $art)
  44.     {
  45.         echo '<h3><a href="article.php?id='.$art['id'].'" >'.$art['title'].'</a></h3>';
  46.     }
  47. }
  48. //首页新闻资讯
  49. public  function  selNew($a){
  50. //        变量$limit控制显示的条数
  51.         $limit='limit '.$a;
  52.     $sql = 'select `*` from `article` '. $limit;
  53.     $stmt = $this->pdo->prepare($sql);
  54.     $stmt->execute();
  55.     $article = $stmt->fetchAll(PDO::FETCH_ASSOC);
  56.     foreach ($article as $art)
  57.     {
  58.         echo '<li>
  59.                         <span>[新闻]</span>
  60.                         <a href="article.php?id='.$art['id'].'" >'.$art['title'].'</a>
  61.                     </li>';
  62.     }
  63. }
  64. //首页新闻频道图片
  65. public  function selImage($a){
  66.     //        变量$limit控制显示的行数
  67.     $limit='limit '.$a;
  68.     // 图片路径
  69.     $imgPath='static/images/';
  70.     $sql = 'select `*` from `article` '.$limit;
  71.     $stmt = $this->pdo->prepare($sql);
  72.     $stmt->execute();
  73.     $article = $stmt->fetchAll(PDO::FETCH_ASSOC);
  74.     foreach ($article as $art)
  75.     {
  76.         echo '<dd class="phpcn-col-md6">
  78.                         <a href="article.php?id='.$art['id'].'" ><img src='.$imgPath.$art['img'].'>
  79.                     <span>'.$art['title'].'</span>
  80.                         </a>
  81.                     </dd>';
  82.     }
  83. }
  84. //首页图片频道图片
  85. public  function imageChan($a,$b){
  86. if ($b==0){
  87.     $limit='limit '.$a;
  88.     }else{
  89.         $limit='limit '.$a.','.$b;
  90.     }
  91. //    图片频道图片路径
  92.     $imgpath='static/images/shop/';
  93.     $sql = 'select `*` from `images`'.$limit ;
  94.     $stmt = $this->pdo->prepare($sql);
  95.     $stmt->execute();
  96.     $pic = $stmt->fetchAll(PDO::FETCH_ASSOC);
  97.     foreach ($pic as $p)
  98.     {
  99.         echo '<li class="phpcn-col-md6">
  100.                                 <a href="images-content.php?id='.$p['id'].'"><img src='.$imgpath.$p['imageurl'].'>
  101.                             <span>'.$p['titlename'].'</span>
  102.                         </a>
  103.                     </dd></li>';
  104.     }
  105. }
  106. //    首页商品
  107. public  function selShop(){
  108.     $sql = 'select `*` from `shop`  ';
  109.     $stmt = $this->pdo->prepare($sql);
  110.     $stmt->execute();
  111.     $pic = $stmt->fetchAll(PDO::FETCH_ASSOC);
  112.     foreach ($pic as $p)
  113.     {
  114.         echo '<dd class="phpcn-col-md3">
  115.                                     <a href="shop-content.php?id='.$p['id'].'"><img src="static/images/shop/'.$p['img'].'"></a>
  116.                                     <a href="shop-content.php?id='.$p['id'].'">'.$p['title'].'<a href="" class="phpcn-mt-10">
  117.                                         <span class="price">'.$p['price'].'</span>
  118.                                         <span class="tags">美女</span></a></dd>';
  119.     }
  120. }
  121. //**************************************************************************************
  122. //列表页面
  123.     public function  listSel($a=10){
  124.         //        变量$limit控制显示的行数默认10行
  125.         $limit='limit '.$a;
  127.         $sql = 'select `*` from `article` '. $limit;
  128.         $stmt = $this->pdo->prepare($sql);
  129.         $stmt->execute();
  130.         $article = $stmt->fetchAll(PDO::FETCH_ASSOC);
  131.         foreach ($article as $cate)
  132.         {
  133.             echo '  <div class="phpcn-clear phpcn-mt-30">
  134.                    <div class="phpcn-col-md4"><img src="static/images/'. $cate['img']. '">                         </div>
  135.                    <div class="phpcn-col-md8">
  136.                     <h2><a href="article.php?id='.$cate['id'].'">'.$cate['title'].'</a></h2>
  137.                     <div class="info phpcn-mt-10">'.$cate['title'].'                                    
  138.                       </div>
  139.                       <div>
  140.                        <a href="article.php?id='.$cate['id'].'">区块链头条 '.$cate['times'].'</a>
  141.                        <span>
  142.                           <i class="phpcn-icon phpcn-icon-icon_yulan phpcn-r phpcn-mr-20">'.$cate['click'].'</i>
  143.                           </span>
  144.                         </div>
  145.                         </div>
  146.                         </div>' ;
  147.         }
  148.     }
  149. //列表页推荐阅读
  150. public function reading ($limit){
  151.         $limit='limit'.$limit;
  152.     $sql = 'select `*` from `article` '. $limit;
  153.     $stmt = $this->pdo->prepare($sql);
  154.     $stmt->execute();
  155.     $article = $stmt->fetchAll(PDO::FETCH_ASSOC);
  156.     foreach ($article as $cate) {
  157.     echo  '<li class="phpcn-col-md3">
  158.                             <div>
  159.                                 <a href="article.php?id='.$cate['id'].'"> <img src="static/images/'.$cate['img'].'"> </a>
  160.                                 <a href="article.php?id='.$cate['id'].'">'.$cate['title'].'</a>
  161.                             </div>
  162.                         </li>';
  163.     }
  164. }
  165. //网页评论
  166. public function comments($limit){
  167.         $limit='limit '.$limit;
  169.     $sql = 'select `*` from `article` '. $limit;
  170.     $stmt = $this->pdo->prepare($sql);
  171.     $stmt->execute();
  172.     $article = $stmt->fetchAll(PDO::FETCH_ASSOC);
  173.     $i=1;
  174.     foreach ($article as $cate) {
  176.     echo    '<li>
  177.              <span class="hot">'.$i++.'</span>
  178.              <a href="article.php?id='.$cate['id'].'">'.$cate['title'].'</a>
  179.              </li>';
  180.     }
  181.     }
  182. }
  183. //实例化查询对象
  184. $selHead=new  select();
  185. ?>
  186. <!DOCTYPE html>
  187. <html lang="en">
  188. <head>
  189.     <meta charset="UTF-8">
  190.     <link rel="stylesheet" href="static/css/style.css?ddd"  media="all">
  191.     <link rel="stylesheet" href="static/css/home.css?ddd"  media="all">
  192.     <script src="static/js/jquery3.4.1.js"></script>
  193.      <title>php中文网后台</title>
  194. </head>
  195. <body>
  196. <div class="home-top phpcn-clear">
  197.     <ul class='phpcn-col-md10'>
  198.         <li ><a href="index.php">首页</a></li>
  199.         <?php $selHead->selHead(); ?>
  200.     </ul>
  201.     <dl class='phpcn-col-md2'>
  202.         <dd>
  204.             <a href="">免费注册</a>
  205.         </dd>
  206.         <dd>
  207.             <a href=""><i class="phpcn-icon phpcn-icon-huiyuan2"></i>登陆</a>
  208.         </dd>
  209.     </dl>
  210. </div>

index首页

  1. <?php
  2. include __DIR__ . "/head.php";
  5. ?>
  7. <!DOCTYPE html>
  10. <!--头部结束--->
  11. <!--LOGO与搜索--->
  12. <div class="phpcn-main  phpcn-mt-60">
  13.     <div class="logo-top phpcn-clear">
  14.         <div class="phpcn-col-md4">
  15.             <a href="">
  16.                 <img src="static/images/logo.png">
  17.             </a>
  18.         </div>
  19.         <div class="phpcn-col-md4">
  20.             <input type="" name="">
  21.             <i class="phpcn-icon phpcn-icon-jinduchaxun"></i>
  22.         </div>
  23.         <div class="phpcn-col-md4">
  24.             <dl class="erwei-code">
  25.                 <dd>
  26.                     <a href=""><i class="phpcn-icon phpcn-icon-huiyuan1"></i></a>
  27.                 </dd>
  28.                 <dd>
  29.                     <a href=""><i class="phpcn-icon phpcn-icon-danmu1"></i></a>
  30.                 </dd>
  31.                 <dd>
  32.                     <a href=""><i class="phpcn-icon phpcn-icon-duoxuankuang1"></i></a>
  33.                 </dd>
  34.                 <dd>
  35.                     <a href=""><i class="phpcn-icon phpcn-icon-jishufuwu"></i></a>
  36.                 </dd>
  37.                 <dd>
  38.                     <a href=""><i class="phpcn-icon phpcn-icon-peiwangyindao"></i></a>
  39.                 </dd>
  40.                 <dd>
  41.                     <a href=""><i class="phpcn-icon phpcn-icon-wenjianjia"></i></a>
  42.                 </dd>
  43.                 <dd>
  44.                     <a href=""><i class="phpcn-icon phpcn-icon-huiyuan1"></i></a>
  45.                 </dd>
  47.             </dl>
  48.         </div>
  49.     </div>
  50.     <!--LOGO与搜索结束--->
  51.     <!--菜单 开始 --->
  52.     <div class="menu phpcn-mt-30 phpcn-clear">
  53.         <div >
  54.             <dl class="phpcn-col-md3">
  55.                 <dt>
  56.                     <i class="phpcn-icon phpcn-icon-gongdan"></i>
  57.                     <span>资讯看学</span>
  58.                 </dt>
  59.                 <dd>
  60.                     <a href="">器材</a>
  62.                     <a href="">大师</a>
  64.                     <a href="">学院</a>
  66.                     <a href="">影赛</a>
  68.                     <a href="">器材</a>
  70.                     <a href="">大师</a>
  72.                     <a href="">学院</a>
  74.                     <a href="">影赛</a>
  75.                 </dd>
  76.             </dl>
  77.             <dl class="phpcn-col-md2">
  78.                 <dt>
  79.                     <i class="phpcn-icon phpcn-icon-renwujincheng"></i>
  80.                     <span>资讯看学</span>
  82.                 </dt>
  83.                 <dd>
  84.                     <a href="">器材</a>
  86.                     <a href="">大师</a>
  88.                     <a href="">学院</a>
  90.                     <a href="">影赛</a>
  91.                 </dd>
  92.             </dl>
  93.             <dl class="phpcn-col-md2">
  94.                 <dt>
  95.                     <i class="phpcn-icon phpcn-icon-gongdan"></i>
  96.                     <span>资讯看学</span>
  97.                 </dt>
  98.                 <dd>
  99.                     <a href="">器材</a>
  101.                     <a href="">大师</a>
  103.                     <a href="">学院</a>
  105.                     <a href="">影赛</a>
  106.                 </dd>
  107.             </dl>
  108.             <dl class="phpcn-col-md4">
  109.                 <dt>
  110.                     <i class="phpcn-icon phpcn-icon-DOC"></i>
  111.                     <span>资讯看学</span>
  112.                 </dt>
  113.                 <dd>
  114.                     <a href="">器材</a>
  116.                     <a href="">大师</a>
  118.                     <a href="">学院</a>
  120.                     <a href="">影赛</a>
  122.                     <a href="">器材</a>
  124.                     <a href="">大师</a>
  126.                     <a href="">学院</a>
  128.                     <a href="">影赛</a>
  130.                     <a href="">器材</a>
  132.                     <a href="">大师</a>
  134.                     <a href="">学院</a>
  136.                     <a href="">影赛</a>
  137.                 </dd>
  139.             </dl>
  140.         </div>
  141.     </div>
  142.     <!--菜单 结束--->
  143.     <!--幻灯片-->
  144.     <div class="phpcn-clear banner phpcn-mt-30 ">
  146.         <div class="phpcn-col-md9 " >
  147.             <div class="pi">
  148.                 <div class="pike">
  149. <!--                    //    换灯图片-->
  150.                     <?php $selHead->selPic(); ?>
  154.                 </div>
  155.                 <div class="pike_prev"></div>
  157.                 <div class="pike_next"></div>
  159.                 <div class="pike_spot"></div>
  160.             </div>
  164.         </div>
  166.         <div class="phpcn-col-md3" >
  167.             <img class="phpcn-r banner-right" src="static/images/banner-right.jpg">
  168.         </div>
  169.     </div>
  170.     <!--幻灯片结束-->
  171.     <!--新聞開始-->
  172.     <div class="home-news phpcn-mt-30">
  173.         <div class="title phpcn-mb-20">
  174.             <a href="" class="tit">新闻资讯</a>
  175.             <span class="phpcn-r"><a href="">更多</a></span>
  176.         </div>
  177.         <div class="phpcn-clear ">
  178.             <div class="phpcn-col-md4">
  179.                 <img src="static/images/news.jpg">
  180.             </div>
  181.             <div class="phpcn-col-md4">
  182. <!--                查询首页h3红色标题图片-->
  183.                 <?php $selHead->selTitle(); ?>
  185.                 <ul>
  186. <!--                    //首页新闻资讯-->
  187. <!--                    显示4行-->
  188.                     <?php     $selHead->selNew(4);                ?>
  192.                 </ul>
  193.             </div>
  194.             <div class="phpcn-col-md4">
  195.                 <!--                查询首页h3红色标题图片-->
  196.                 <?php $selHead->selTitle(); ?>
  197.                 <ul>
  198.                     <!--                    //首页新闻资讯-->
  199.                     <!--                    显示4行-->
  200.                     <?php     $selHead->selNew(4);                ?>
  202.                 </ul>
  203.             </div>
  204.         </div>
  205.         <div class="phpcn-clear phpcn-mt-30">
  206.             <div class="phpcn-col-md4">
  207.                 <dl class="pic">
  208.                     <!--                    //首页新闻频道图片-->
  210.                     <?php        $selHead->selImage(2);             ?>
  214.                 </dl>
  217.             </div>
  218.             <div class="phpcn-col-md4">
  220.                 <ul>
  221.                     <!--                    显示5行-->
  222.                     <?php     $selHead->selNew(5);                ?>
  225.                 </ul>
  226.             </div>
  227.             <div class="phpcn-col-md4">
  229.                 <ul>
  230.                     <!--                    显示5行-->
  231.                     <?php     $selHead->selNew(5);                ?>
  233.                 </ul>
  234.             </div>
  235.         </div>
  236.     </div>
  237.     <!--新聞開始結束-->
  239. </div>
  240. <!--LOGO与搜索结束--->
  241. <!--图片开始-->
  242. <div class="phpcn-clear phpcn-mt-30" style='background:#eee;'>
  243.     <div class="phpcn-main">
  245.         <div class="phpcn-clear home-img">
  246.             <div class="title-header phpcn-mb-40 phpcn-mt-20"><span>图片专区</span></div>
  247.             <div class=" phpcn-clear phpcn-col-space15">
  249.                 <div class="phpcn-col-md4">
  251.                     <div class="bg">
  252.                         <div class="title "><a href="">美女</a> <span>纵观摄影艺术</span></div>
  253.                         <ul class="phpcn-clear">
  254. <!--                            根据传递的参数不同调用不同的数据-->
  255.                             <?php     $selHead->imageChan(0,4);                ?>
  256.                         </ul>
  257.                     </div>
  258.                 </div>
  259.                 <div class="phpcn-col-md4">
  261.                     <div class="bg">
  262.                         <div class="title "><a href="">美女</a> <span>纵观摄影艺术</span></div>
  263.                         <ul class="phpcn-clear">
  264.                             <!-- 根据传递的参数不同调用不同的数据-->
  265.                             <?php     $selHead->imageChan(0,4);                ?>
  266.                         </ul>
  267.                     </div>
  268.                 </div>
  269.                 <div class="phpcn-col-md4">
  271.                     <div class="bg">
  272.                         <div class="title "><a href="">美女</a> <span>纵观摄影艺术</span></div>
  273.                         <ul class="phpcn-clear">
  274.                             <!--根据传递的参数不同调用不同的数据-->
  275.                             <?php     $selHead->imageChan(0,4);                ?>
  276.                         </ul>
  277.                     </div>
  278.                 </div>
  279.             </div>
  280.         </div>
  281.         <!--图片开始结束-->
  282.         <!--商城开始-->
  283.         <div class="phpcn-clear">
  284.             <div class="title-header phpcn-mb-40 phpcn-mt-20"><span>二手交易</span></div>
  285.                 <div class="home-shop phpcn-clear">
  286.                     <div class="title "><a href="">抢好货</a> <span>0低价、便捷、安全、快速</span></div>
  287.                     <div class='head-tags'>
  288.                         <span>热门分类：</span>
  289.                         <a href="">美女写真</a>
  290.                         <a href="">日本美女</a>
  291.                         <a href="">美国美女</a>
  292.                         <a href="">国内美女</a>
  293.                         <a href="">AV美女</a>
  294.                     </div>
  295.                     <div class="phpcn-clear">
  296.                         <div class="phpcn-col-md8">
  297.                             <dl>
  298. <!--                                商品调用-->
  299.                                 <?php     $selHead->selShop();                ?>
  300.                             </dl>
  301.                         </div>
  302.                         <div class="phpcn-col-md4 home-ad">
  303.                                 <ul class="phpcn-clear">
  304.                                     <li class="phpcn-col-md6">
  305.                                         <a href="">
  306.                                             <img src="static/images/ad/1.png">
  307.                                         </a>
  308.                                     </li>
  309.                                     <li class="phpcn-col-md6">
  310.                                         <a href="">
  311.                                             <img src="static/images/ad/2.png">
  312.                                         </a>
  313.                                     </li>
  314.                                     <li class="phpcn-col-md6">
  315.                                         <a href="">
  316.                                             <img src="static/images/ad/3.png">
  317.                                         </a>
  318.                                     </li>
  319.                                     <li class="phpcn-col-md6">
  320.                                         <a href="">
  321.                                             <img src="static/images/ad/4.png">
  322.                                         </a>
  323.                                     </li>
  324.                                 </ul>
  325.                                 <div class="phpcn-mt-10">
  326.                                     <a href="">
  327.                                             <img src="static/images/ad/image.png" class="slogan">
  328.                                         </a>
  329.                                 </div>
  330.                                 <div class="phpcn-mt-10" >
  331.                                     <a href="">
  332.                                             <img src="static/images/ad/ad2.jpg" class="slogan ">
  333.                                         </a>
  334.                                 </div>
  335.                         </div>
  336.                     </div>
  337.                 </div>
  338.         </div>
  339.         <!--商城开始结束-->
  340.     </div>
  341. </div>
  342. <!--友情链接 -->
  343. <div class="phpcn-clear phpcn-mt-30">
  344.         <div class="phpcn-main links">
  345.             <div class="title-header phpcn-mb-40 phpcn-mt-20"><span>合作网站</span></div>
  346.             <div>
  347.                 <a href="">php中文网</a>
  348.                 <a href="">百度中国</a>
  349.                 <a href="">phpstudy</a>
  350.                 <a href="">php中文网</a>
  351.                 <a href="">百度中国</a>
  352.                 <a href="">phpstudy</a>
  353.                 <a href="">php中文网</a>
  354.                 <a href="">百度中国</a>
  355.                 <a href="">phpstudy</a>
  356.                 <a href="">php中文网</a>
  357.                 <a href="">百度中国</a>
  358.                 <a href="">phpstudy</a>
  359.             <a href="">php中文网</a>
  360.                 <a href="">百度中国</a>
  361.                 <a href="">phpstudy</a>
  362.                 <a href="">php中文网</a>
  363.                 <a href="">百度中国</a>
  364.                 <a href="">phpstudy</a>
  365.                 <a href="">php中文网</a>
  366.                 <a href="">百度中国</a>
  367.                 <a href="">phpstudy</a>
  368.                 <a href="">php中文网</a>
  369.                 <a href="">百度中国</a>
  370.             <a href="">phpstudy</a>
  371.             </div>
  372.     </div>
  373. </div>
  374. <!--友情链接结束-->
  375. <!--网站底部-->
  376. <?php  include __DIR__ . '/foot.php'; ?>
  377. <!--网站底部-->
  378. <script src="static/js/pin.js"></script>
  379. <script>
  381.    var myPi = new Xpcms(".pi", {
  382.     type: 1, // 轮播的类型(1渐隐)
  383.                automatic: true, //是否自动轮播 (默认false)
  384.                autoplay: 2000, //自动轮播毫秒 (默认3000)
  385.                hover: true, //鼠标悬停轮播 (默认false)
  386.                arrowColor: "yellow", //箭头颜色 (默认绿色)
  387.                arrowBackgroundType: 2, //箭头背景类型 (1: 方形, 2:圆形)
  388.                arrowBackground: 1, //箭头背景色 (1:白色,2:黑色, 默认:无颜色)
  389.                arrowTransparent: 0.2, //箭头背景透明度 (默认: 0.5)
  390.                spotColor: "white",//圆点颜色 (默认: 白色)
  391.                spotType: 1, //圆点的形状 (默认: 圆形, 1:圆形, 2.矩形)
  392.                spotSelectColor: "red", //圆点选中颜色 (默认绿色)
  393.                spotTransparent: 0.8, //圆点透明度 (默认0.8)
  394.                mousewheel: true, //是否开启鼠标滚动轮播(默认false)
  395.                drag: false, //是否开启鼠标拖动 (默认为: true, 如不需要拖动设置false即可)
  396.                loop: true, //是否循环轮播 (默认为: false)
  397.        });
  399. var progress = $('.phpcn-progress .phpcn-row');
  401. jQuery.each(progress, function(){
  402.     //console.log($(this).find('.phpcn-progress-percent').attr('class'));
  404.     $(this).find('.phpcn-progress-bor').css('width',$(this).find('.phpcn-progress-percent').html());
  405. });
  406. $('.phpcn-dl dl').last().css('border-bottom','1px solid #C9C9C9');
  407.     $('#admin-select').mouseover(function(){
  408.         //alert($(this).find('dl').css('display'));
  411.         $(this).find('dl').show();
  413.     });
  414.     $('#admin-select').find('dl').mouseout(function(){
  415.         $(this).hide();
  416.     });
  417. $('.phpcn-button').mouseover(function(){
  419.     $(this).addClass('phpcn-button-hover');
  421. });$('.phpcn-button').mouseout(function(){
  422.     $(this).removeClass('phpcn-button-hover');
  423. });
  424.     $('.tree').css('min-height',$(document).height()-160);
  425.     $('.tree').find('li').click(function(){
  426.         //alert($('.tree').find('dl').css('display'));
  427.         //$('.tree').find('dl').hide();
  428.         if($(this).find('dl').css('display')=='none'){
  430.             $(this).find('i').removeClass('phpcn-icon-down');
  431.             $(this).find('i').addClass('phpcn-icon-up');
  432.             $('.tree').find('dl').hide();
  433.             $(this).find('dl').show();
  434.         }else{
  436.             $(this).find('i').removeClass('phpcn-icon-up');
  437.             $(this).find('i').addClass('phpcn-icon-down');
  438.             $(this).find('dl').hide();
  439.         }
  442.     });
  443. //table窗口
  444.     $('.tree').find('a').click(function(){
  445.         //alert($('.tree').find('dl').css('display'));
  446.         //$('.tree').find('dl').hide();
  448.         var tabs=$('.phpcn-tab-title a');
  449.         tree=$(this);
  450.         jQuery.each(tabs, function(){
  451.             $('.phpcn-tab-title li').removeClass('on');
  452.             if($(this).attr('data')!=tree.attr('data')){
  453.                 var tabs=$('.phpcn-tab-title ul');
  454.                 $(this).removeClass('on');
  455.                 var html='<li class="on"><i></i><dd>'+tree.html()+' <a class="phpcn-icon phpcn-icon-guanbi" data='+tree.attr('data')+' href="javascript:;"></a></dd></li>';
  457.                 tabs.append(html);
  458.                 return false;
  459.             }
  460.         });
  461.     });
  462. //table窗口
  463.     $('.phpcn-tab-title').find('.phpcn-icon-guanbi').click(function(){
  464.         alert();
  465.         $(this).parent().parent('li').remove();
  466.     });
  467. $('.phpcn-tab-title').find('li').mouseover(function(){
  468.     var i=$(this).find('i');
  469.     $('.phpcn-tab-title').find('li').find('i').css('width','0%');
  470.     if($(this).css('background')!='#f6f6f6'){
  471.         $('.phpcn-tab-title').find('li').css('background','none');
  472.         $(this).css('background','#f6f6f6');
  474.     }
  475.     if(i.css('width')!='100%'){
  476.         i.css('width','100%');
  477.     }
  478. });
  479. </script>
  480. </body>
  481. </html>

商品封面页面

  1. <?php
  2. include __DIR__ . "/head.php";
  3. class shop extends select
  4. {
  5.     public function  shopList($limit=8){
  6.         //        变量$limit控制显示的行数默认10行
  7.         $limit='limit '.$limit;
  8. //        图片路径
  9. $imagePath='static/images/shop/';
  10.         $sql = 'select `*` from `shop` '. $limit;
  11.         $stmt = $this->pdo->prepare($sql);
  12.         $stmt->execute();
  13.         $article = $stmt->fetchAll(PDO::FETCH_ASSOC);
  15.         foreach ($article as $cate)
  16.         {
  17.             echo '<dd class="phpcn-col-md2">
  18.                             <a href="shop-content.php?id='.$cate['id'].'"><img src="'.$imagePath.$cate['img'].'"></a>
  19.                             <a href="shop-content.php?id='.$cate['id'].'">'.$cate['title'].'</a>
  20.                             <a href="" class="phpcn-mt-10">
  21.                                 <span class="price">'.$cate['price'].'</span>
  22.                                 <span class="tags">美女</span>
  23.                             </a>
  24.                         </dd>' ;
  25.         }
  26.     }
  27. }
  28. $shop1=new shop();
  29. ?>
  30. <div class="phpcn-clear category phpcn-p-20">
  31.     <div class="phpcn-main">
  32.         <div class="phpcn-col-md12 search">
  33.             <div class="phpcn-col-md3">
  34.                 <a href="">
  35.                     <img src="static/images/logo.png" class="logo">
  36.                 </a>
  37.             </div>
  38.             <div class="phpcn-col-md6">
  39.                 <ul>
  40.                     <li>
  41.                         <a href="" class="on">商品</a>
  42.                         <a href="">服务商</a>
  43.                     </li>
  44.                     <li class="phpcn-clear">
  45.                         <input type="" name=""><button class="phpcn-button s-btn">搜索</button>
  46.                     </li>
  47.                 </ul>
  49.             </div>
  50.             <div class="phpcn-col-md3">
  51.                 <button class="phpcn-button phpcn-bg-red">免费入驻</button>
  52.             </div>
  53.         </div>
  54.         <div class="phpcn-col-md12 phpcn-mt-60">
  55.             <div class="phpcn-col-md3 all-cat">
  56.                 所有产品分类 <i class="phpcn-icon phpcn-icon-liebiao phpcn-r"></i>
  57.             </div>
  58.             <div class="phpcn-col-md9">
  59.                 <div class="cat-nav">
  60.                     <a href="" class="on">首页</a>
  61.                     <a href="">3c数码</a>
  62.                     <a href="">生活用品 <span class='phpcn-badge'>新</span></a>
  63.                     <a href="">名字名画</a>
  64.                 </div>
  65.             </div>
  66.         </div>
  67.         <div class="phpcn-col-md3 cat-left">
  68.             <ul>
  69.                 <li>
  70.                     <h2><a href="">企业软件</a></h2>
  71.                     <span>
  72.                         <a href="">微信推广</a>
  73.                         <a href=""> QQ推广 </a>
  74.                         <a href=""> 公众号推广 </a>
  75.                         <a href=""> 淘客软件 </a>
  76.                         <a href=""> 网络推广</a>
  77.                         <a href=""> SEO软件</a>
  78.                     </span>
  79.                 </li>
  80.                 <li>
  81.                     <h2><a href="">企业软件</a></h2>
  82.                     <span>
  83.                         <a href="">微信推广</a>
  84.                         <a href=""> QQ推广 </a>
  85.                         <a href=""> 公众号推广 </a>
  86.                         <a href=""> 淘客软件 </a>
  87.                         <a href=""> 网络推广</a>
  88.                         <a href=""> SEO软件</a>
  89.                     </span>
  90.                 </li>
  91.                 <li>
  92.                     <h2><a href="">企业软件</a></h2>
  93.                     <span>
  94.                         <a href="">微信推广</a>
  95.                         <a href=""> QQ推广 </a>
  96.                         <a href=""> 公众号推广 </a>
  97.                         <a href=""> 淘客软件 </a>
  98.                         <a href=""> 网络推广</a>
  99.                         <a href=""> SEO软件</a>
  100.                     </span>
  101.                 </li>
  102.             </ul>
  103.         </div>
  104.         <div class="phpcn-col-md9">
  105.             <div class="shop-banner">
  106.                 <img src="static/images/4.jpg">
  107.             </div>
  108.         </div>
  109.     </div>
  110. </div>
  111. <div class="phpcn-main">
  112.     <!--商城开始-->
  113.     <div class="phpcn-clear">
  114.         <div class="title-header phpcn-mb-40 phpcn-mt-20"><span>名画</span></div>
  115.         <div class="home-shop phpcn-clear">
  116.             <div class="title "><a href="">抢好货</a> <span>0低价、便捷、安全、快速</span></div>
  117.             <div class='head-tags'>
  118.                 <span>热门分类：</span>
  119.                 <a href="">美女写真</a>
  120.                 <a href="">日本美女</a>
  121.                 <a href="">美国美女</a>
  122.                 <a href="">国内美女</a>
  123.                 <a href="">AV美女</a>
  124.             </div>
  125.             <div class="phpcn-clear">
  126.                 <div class="phpcn-col-md8">
  127.                     <dl>
  128.                        <?php   $shop1->shopList(8);?>
  129.                    </dl>
  130.                 </div>
  131.                 <div class="phpcn-col-md4 home-ad">
  132.                     <ul class="phpcn-clear">
  133.                         <li class="phpcn-col-md6">
  134.                             <a href="">
  135.                                 <img src="static/images/ad/1.png">
  136.                             </a>
  137.                         </li>
  138.                         <li class="phpcn-col-md6">
  139.                             <a href="">
  140.                                 <img src="static/images/ad/2.png">
  141.                             </a>
  142.                         </li>
  143.                         <li class="phpcn-col-md6">
  144.                             <a href="">
  145.                                 <img src="static/images/ad/3.png">
  146.                             </a>
  147.                         </li>
  148.                         <li class="phpcn-col-md6">
  149.                             <a href="">
  150.                                 <img src="static/images/ad/4.png">
  151.                             </a>
  152.                         </li>
  153.                     </ul>
  154.                     <div class="phpcn-mt-10">
  155.                         <a href="">
  156.                             <img src="static/images/ad/image.png" class="slogan">
  157.                         </a>
  158.                     </div>
  159.                     <div class="phpcn-mt-10" >
  160.                         <a href="">
  161.                             <img src="static/images/ad/ad2.jpg" class="slogan ">
  162.                         </a>
  163.                     </div>
  164.                 </div>
  165.             </div>
  166.         </div>
  167.         <!--商品分类-->
  168.         <div class="title-header phpcn-mb-40 phpcn-mt-20"><span>真写</span></div>
  169.         <div class="home-shop phpcn-clear">
  170.             <div class="title "><a href="">抢好货</a> <span>0低价、便捷、安全、快速</span></div>
  171.             <div class='head-tags'>
  172.                 <span>热门分类：</span>
  173.                 <a href="">美女写真</a>
  174.                 <a href="">日本美女</a>
  175.                 <a href="">美国美女</a>
  176.                 <a href="">国内美女</a>
  177.                 <a href="">AV美女</a>
  178.             </div>
  179.             <div class="phpcn-clear">
  180.                 <div class="phpcn-col-md12">
  181.                     <dl>
  182.                         <?php   $shop1->shopList(12);?>
  183.                     </dl>
  184.                 </div>
  185.             </div>
  186.         </div>
  187.         <!--商品分类结束--><!--商品分类-->
  188.         <div class="title-header phpcn-mb-40 phpcn-mt-20"><span>真写</span></div>
  189.         <div class="home-shop phpcn-clear">
  190.             <div class="title "><a href="">抢好货</a> <span>0低价、便捷、安全、快速</span></div>
  191.             <div class='head-tags'>
  192.                 <span>热门分类：</span>
  193.                 <a href="">美女写真</a>
  194.                 <a href="">日本美女</a>
  195.                 <a href="">美国美女</a>
  196.                 <a href="">国内美女</a>
  197.                 <a href="">AV美女</a>
  198.             </div>
  199.             <div class="phpcn-clear">
  200.                 <div class="phpcn-col-md12">
  201.                     <dl>
  202.                        <?php         $shop1->shopList(12);?>
  203.                     </dl>
  204.                 </div>
  205.             </div>
  206.         </div>
  207.         <!--商品分类结束-->
  208.     </div>
  209.     <!--商城开始结束-->
  210. </div>
  211. </div>
  212. </div>
  213. <!--网站底部-->
  214. <?php  include __DIR__ . '/foot.php'; ?>
  215. <!--网站底部-->
  216. <script src="static/js/pin.js"></script>
  217. <script>
  218.     var myPi = new Pike(".pi", {
  219.         type: 1, // 轮播的类型(1渐隐)
  220.         automatic: true, //是否自动轮播 (默认false)
  221.         autoplay: 2000, //自动轮播毫秒 (默认3000)
  222.         hover: true, //鼠标悬停轮播 (默认false)
  223.         arrowColor: "yellow", //箭头颜色 (默认绿色)
  224.         arrowBackgroundType: 2, //箭头背景类型 (1: 方形, 2:圆形)
  225.         arrowBackground: 1, //箭头背景色 (1:白色,2:黑色, 默认:无颜色)
  226.         arrowTransparent: 0.2, //箭头背景透明度 (默认: 0.5)
  227.         spotColor: "white",//圆点颜色 (默认: 白色)
  228.         spotType: 1, //圆点的形状 (默认: 圆形, 1:圆形, 2.矩形)
  229.         spotSelectColor: "red", //圆点选中颜色 (默认绿色)
  230.         spotTransparent: 0.8, //圆点透明度 (默认0.8)
  231.         mousewheel: true, //是否开启鼠标滚动轮播(默认false)
  232.         drag: false, //是否开启鼠标拖动 (默认为: true, 如不需要拖动设置false即可)
  233.         loop: true, //是否循环轮播 (默认为: false)
  234.     });
  235.     var progress = $('.phpcn-progress .phpcn-row');
  237.     jQuery.each(progress, function(){
  238.         //console.log($(this).find('.phpcn-progress-percent').attr('class'));
  240.         $(this).find('.phpcn-progress-bor').css('width',$(this).find('.phpcn-progress-percent').html());
  241.     });
  242.     $('.phpcn-dl dl').last().css('border-bottom','1px solid #C9C9C9');
  244.     $('#admin-select').mouseover(function(){
  245.         //alert($(this).find('dl').css('display'));
  247.        $(this).find('dl').show();
  248.     });
  249.     $('#admin-select').find('dl').mouseout(function(){
  251.         $(this).hide();
  253.     });
  254.     $('.phpcn-button').mouseover(function(){
  256.         $(this).addClass('phpcn-button-hover');
  258.     });$('.phpcn-button').mouseout(function(){
  260.         $(this).removeClass('phpcn-button-hover');
  262.     });
  265.     $('.tree').css('min-height',$(document).height()-160);
  266.     $('.tree').find('li').click(function(){
  267.         //alert($('.tree').find('dl').css('display'));
  268.         //$('.tree').find('dl').hide();
  269.         if($(this).find('dl').css('display')=='none'){
  271.             $(this).find('i').removeClass('phpcn-icon-down');
  272.             $(this).find('i').addClass('phpcn-icon-up');
  273.             $('.tree').find('dl').hide();
  274.             $(this).find('dl').show();
  275.         }else{
  277.             $(this).find('i').removeClass('phpcn-icon-up');
  278.             $(this).find('i').addClass('phpcn-icon-down');
  279.             $(this).find('dl').hide();
  280.         }
  283.     });
  284.     //table窗口
  285.     $('.tree').find('a').click(function(){
  286.         //alert($('.tree').find('dl').css('display'));
  287.         //$('.tree').find('dl').hide();
  289.         var tabs=$('.phpcn-tab-title a');
  290.         tree=$(this);
  291.         jQuery.each(tabs, function(){
  292.             $('.phpcn-tab-title li').removeClass('on');
  293.             if($(this).attr('data')!=tree.attr('data')){
  294.                 var tabs=$('.phpcn-tab-title ul');
  295.                 $(this).removeClass('on');
  296.                 var html='<li class="on"><i></i><dd>'+tree.html()+' <a class="phpcn-icon phpcn-icon-guanbi" data='+tree.attr('data')+' href="javascript:;"></a></dd></li>';
  298.                 tabs.append(html);
  299.                 return false;
  301.             }
  303.         });
  304.     });
  305.     //table窗口
  306.     $('.phpcn-tab-title').find('.phpcn-icon-guanbi').click(function(){
  307.         alert();
  308.         $(this).parent().parent('li').remove();
  310.     });
  311.     $('.phpcn-tab-title').find('li').mouseover(function(){
  312.         var i=$(this).find('i');
  313.         $('.phpcn-tab-title').find('li').find('i').css('width','0%');
  314.         if($(this).css('background')!='#f6f6f6'){
  315.             $('.phpcn-tab-title').find('li').css('background','none');
  316.             $(this).css('background','#f6f6f6');
  318.         }
  319.         if(i.css('width')!='100%'){
  320.             i.css('width','100%');
  322.         }
  323.     });
  326. </script>
  327. </body>
  328. </html>

商品详情页面

  1. <?php
  2. include __DIR__ . "/head.php";
  3. //接受url中专来的参数
  4. if (empty($_GET['id'])){
  5.     die('参数错误');
  6. }
  7. $a=$_GET['id'];
  8. class shop_content extends Sql_db
  9. {
  10.     public $title;
  11.     public $img;
  12.     public $time;
  13.     public $sel;
  14.     public $body;
  15.     public $price;
  16.        public $imgPath='static/images/shop/';
  17.     public function __construct()
  18.     {
  19. //        链接数据库
  20.         $this->pdo= parent::conect(DB_HOST,DB_NAME,DB_USER,DB_PASSWORD);
  21.     }
  22.     public function shopContent($a=1){
  23.         $a='`id`='.$a;
  24.         $sql = 'select `*` from `shop` where '.$a;
  25.         $stmt = $this->pdo->prepare($sql);
  26.         $stmt->execute();
  27.         $article = $stmt->fetchAll(PDO::FETCH_ASSOC);
  28.         foreach ($article as $cate){
  29.             $this->title=$cate['title'];
  30.             $this->time=$cate['times'];
  31.             $this->sel=$cate['sel'];
  32.             $this->body=$cate['body'];
  33.             $this->price=$cate['price'];
  34.             $this->img=$cate['img'];
  35.         }
  36.     }
  37. //热销商品
  38. public  function hot($limit){
  39.         $limit='limit '.$limit;
  40.     $sql = 'select `*` from `shop`  '.$limit;
  41.     $stmt = $this->pdo->prepare($sql);
  42.     $stmt->execute();
  43.     $article = $stmt->fetchAll(PDO::FETCH_ASSOC);
  44.     foreach ($article as $cate){
  45.        echo  '<li><a href="shop-content.php?id='.$cate['id'].'" ><div class="phpcn-ps-r">  <img src="static/images/shop/'.$cate['img'].'">
  46.                                 <h3>'.$cate['title'].'</span></h3></div><div class="attribute">
  47.     <span  class="phpcn-l">热销11</span>
  48.     <span class="phpcn-r">'.$cate['price'].'</span>
  49. </div>
  50. </a>
  51. </li>';
  52.     }
  53. }
  54. }
  55. $shop=new shop_content();
  56. $shop->shopContent($a);
  57. ?>
  58. <div class="phpcn-clear category phpcn-p-20 phpcn-bg-fff" >
  59.     <div class="phpcn-main ">
  60.         <div class="phpcn-col-md12 search ">
  61.             <div class="phpcn-col-md3">
  62.                 <a href="">
  63.                     <img src="static/images/logo.png" class="logo">
  64.                 </a>
  65.             </div>
  66.             <div class="phpcn-col-md6">
  67.                 <ul>
  68.                     <li>
  69.                         <a href="" class="on">商品</a>
  70.                         <a href="">服务商</a>
  71.                     </li>
  72.                     <li class="phpcn-clear">
  73.                         <input type="" name=""><button class="phpcn-button s-btn">搜索</button>
  74.                     </li>
  75.                 </ul>
  76.             </div>
  77.             <div class="phpcn-col-md3">
  78.                 <button class="phpcn-button phpcn-bg-red">免费入驻</button>
  79.             </div>
  80.         </div>
  81.         <div class="phpcn-col-md12 phpcn-mt-60 ">
  82.             <div class="phpcn-col-md3 all-cat borb">
  83.                 所有产品分类 <i class="phpcn-icon phpcn-icon-liebiao phpcn-r"></i>
  84.             </div>
  85.             <div class="phpcn-col-md9 ">
  86.                 <div class="cat-nav borb">
  87.                     <a href="" class="on">首页</a>
  88.                     <a href="">3c数码</a>
  89.                     <a href="">生活用品 <span class='phpcn-badge'>新</span></a>
  90.                     <a href="">名字名画</a>
  91.                 </div>
  92.             </div>
  93.         </div>
  94.     </div>
  95. </div>
  96. <div class="phpcn-clear phpcn-mt-20">
  97.     <div class="phpcn-main  phpcn-bg-fff ">
  98.         <!--商品详情-->
  99.         <div class="shop phpcn-p-20">
  100.             <div class="path phpcn-clear">
  101.                 <a href="">首页</a>
  102.                 <span>->></span>
  103.                 <a href="">3C数码</a>
  104.                 <span>->></span>
  105.                 <a href="">笔记本电脑</a>
  106.                 <span>->></span>
  107.             </div>
  108.             <div class="detail phpcn-clear phpcn-mt-30">
  109.                 <div class="phpcn-col-md4">
  110.                     <img src="<?php echo $shop->imgPath.$shop->img;?>" class="buy-img">
  111.                 </div>
  112.                 <div class="phpcn-col-md8">
  113.                     <h1><?php  echo $shop->title; ?></h1>
  114.                     <div class="price">
  115.                         <span>本站特惠</span><strong >￥<?php  echo  $shop->price; ?></strong>
  116.                     </div>
  117.                     <div class="buy-lieval">
  118.                         <ul>
  119.                             <li class="br">销量：<span><?php echo $shop->sel; ?></span></li>
  120.                             <li class="br">累积评价:<span>0</span></li>
  121.                             <li>好评率：<span>100%</span></li>
  122.                         </ul>
  123.                     </div>
  124.                     <div class="buy-nums phpcn-clear">
  125.                         <ul>
  126.                             <li>购买数量</li>
  127.                             <li class="phpcn-ps-r">
  128.                                 <input type="text" name="" id="quantity" value="1" size="3" maxlength="6" class="fl" style="border-radius:0;">
  129.                                 <i class="phpcn-icon phpcn-icon-up"></i>
  130.                                 <i class="phpcn-icon phpcn-icon-down"></i>
  131.                             </li>
  132.                         </ul>
  133.                     </div>
  134.                     <div class="buy-btn phpcn-clear phpcn-mt-20">
  135.                         <button class="phpcn-button phpcn-bg-red">立即购买</button>
  136.                         <button class="phpcn-button "><i class="phpcn-icon phpcn-icon-icon_tianjia"></i>加入购物车</button>
  137.                     </div>
  139.                     <div class="buy-guarantee phpcn-clear phpcn-mt-20">
  140.                         <ul>
  141.                             <li> <i class="phpcn-icon phpcn-icon-zhanghaoquanxianguanli"></i> 本站保障</li>
  142.                             <li>  <i class="phpcn-icon phpcn-icon-icon_safety"></i>企业认证</li>
  143.                             <li><i class="phpcn-icon phpcn-icon-tianshenpi"></i>退款承诺</li>
  144.                             <li><i class="phpcn-icon phpcn-icon-kuaisubianpai"></i>免费换货</li>
  145.                         </ul>
  146.                     </div>
  147.                 </div>
  148.             </div>
  149.         </div>
  150.         <!--商品详情结束-->
  151.     </div>
  152. </div>
  153. <div class="phpcn-clear phpcn-mt-20">
  154.     <div class="phpcn-main  shop-conten">
  155.         <div class="phpcn-col-md2  ">
  156.             <div class="categorymenu phpcn-clear cat-width">
  157.                 <ul>
  158.                     <li class="phpcn-col-md6"><a href="">商品详情</a></li>
  159.                     <li class="phpcn-col-md6"><a href="">案例/演示</a></li>
  160.                 </ul>
  161.             </div>
  162.             <div class="shop-left-list">
  163.                 <ul>
  164. <!--                    根据传递的参数不同可调用不用的商品-->
  165.                    <?php    $shop->hot(5); ?>
  166.                         </ul>
  168.             </div>
  169.         </div>
  170.         <div class="phpcn-col-md10  ">
  171.             <div class="content ">
  172.                 <div class="categorymenu cat-nav-width">
  173.                     <ul class="phpcn-clear">
  174.                         <li class="phpcn-col-md1"><a href="" class="on">商品详情</a></li>
  175.                         <li class="phpcn-col-md1"><a href="">案例/演示</a></li>
  176.                         <li class="phpcn-col-md1"><a href="">常见问题</a></li>
  177.                         <li class="phpcn-col-md1"><a href="">累计评价</a></li>
  178.                         <li class="phpcn-col-md1"><a href="">产品咨询</a></li>
  179.                     </ul>
  180.                 </div>
  181.                 <article class="phpcn-clear">
  183.                     <?php echo $shop->body; ?>
  184.                 </article>
  185.                 <!--评论--->
  186.                 <div class="comment phpcn-mt-30 ">
  187.                     <div class="title phpcn-mb-30"><span>网页评论</span></div>
  188.                     <div class="phpcn-clear">
  189.                         <div class="phpcn-col-md1"><img class="user" src="static/images/user.png"> </div>
  190.                         <div class="phpcn-col-md11">
  191.                             <textarea>我来评论两句</textarea>
  192.                             <button class="phpcn-button phpcn-bg-red phpcn-button-hover phpcn-mt-10 phpcn-mb-10 phpcn-r">发表评论</button>
  193.                         </div>
  194.                     </div>
  195.                     <div class="title phpcn-mb-30"><span>最新评论</span></div>
  196.                     <div class="phpcn-clear">
  197.                         <div class="phpcn-clear border">
  198.                             <div class="phpcn-col-md1">
  199.                                 <img class="user" src="static/images/user.png">
  200.                             </div>
  201.                             <div class="phpcn-col-md11">
  202.                                 <ul class="phpcn-clear">
  203.                                     <li class="user-naem">
  204.                                         用户昵称
  205.                                     </li>
  206.                                     <li class="cont">留言内容</li>
  207.                                     <li>
  208.                                         <span>2019-08-08 14:46:05发表</span>
  209.                                         <span class="phpcn-r"><i class="phpcn-icon phpcn-icon-dianzan"></i> <a href="">回复 </a></span>
  210.                                     </li>
  211.                                 </ul>
  212.                             </div>
  213.                         </div>
  214.                         <div class="phpcn-clear border">
  215.                             <div class="phpcn-col-md1">
  216.                                 <img class="user" src="static/images/user.png">
  217.                             </div>
  218.                             <div class="phpcn-col-md11">
  219.                                 <ul class="phpcn-clear">
  220.                                     <li class="user-naem">
  221.                                         用户昵称
  222.                                     </li>
  223.                                     <li class="cont">留言内容</li>
  224.                                     <li>
  225.                                         <span>2019-08-08 14:46:05发表</span>
  226.                                         <span class="phpcn-r"><i class="phpcn-icon phpcn-icon-dianzan"></i> <a href="">回复 </a></span>
  227.                                     </li>
  228.                                 </ul>
  229.                             </div>
  230.                         </div>
  231.                         <div class="phpcn-clear border">
  232.                             <div class="phpcn-col-md1">
  233.                                 <img class="user" src="static/images/user.png">
  234.                             </div>
  235.                             <div class="phpcn-col-md11">
  236.                                 <ul class="phpcn-clear">
  237.                                     <li class="user-naem">
  238.                                         用户昵称
  239.                                     </li>
  240.                                     <li class="cont">留言内容</li>
  241.                                     <li>
  242.                                         <span>2019-08-08 14:46:05发表</span>
  243.                                         <span class="phpcn-r"><i class="phpcn-icon phpcn-icon-dianzan"></i> <a href="">回复 </a></span>
  244.                                     </li>
  245.                                 </ul>
  246.                             </div>
  247.                         </div>
  248.                     </div>
  249.                     <div class="phpcn-clear border">
  250.                         <div class="phpcn-col-md1">
  251.                             <img class="user" src="static/images/user.png">
  252.                         </div>
  253.                         <div class="phpcn-col-md11">
  254.                             <ul class="phpcn-clear">
  255.                                 <li class="user-naem">
  256.                                     用户昵称
  257.                                 </li>
  258.                                 <li class="cont">留言内容</li>
  259.                                 <li>
  260.                                     <span>2019-08-08 14:46:05发表</span>
  261.                                     <span class="phpcn-r"><i class="phpcn-icon phpcn-icon-dianzan"></i> <a href="">回复 </a></span>
  262.                                 </li>
  263.                             </ul>
  264.                         </div>
  265.                     </div>
  266.                 </div>
  267.                 <!--评论结束--->
  268.             </div>
  269.         </div>
  270.     </div>
  271. </div>
  272. <!--网站底部-->
  273. <?php  include __DIR__ . '/foot.php'; ?>
  274. <!--网站底部-->
  275. <script src="static/js/pin.js"></script>
  276. <script>
  278.     var myPi = new Pike(".pi", {
  279.         type: 1, // 轮播的类型(1渐隐)
  280.         automatic: true, //是否自动轮播 (默认false)
  281.         autoplay: 2000, //自动轮播毫秒 (默认3000)
  282.         hover: true, //鼠标悬停轮播 (默认false)
  283.         arrowColor: "yellow", //箭头颜色 (默认绿色)
  284.         arrowBackgroundType: 2, //箭头背景类型 (1: 方形, 2:圆形)
  285.         arrowBackground: 1, //箭头背景色 (1:白色,2:黑色, 默认:无颜色)
  286.         arrowTransparent: 0.2, //箭头背景透明度 (默认: 0.5)
  287.         spotColor: "white",//圆点颜色 (默认: 白色)
  288.         spotType: 1, //圆点的形状 (默认: 圆形, 1:圆形, 2.矩形)
  289.         spotSelectColor: "red", //圆点选中颜色 (默认绿色)
  290.         spotTransparent: 0.8, //圆点透明度 (默认0.8)
  291.         mousewheel: true, //是否开启鼠标滚动轮播(默认false)
  292.         drag: false, //是否开启鼠标拖动 (默认为: true, 如不需要拖动设置false即可)
  293.         loop: true, //是否循环轮播 (默认为: false)
  294.     });
  296.     var progress = $('.phpcn-progress .phpcn-row');
  298.     jQuery.each(progress, function(){
  299.         //console.log($(this).find('.phpcn-progress-percent').attr('class'));
  301.         $(this).find('.phpcn-progress-bor').css('width',$(this).find('.phpcn-progress-percent').html());
  302.     });
  303.     $('.phpcn-dl dl').last().css('border-bottom','1px solid #C9C9C9');
  304.     $('#admin-select').mouseover(function(){
  305.         //alert($(this).find('dl').css('display'));
  306.        $(this).find('dl').show();
  307.     });
  308.     $('#admin-select').find('dl').mouseout(function(){
  309.         $(this).hide();
  310.     });
  311.     $('.phpcn-button').mouseover(function(){
  312.         $(this).addClass('phpcn-button-hover');
  313.     });$('.phpcn-button').mouseout(function(){
  314.        $(this).removeClass('phpcn-button-hover');
  315.     });
  316.     $('.tree').css('min-height',$(document).height()-160);
  317.     $('.tree').find('li').click(function(){
  318.         //alert($('.tree').find('dl').css('display'));
  319.         //$('.tree').find('dl').hide();
  320.         if($(this).find('dl').css('display')=='none'){
  321.             $(this).find('i').removeClass('phpcn-icon-down');
  322.             $(this).find('i').addClass('phpcn-icon-up');
  323.             $('.tree').find('dl').hide();
  324.             $(this).find('dl').show();
  325.         }else{
  326.             $(this).find('i').removeClass('phpcn-icon-up');
  327.             $(this).find('i').addClass('phpcn-icon-down');
  328.             $(this).find('dl').hide();
  329.         }
  330.     });
  331.     //table窗口
  332.     $('.tree').find('a').click(function(){
  333.         //alert($('.tree').find('dl').css('display'));
  334.         //$('.tree').find('dl').hide();
  335.         var tabs=$('.phpcn-tab-title a');
  336.         tree=$(this);
  337.         jQuery.each(tabs, function(){
  338.             $('.phpcn-tab-title li').removeClass('on');
  339.             if($(this).attr('data')!=tree.attr('data')){
  340.                 var tabs=$('.phpcn-tab-title ul');
  341.                 $(this).removeClass('on');
  342.                 var html='<li class="on"><i></i><dd>'+tree.html()+' <a class="phpcn-icon phpcn-icon-guanbi" data='+tree.attr('data')+' href="javascript:;"></a></dd></li>';
  343.                 tabs.append(html);
  344.                 return false;
  345.             }
  346.         });
  347.     });
  348.     //table窗口
  349.     $('.phpcn-tab-title').find('.phpcn-icon-guanbi').click(function(){
  350.         alert();
  351.         $(this).parent().parent('li').remove();
  352.     });
  353.     $('.phpcn-tab-title').find('li').mouseover(function(){
  354.         var i=$(this).find('i');
  355.         $('.phpcn-tab-title').find('li').find('i').css('width','0%');
  356.         if($(this).css('background')!='#f6f6f6'){
  357.             $('.phpcn-tab-title').find('li').css('background','none');
  358.             $(this).css('background','#f6f6f6');
  359.        }
  360.         if(i.css('width')!='100%'){
  361.             i.css('width','100%');
  362.         }
  363.     });
  364. </script>
  365. </body>
  366. </html>

图片封面页

  1. <?php
  2. include __DIR__ . "/head.php";
  3. ?>
  4. <!--顶部结束-->
  5. <style>
  6.     .pi{
  7.         width: 100%;
  8.         height: 310px;
  9.     }
  10. </style>
  11. <div class="web-top phpcn-box-s  phpcn-clear phpcn-mb-30">
  12.     <div class="phpcn-main">
  13.         <div class="phpcn-col-md7">
  14.             <span class="web-tit">php中文网</span>
  15.             <span class="web-name">图片站</span>
  16.         </div>
  17.         <div class="phpcn-col-md5">
  18.             <input type="" name=""> <i class="phpcn-icon phpcn-icon-sousuo2" placeholder='关键字搜索'></i>
  19.         </div>
  20.     </div>
  21. </div>
  22. <div class="phpcn-main">
  23.     <div class="phpcn-clear">
  24.         <div class="phpcn-col-md8">
  25.             <div class="pi">
  26.                 <div class="pike">
  27.                     <?php $selHead->selPic(); ?>
  28.                 </div>
  29.                 <div class="pike_prev"></div>
  30.                 <div class="pike_next"></div>
  31.                 <div class="pike_spot"></div>
  32.             </div>
  33.         </div>
  34.         <div class="phpcn-col-md4">
  35.             <div class="image-right">
  36.                 <div class="hot-article">
  37.                     <div class="title"><span>r热闹推荐</span></div>
  38.                     <ul>
  39. <!--                        根据参数可调用不同的图片-->
  40.                      <?php $selHead->comments(6); ?>
  42.                     </ul>
  43.                 </div>
  44.             </div>
  46.         </div>
  48.     </div>
  50. </div>
  52. <!--图片开始-->
  53. <div class="phpcn-clear phpcn-mt-30" style='background:#eee;'>
  54.     <div class="phpcn-main">
  56.         <div class="phpcn-clear home-img">
  57.             <div class="title-header phpcn-mb-40 phpcn-mt-20"><span>图片专区</span></div>
  58.             <div class=" phpcn-clear phpcn-col-space15">
  60.                 <div class="phpcn-col-md4">
  62.                     <div class="bg">
  63.                         <div class="title "><a href="">美女</a> <span>纵观摄影艺术</span></div>
  64.                         <ul class="phpcn-clear">
  65.                             <!--                  根据参数可调用不同的图片-->
  66.                             <?php     $selHead->imageChan(1,8);  ?>
  68.                         </ul>
  70.                     </div>
  72.                 </div>
  73.                 <div class="phpcn-col-md4">
  75.                     <div class="bg">
  76.                         <div class="title "><a href="">美女</a> <span>纵观摄影艺术</span></div>
  77.                         <ul class="phpcn-clear">
  78.                             <!--    根据参数可调用不同的图片-->
  79.                             <?php     $selHead->imageChan(2,8);  ?>
  81.                         </ul>
  82.                     </div>
  83.                 </div>
  84.                 <div class="phpcn-col-md4">
  86.                     <div class="bg">
  87.                         <div class="title "><a href="">美女</a> <span>纵观摄影艺术</span></div>
  88.                         <ul class="phpcn-clear">
  89.                             <!-- 根据参数可调用不同的图片-->
  90.                             <?php     $selHead->imageChan(1,8);  ?>
  92.                         </ul>
  93.                     </div>
  94.                 </div>
  95.             </div>
  96.         </div>
  97.     </div>
  98.     <!--图片开始结束-->
  99.     <!--图片开始-->
  100.     <div class="phpcn-clear phpcn-mt-30" style='background:#eee;'>
  101.         <div class="phpcn-main">
  103.             <div class="phpcn-clear home-img">
  104.                 <div class="title-header phpcn-mb-40 phpcn-mt-20"><span>图片专区</span></div>
  105.                 <div class=" phpcn-clear phpcn-col-space15">
  107.                     <div class="phpcn-col-md4">
  109.                         <div class="bg">
  110.                             <div class="title "><a href="">美女</a> <span>纵观摄影艺术</span></div>
  111.                             <ul class="phpcn-clear">
  112.                                 <!--  根据参数可调用不同的图片-->
  113.                                 <?php     $selHead->imageChan(1,4);  ?>
  115.                             </ul>
  117.                         </div>
  119.                     </div>
  120.                     <div class="phpcn-col-md4">
  122.                         <div class="bg">
  123.                             <div class="title "><a href="">美女</a> <span>纵观摄影艺术</span></div>
  124.                             <ul class="phpcn-clear">
  125.                                 <!--  根据参数可调用不同的图片-->
  126.                                 <?php     $selHead->imageChan(2,4);  ?>
  127.                             </ul>
  128.                         </div>
  129.                     </div>
  130.                     <div class="phpcn-col-md4">
  132.                         <div class="bg">
  133.                             <div class="title "><a href="">美女</a> <span>纵观摄影艺术</span></div>
  134.                             <ul class="phpcn-clear">
  135.                                 <!--      根据参数可调用不同的图片-->
  136.                                 <?php     $selHead->imageChan(3,4);  ?>
  137.                             </ul>
  138.                         </div>
  139.                     </div>
  140.                 </div>
  141.             </div>
  142.         </div>
  143.         <!--图片开始结束-->
  145.         <!--网站底部-->
  146.         <?php  include __DIR__ . '/foot.php'; ?>
  147.         <!--网站底部-->
  148.         <script src="static/js/pin.js"></script>
  149.         <script>
  150.             var myPi = new Pike(".pi", {
  151.                 type: 1, // 轮播的类型(1渐隐)
  152.                 automatic: true, //是否自动轮播 (默认false)
  153.                 autoplay: 2000, //自动轮播毫秒 (默认3000)
  154.                 hover: true, //鼠标悬停轮播 (默认false)
  155.                 arrowColor: "yellow", //箭头颜色 (默认绿色)
  156.                 arrowBackgroundType: 2, //箭头背景类型 (1: 方形, 2:圆形)
  157.                 arrowBackground: 1, //箭头背景色 (1:白色,2:黑色, 默认:无颜色)
  158.                 arrowTransparent: 0.2, //箭头背景透明度 (默认: 0.5)
  159.                 spotColor: "white",//圆点颜色 (默认: 白色)
  160.                 spotType: 1, //圆点的形状 (默认: 圆形, 1:圆形, 2.矩形)
  161.                 spotSelectColor: "red", //圆点选中颜色 (默认绿色)
  162.                 spotTransparent: 0.8, //圆点透明度 (默认0.8)
  163.                 mousewheel: true, //是否开启鼠标滚动轮播(默认false)
  164.                 drag: false, //是否开启鼠标拖动 (默认为: true, 如不需要拖动设置false即可)
  165.                 loop: true, //是否循环轮播 (默认为: false)
  166.             });
  167.             var progress = $('.phpcn-progress .phpcn-row');
  169.             jQuery.each(progress, function(){
  170.                 //console.log($(this).find('.phpcn-progress-percent').attr('class'));
  172.                 $(this).find('.phpcn-progress-bor').css('width',$(this).find('.phpcn-progress-percent').html());
  173.             });
  174.             $('.phpcn-dl dl').last().css('border-bottom','1px solid #C9C9C9');
  175.             $('#admin-select').mouseover(function(){
  176.                 //alert($(this).find('dl').css('display'));
  177.                 $(this).find('dl').show();
  178.             });
  179.             $('#admin-select').find('dl').mouseout(function(){
  180.                 $(this).hide();
  181.             });
  182.             $('.phpcn-button').mouseover(function(){
  183.                 $(this).addClass('phpcn-button-hover');
  184.             });$('.phpcn-button').mouseout(function(){
  185.                $(this).removeClass('phpcn-button-hover');
  186.             });
  187.             $('.tree').css('min-height',$(document).height()-160);
  188.             $('.tree').find('li').click(function(){
  189.                 //alert($('.tree').find('dl').css('display'));
  190.                 //$('.tree').find('dl').hide();
  191.                 if($(this).find('dl').css('display')=='none'){
  192.                     $(this).find('i').removeClass('phpcn-icon-down');
  193.                     $(this).find('i').addClass('phpcn-icon-up');
  194.                     $('.tree').find('dl').hide();
  195.                     $(this).find('dl').show();
  196.                 }else{
  197.                     $(this).find('i').removeClass('phpcn-icon-up');
  198.                     $(this).find('i').addClass('phpcn-icon-down');
  199.                     $(this).find('dl').hide();
  200.                 }
  201.             });
  202.             //table窗口
  203.             $('.tree').find('a').click(function(){
  204.                 //alert($('.tree').find('dl').css('display'));
  205.                 //$('.tree').find('dl').hide();
  206.                 var tabs=$('.phpcn-tab-title a');
  207.                 tree=$(this);
  208.                 jQuery.each(tabs, function(){
  209.                     $('.phpcn-tab-title li').removeClass('on');
  210.                     if($(this).attr('data')!=tree.attr('data')){
  211.                         var tabs=$('.phpcn-tab-title ul');
  212.                         $(this).removeClass('on');
  213.                         var html='<li class="on"><i></i><dd>'+tree.html()+' <a class="phpcn-icon phpcn-icon-guanbi" data='+tree.attr('data')+' href="javascript:;"></a></dd></li>';
  214.                         tabs.append(html);
  215.                         return false;
  216.                     }
  217.                 });
  218.             });
  219.             //table窗口
  220.             $('.phpcn-tab-title').find('.phpcn-icon-guanbi').click(function(){
  221.                 alert();
  222.                 $(this).parent().parent('li').remove();
  223.             });
  224.             $('.phpcn-tab-title').find('li').mouseover(function(){
  225.                 var i=$(this).find('i');
  226.                 $('.phpcn-tab-title').find('li').find('i').css('width','0%');
  227.                 if($(this).css('background')!='#f6f6f6'){
  228.                     $('.phpcn-tab-title').find('li').css('background','none');
  229.                     $(this).css('background','#f6f6f6');
  230.                 }
  231.                 if(i.css('width')!='100%'){
  232.                    i.css('width','100%');
  233.                 }
  234.             });
  235.         </script>
  236. </body>
  237. </html>

图片详情页

  1. <?php
  2. include __DIR__ . "/head.php";
  3. if (empty($_GET['id'])){
  4.     die('参数错误');
  5. }
  6. $a=$_GET['id'];
  7. class shopImg extends select{
  8.     public $title;
  9.      public $img;
  11.     public function __construct()
  12.     {
  13. //        调用父类方法链接数据库
  14.         $this->pdo= parent::conect(DB_HOST,DB_NAME,DB_USER,DB_PASSWORD);
  15.     }
  18.     public function selImg($a=1){
  19.         $a='`id`='.$a;
  21.         $sql = 'select `*` from `images` where '.$a;
  22.         $stmt = $this->pdo->prepare($sql);
  23.         $stmt->execute();
  24.         $article = $stmt->fetchAll(PDO::FETCH_ASSOC);
  26.         foreach ($article as $cate){
  27.             $this->title=$cate['titlename'];
  28.            $this->img=$cate['imageurl'];
  30.         }
  32.     }
  35. }
  36. $art=new shopImg();
  38. $art->selImg($a);
  40. ?>
  42. <!--顶部结束-->
  43. <style>
  44.     .pi{
  45.         width: 100%;
  46.         height: 310px;
  47.     }
  49. </style>
  50. <div class="web-top phpcn-box-s  phpcn-clear phpcn-mb-30">
  51.     <div class="phpcn-main">
  52.         <div class="phpcn-col-md7">
  53.             <span class="web-tit">php中文网</span>
  54.             <span class="web-name">图片站</span>
  55.         </div>
  56.         <div class="phpcn-col-md5">
  58.             <input type="" name=""> <i class="phpcn-icon phpcn-icon-sousuo2" placeholder='关键字搜索'></i>
  59.         </div>
  61.     </div>
  63. </div>
  64. <div class="phpcn-main ">
  65.     <div class="images">
  66.         <h1><?php echo $art->title;?></h1>
  67.         <div class="cont">
  68.             <div class="box">
  69.                 <!-- 存放大图的容器-->
  70.                 <div class="all">
  71.                     <div class="top-img">
  72.                         <div class="activeimg">
  74.                             <?php  echo ' <img src="static/images/'. $art->img.'">';?>
  76.                         </div>
  77.                         <div class="left"><img src="static/images/left.png"> </div>
  78.                         <div class="right"><img src="static/images/right.png"></div>
  79.                     </div>
  80.                     <!-- 存放缩略图的容器-->
  81.                     <div class="bot-img">
  82.                         <ul>
  83.                             <li class="active"><img src="static/images/1.jpg"> </li>
  84.                             <li><img src="static/images/2.jpg"> </li>
  85.                             <li><img src="static/images/3.jpg"> </li>
  86.                             <li><img src="static/images/4.jpg"> </li>
  87.                         </ul>
  88.                     </div>
  89.                 </div>
  90.             </div>
  91.         </div>
  92.     </div>
  93.     <!--评论--->
  94.     <div class="comment phpcn-mt-30 ">
  95.         <div class="title phpcn-mb-30"><span>网页评论</span></div>
  96.         <div class="phpcn-clear">
  97.             <div class="phpcn-col-md1"><img class="user" src="static/images/user.png"> </div>
  98.             <div class="phpcn-col-md11">
  99.                 <textarea>我来评论两句</textarea>
  100.                 <button class="phpcn-button phpcn-bg-red phpcn-button-hover phpcn-mt-10 phpcn-mb-10 phpcn-r">发表评论</button>
  101.             </div>
  102.         </div>
  103.         <div class="title phpcn-mb-30"><span>最新评论</span></div>
  104.         <div class="phpcn-clear">
  105.             <div class="phpcn-clear border">
  106.                 <div class="phpcn-col-md1">
  107.                     <img class="user" src="static/images/user.png">
  108.                 </div>
  109.                 <div class="phpcn-col-md11">
  110.                     <ul class="phpcn-clear">
  111.                         <li class="user-naem">
  112.                             用户昵称
  113.                         </li>
  114.                         <li class="cont">留言内容</li>
  115.                         <li>
  116.                             <span>2019-08-08 14:46:05发表</span>
  117.                             <span class="phpcn-r"><i class="phpcn-icon phpcn-icon-dianzan"></i> <a href="">回复 </a></span>
  118.                         </li>
  119.                     </ul>
  120.                 </div>
  121.             </div>
  122.             <div class="phpcn-clear border">
  123.                 <div class="phpcn-col-md1">
  124.                     <img class="user" src="static/images/user.png">
  125.                 </div>
  126.                 <div class="phpcn-col-md11">
  127.                     <ul class="phpcn-clear">
  128.                         <li class="user-naem">
  129.                             用户昵称
  130.                         </li>
  131.                         <li class="cont">留言内容</li>
  132.                         <li>
  133.                             <span>2019-08-08 14:46:05发表</span>
  134.                             <span class="phpcn-r"><i class="phpcn-icon phpcn-icon-dianzan"></i> <a href="">回复 </a></span>
  135.                         </li>
  136.                     </ul>
  137.                 </div>
  138.             </div>
  139.             <div class="phpcn-clear border">
  140.                 <div class="phpcn-col-md1">
  141.                     <img class="user" src="static/images/user.png">
  142.                 </div>
  143.                 <div class="phpcn-col-md11">
  144.                     <ul class="phpcn-clear">
  145.                         <li class="user-naem">
  146.                             用户昵称
  147.                         </li>
  148.                         <li class="cont">留言内容</li>
  149.                         <li>
  150.                             <span>2019-08-08 14:46:05发表</span>
  151.                             <span class="phpcn-r"><i class="phpcn-icon phpcn-icon-dianzan"></i> <a href="">回复 </a></span>
  152.                         </li>
  153.                     </ul>
  154.                 </div>
  155.             </div>
  156.         </div>
  157.         <div class="phpcn-clear border">
  158.             <div class="phpcn-col-md1">
  159.                 <img class="user" src="static/images/user.png">
  160.             </div>
  161.             <div class="phpcn-col-md11">
  162.                 <ul class="phpcn-clear">
  163.                     <li class="user-naem">
  164.                         用户昵称
  165.                     </li>
  166.                     <li class="cont">留言内容</li>
  167.                     <li>
  168.                         <span>2019-08-08 14:46:05发表</span>
  169.                         <span class="phpcn-r"><i class="phpcn-icon phpcn-icon-dianzan"></i> <a href="">回复 </a></span>
  170.                     </li>
  171.                 </ul>
  172.             </div>
  173.         </div>
  174.     </div>
  175.     <!--评论结束--->
  176. </div>
  177. <!--网站底部-->
  179. <script src="static/js/pin.js"></script>
  180. <script>
  182.     $(function(){
  183.         $('.bot-img ul li').click(function(){
  184.             var _this=$(this);
  185.             _this.addClass('active').siblings('li').removeClass('active');
  186.             var int=_this.index();
  187.             $('.activeimg').animate({left:int*-500},"slow");
  188.         });
  189.         var list=$('.bot-img ul li').length;
  190.         $('.activeimg').css({
  191.             width:list*500,
  192.         });
  193.         $('.right').click(function(){
  194.             next(list)
  196.         })
  197.         $('.left').click(function(){
  198.             prev(list)
  199.         });
  201.         //自动播放 2秒播放一次 无限循环
  202.         var timer='';
  203.         var num=0;
  204.         timer=setInterval(function(){ //打开定时器
  205.             num++;
  206.             if(num>parseFloat(list)-1){
  207.                 num=0;
  208.                 $('.activeimg').animate({left:num*-500},"slow");
  209.             }else{
  210.                 $('.activeimg').animate({left:num*-500},"slow");
  211.             }
  212.         },2000);
  213.     })
  214.     var index=0;
  215.     //下一张
  216.     function next(list){
  217.         if(index<list-1){
  218.             index++;
  219.             $('.activeimg').animate({left:index*-500},"slow");
  220.             $('.bot-img ul li').eq(index).addClass('active').siblings('li').removeClass('active')
  221.         }else{
  222.             index=0;
  223.             $('.activeimg').animate({left:index*-522},"slow");
  224.             $('.bot-img ul li').eq(index).addClass('active').siblings('li').removeClass('active')
  225.         }
  226.     }
  227.     //        上一张
  228.     function prev(list){
  229.         index--;
  230.         if(index<0){
  231.             index=list-1;
  232.             $('.activeimg').animate({left:index*-500},"slow");
  233.             $('.bot-img ul li').eq(index).addClass('active').siblings('li').removeClass('active')
  234.         }else{
  235.             $('.activeimg').animate({left:index*-500},"slow");
  236.             $('.bot-img ul li').eq(index).addClass('active').siblings('li').removeClass('active')
  237.         }
  238.     }
  239.     var myPi = new Pike(".pi", {
  240.         type: 1, // 轮播的类型(1渐隐)
  241.         automatic: true, //是否自动轮播 (默认false)
  242.         autoplay: 2000, //自动轮播毫秒 (默认3000)
  243.         hover: true, //鼠标悬停轮播 (默认false)
  244.         arrowColor: "yellow", //箭头颜色 (默认绿色)
  245.         arrowBackgroundType: 2, //箭头背景类型 (1: 方形, 2:圆形)
  246.         arrowBackground: 1, //箭头背景色 (1:白色,2:黑色, 默认:无颜色)
  247.         arrowTransparent: 0.2, //箭头背景透明度 (默认: 0.5)
  248.         spotColor: "white",//圆点颜色 (默认: 白色)
  249.         spotType: 1, //圆点的形状 (默认: 圆形, 1:圆形, 2.矩形)
  250.         spotSelectColor: "red", //圆点选中颜色 (默认绿色)
  251.         spotTransparent: 0.8, //圆点透明度 (默认0.8)
  252.         mousewheel: true, //是否开启鼠标滚动轮播(默认false)
  253.         drag: false, //是否开启鼠标拖动 (默认为: true, 如不需要拖动设置false即可)
  254.         loop: true, //是否循环轮播 (默认为: false)
  255.     });
  256. </script>
  257. </body>
  258. </html>

文章列表页面

  1. <?php
  2. include __DIR__ . "/head.php";
  3. ?>
  4. <!--新闻内容头部分类-->
  5. <div class="ar-head phpcn-main">
  6.     <div class='phpcn-col-md10 path'>
  7.         <a href=""><img src="static/images/ar-logo.png"></a>
  8.         <a href="">财经</a>
  9.         <span>></span>
  10.         <span>列表</span>
  11.     </div>
  12.     <div class='phpcn-col-md2'>
  13.         <input type="" name=""> <i class="phpcn-icon phpcn-icon-sousuo2" placeholder='关键字搜索'></i>
  14.     </div>
  15.     <div class="phpcn-clear">
  16.         <div class="phpcn-col-md9">
  17.             <div class="article-content">
  18.                 <!--列表开始-->
  19.                 <div class="alist">
  20.                     <div class="nav phpcn-mt-20">
  21.                         <a href="">头条 </a>
  22.                         <a href="">热文 </a>
  23.                         <a href="">直播 </a>
  24.                         <a href="" class="on">新闻 </a>
  25.                         <a href="">政策地图  </a>
  26.                         <a href="">相对论 </a>
  27.                         <a href="">人物 </a>
  28.                         <a href="">行情 </a>
  29.                         <a href="">投研</a>
  30.                         <a href="">技术</a>
  31.                         <a href="">百科</a>
  32.                     </div>
  33.                     <div class="aritcle-list">
  34. <!--                        文章资讯页列表-->
  35.                       <?php $selHead->listSel(); ?>
  37.                     </div>
  39.                 </div>
  40.                 <!--列表开始结束-->
  41.                 <!--推荐阅读 --->
  42.                 <div class="about-read phpcn-mt-30 phpcn-clear">
  43.                     <div class="title"><span>推荐阅读</span></div>
  44.                     <ul>
  45. <!--推荐阅读-->
  46.                         <?php     $selHead->reading(6);                ?>
  47.                     </ul>
  48.                 </div>
  49.                 <!--推荐阅读 结束--->
  50.             </div>
  51.         </div>
  53.         <div class="phpcn-col-md3">
  54.             <div class="hot-article">
  55.                 <div class="title"><span>网页评论</span></div>
  56.                 <ul>
  57. <!--                    文章右侧内容-->
  58.                     <?php  $selHead->comments(6) ?>
  59.                 </ul>
  60.             </div>
  61.             <div class="hot-article phpcn-mt-30">
  62.                 <div class="title"><span>网页评论</span></div>
  63.                 <ul>
  64.                     <!--                    文章右侧内容-->
  65.                     <?php  $selHead->comments(6) ?>
  67.                 </ul>
  68.             </div>
  70.         </div>
  71.     </div>
  72. </div>
  73. <!--新闻内容头部分类结束-->
  74. <!--网站底部-->
  75. <?php  include __DIR__ . '/foot.php'; ?>
  76. <!--网站底部-->
  77. <script src="static/js/pin.js"></script>
  78. <script>
  79.     var myPi = new Pike(".pi", {
  80.         type: 1, // 轮播的类型(1渐隐)
  81.         automatic: true, //是否自动轮播 (默认false)
  82.         autoplay: 2000, //自动轮播毫秒 (默认3000)
  83.         hover: true, //鼠标悬停轮播 (默认false)
  84.         arrowColor: "yellow", //箭头颜色 (默认绿色)
  85.         arrowBackgroundType: 2, //箭头背景类型 (1: 方形, 2:圆形)
  86.         arrowBackground: 1, //箭头背景色 (1:白色,2:黑色, 默认:无颜色)
  87.         arrowTransparent: 0.2, //箭头背景透明度 (默认: 0.5)
  88.         spotColor: "white",//圆点颜色 (默认: 白色)
  89.         spotType: 1, //圆点的形状 (默认: 圆形, 1:圆形, 2.矩形)
  90.         spotSelectColor: "red", //圆点选中颜色 (默认绿色)
  91.         spotTransparent: 0.8, //圆点透明度 (默认0.8)
  92.         mousewheel: true, //是否开启鼠标滚动轮播(默认false)
  93.         drag: false, //是否开启鼠标拖动 (默认为: true, 如不需要拖动设置false即可)
  94.         loop: true, //是否循环轮播 (默认为: false)
  95.     });
  97.     var progress = $('.phpcn-progress .phpcn-row');
  99.     jQuery.each(progress, function(){
  100.         //console.log($(this).find('.phpcn-progress-percent').attr('class'));
  102.         $(this).find('.phpcn-progress-bor').css('width',$(this).find('.phpcn-progress-percent').html());
  103.     });
  104.     $('.phpcn-dl dl').last().css('border-bottom','1px solid #C9C9C9');
  105.     $('#admin-select').mouseover(function(){
  106.         //alert($(this).find('dl').css('display'));
  107.         $(this).find('dl').show();
  108.     });
  109.     $('#admin-select').find('dl').mouseout(function(){
  110.         $(this).hide();
  111.     });
  112.     $('.phpcn-button').mouseover(function(){
  113.         $(this).addClass('phpcn-button-hover');
  114.     });$('.phpcn-button').mouseout(function(){
  115.         $(this).removeClass('phpcn-button-hover');
  116.     });
  117.     $('.tree').css('min-height',$(document).height()-160);
  118.     $('.tree').find('li').click(function(){
  119.         //alert($('.tree').find('dl').css('display'));
  120.         //$('.tree').find('dl').hide();
  121.         if($(this).find('dl').css('display')=='none'){
  122.             $(this).find('i').removeClass('phpcn-icon-down');
  123.             $(this).find('i').addClass('phpcn-icon-up');
  124.             $('.tree').find('dl').hide();
  125.             $(this).find('dl').show();
  126.         }else{
  127.             $(this).find('i').removeClass('phpcn-icon-up');
  128.             $(this).find('i').addClass('phpcn-icon-down');
  129.             $(this).find('dl').hide();
  130.         }
  131.     });
  132.     //table窗口
  133.     $('.tree').find('a').click(function(){
  134.         //alert($('.tree').find('dl').css('display'));
  135.         //$('.tree').find('dl').hide();
  136.         var tabs=$('.phpcn-tab-title a');
  137.         tree=$(this);
  138.         jQuery.each(tabs, function(){
  139.             $('.phpcn-tab-title li').removeClass('on');
  140.             if($(this).attr('data')!=tree.attr('data')){
  141.                 var tabs=$('.phpcn-tab-title ul');
  142.                 $(this).removeClass('on');
  143.                 var html='<li class="on"><i></i><dd>'+tree.html()+' <a class="phpcn-icon phpcn-icon-guanbi" data='+tree.attr('data')+' href="javascript:;"></a></dd></li>';
  144.                 tabs.append(html);
  145.                 return false;
  146.             }
  147.         });
  148.     });
  149.     //table窗口
  150.     $('.phpcn-tab-title').find('.phpcn-icon-guanbi').click(function(){
  151.         alert();
  152.         $(this).parent().parent('li').remove();
  153.     });
  154.     $('.phpcn-tab-title').find('li').mouseover(function(){
  155.         var i=$(this).find('i');
  156.         $('.phpcn-tab-title').find('li').find('i').css('width','0%');
  157.         if($(this).css('background')!='#f6f6f6'){
  158.             $('.phpcn-tab-title').find('li').css('background','none');
  159.             $(this).css('background','#f6f6f6');
  160.         }
  161.         if(i.css('width')!='100%'){
  162.             i.css('width','100%');
  163.         }
  164.     });
  165. </script>
  166. </body>
  167. </html>

文章内容页面

  1. <?php
  2. include __DIR__ . "/head.php";
  3. if (empty($_GET['id'])){
  4.     die('参数错误');
  5. }
  6. $a=$_GET['id'];
  7. //文章内容页
  8. class article extends select{
  9.     public $title;
  10.     public $time;
  11.     public $read;
  12.     public $body;
  14.     public function __construct()
  15.     {
  16. //        调用父类方法链接数据库
  17.         $this->pdo= parent::conect(DB_HOST,DB_NAME,DB_USER,DB_PASSWORD);
  18.     }
  19.     public function article($a=1){
  20.         $a='`id`='.$a;
  21.         $sql = 'select `*` from `article` where '.$a;
  22.         $stmt = $this->pdo->prepare($sql);
  23.         $stmt->execute();
  24.         $article = $stmt->fetchAll(PDO::FETCH_ASSOC);
  25. //        得到文章的基本信息本赋值给相应变量，在内容中直接访问变量就行
  26.         foreach ($article as $cate){
  27.             $this->title=$cate['title'];
  28.             $this->time=$cate['times'];
  29.             $this->read=$cate['click'];
  30.             $this->body=$cate['body'];
  31.         }
  32.     }
  33. }
  34. $art=new article();
  35. $art->article($a);
  36. ?>
  37. <!--新闻内容头部分类-->
  38. <div class="ar-head phpcn-main">
  39.     <div class='phpcn-col-md10 path'>
  40.         <a href=""><img src="static/images/ar-logo.png"></a>
  41.         <a href="">财经</a>
  42.         <span>></span>
  43.         <span>正文</span>
  44.     </div>
  45.     <div class='phpcn-col-md2'>
  46.         <input type="" name=""> <i class="phpcn-icon phpcn-icon-sousuo2" placeholder='关键字搜索'></i>
  47.     </div>
  48.     <div class="phpcn-clear">
  49.         <div class="phpcn-col-md9">
  50.             <div class="article-content">
  51. <!--                标题-->
  52.                 <h1>  <?php   echo $art->title; ?></h1>
  53.                 <div class="attribute">
  54.                     <span>发布时间：<?php echo $art->time;?></span>
  55.                     <span>来源：北京 青年报</span>
  56.                     <span>阅读量：<?php echo $art->read;?></span>
  57.                     <span>评论数：1545</span>
  58.                 </div>
  59.                 <article >
  60. <!--                    内容-->
  61.                     <?php   echo $art->body; ?>
  63.                 </article>
  64.                 <div class="suggest">
  65.                     <button class="phpcn-button phpcn-bg-red phpcn-button-hover">赞</button>
  66.                     <button class="phpcn-button phpcn-color-grayphpcn-button-hover">踩</button>
  67.                 </div>
  68.                 <!--评论--->
  69.                 <div class="comment phpcn-mt-30">
  70.                     <div class="title phpcn-mb-30"><span>网页评论</span></div>
  71.                     <div class="phpcn-clear">
  72.                         <div class="phpcn-col-md1"><img class="user" src="static/images/user.png"> </div>
  73.                         <div class="phpcn-col-md11">
  74.                     <textarea>
  75.                         我来评论两句
  76.                     </textarea>
  77.                             <button class="phpcn-button phpcn-bg-red phpcn-button-hover phpcn-mt-10 phpcn-mb-10 phpcn-r">发表评论</button>
  78.                         </div>
  79.                     </div>
  81.                 </div>
  82.                 <!--评论结束--->
  83.                 <!--推荐阅读 --->
  84.                 <div class="about-read phpcn-mt-30">
  85.                     <div class="title"><span>推荐阅读</span></div>
  86.                     <ul>
  88.                         <?php     $selHead->reading(6);                ?>
  92.                     </ul>
  93.                 </div>
  94.                 <!--推荐阅读 结束--->
  95.             </div>
  96.         </div>
  98.         <div class="phpcn-col-md3">
  99.             <div class="hot-article">
  100.                 <div class="title"><span>网页评论</span></div>
  101.                 <ul>
  102.                     <?php  $selHead->comments(6) ?>
  103.                 </ul>
  104.             </div>
  105.             <div class="hot-article phpcn-mt-30">
  106.                 <div class="title"><span>网页评论</span></div>
  107.                 <ul>
  108.                     <?php  $selHead->comments(6) ?>
  110.                 </ul>
  111.             </div>
  113.         </div>
  114.     </div>
  115. </div>
  116. <!--新闻内容头部分类结束-->
  117. <!--网站底部-->
  118. <?php  include __DIR__ . '/foot.php'; ?>
  119. <!--网站底部-->
  120. <script src="static/js/pin.js"></script>
  121. <script>
  122.     var myPi = new Pike(".pi", {
  123.         type: 1, // 轮播的类型(1渐隐)
  124.         automatic: true, //是否自动轮播 (默认false)
  125.         autoplay: 2000, //自动轮播毫秒 (默认3000)
  126.         hover: true, //鼠标悬停轮播 (默认false)
  127.         arrowColor: "yellow", //箭头颜色 (默认绿色)
  128.         arrowBackgroundType: 2, //箭头背景类型 (1: 方形, 2:圆形)
  129.         arrowBackground: 1, //箭头背景色 (1:白色,2:黑色, 默认:无颜色)
  130.         arrowTransparent: 0.2, //箭头背景透明度 (默认: 0.5)
  131.         spotColor: "white",//圆点颜色 (默认: 白色)
  132.         spotType: 1, //圆点的形状 (默认: 圆形, 1:圆形, 2.矩形)
  133.         spotSelectColor: "red", //圆点选中颜色 (默认绿色)
  134.         spotTransparent: 0.8, //圆点透明度 (默认0.8)
  135.         mousewheel: true, //是否开启鼠标滚动轮播(默认false)
  136.         drag: false, //是否开启鼠标拖动 (默认为: true, 如不需要拖动设置false即可)
  137.         loop: true, //是否循环轮播 (默认为: false)
  138.     });
  139.     var progress = $('.phpcn-progress .phpcn-row');
  140.     jQuery.each(progress, function(){
  141.         //console.log($(this).find('.phpcn-progress-percent').attr('class'));
  142.         $(this).find('.phpcn-progress-bor').css('width',$(this).find('.phpcn-progress-percent').html());
  143.     });
  144.     $('.phpcn-dl dl').last().css('border-bottom','1px solid #C9C9C9');
  145.     $('#admin-select').mouseover(function(){
  146.         //alert($(this).find('dl').css('display'));
  147.         $(this).find('dl').show();
  148.     });
  149.     $('#admin-select').find('dl').mouseout(function(){
  151.         $(this).hide();
  153.     });
  154.     $('.phpcn-button').mouseover(function(){
  156.         $(this).addClass('phpcn-button-hover');
  158.     });$('.phpcn-button').mouseout(function(){
  160.         $(this).removeClass('phpcn-button-hover');
  162.     });
  163.     $('.tree').css('min-height',$(document).height()-160);
  164.     $('.tree').find('li').click(function(){
  165.         //alert($('.tree').find('dl').css('display'));
  166.         //$('.tree').find('dl').hide();
  167.         if($(this).find('dl').css('display')=='none'){
  169.             $(this).find('i').removeClass('phpcn-icon-down');
  170.             $(this).find('i').addClass('phpcn-icon-up');
  171.             $('.tree').find('dl').hide();
  172.             $(this).find('dl').show();
  173.         }else{
  175.             $(this).find('i').removeClass('phpcn-icon-up');
  176.             $(this).find('i').addClass('phpcn-icon-down');
  177.             $(this).find('dl').hide();
  178.        }
  179.     });
  180.     //table窗口
  181.     $('.tree').find('a').click(function(){
  182.         //alert($('.tree').find('dl').css('display'));
  183.         //$('.tree').find('dl').hide();
  184.         var tabs=$('.phpcn-tab-title a');
  185.         tree=$(this);
  186.         jQuery.each(tabs, function(){
  187.             $('.phpcn-tab-title li').removeClass('on');
  188.             if($(this).attr('data')!=tree.attr('data')){
  189.                 var tabs=$('.phpcn-tab-title ul');
  190.                 $(this).removeClass('on');
  191.                 var html='<li class="on"><i></i><dd>'+tree.html()+' <a class="phpcn-icon phpcn-icon-guanbi" data='+tree.attr('data')+' href="javascript:;"></a></dd></li>';
  192.                 tabs.append(html);
  193.                 return false;
  194.             }
  195.         });
  196.     });
  197.     //table窗口
  198.     $('.phpcn-tab-title').find('.phpcn-icon-guanbi').click(function(){
  199.         alert();
  200.         $(this).parent().parent('li').remove();
  201.     });
  202.     $('.phpcn-tab-title').find('li').mouseover(function(){
  203.         var i=$(this).find('i');
  204.         $('.phpcn-tab-title').find('li').find('i').css('width','0%');
  205.         if($(this).css('background')!='#f6f6f6'){
  206.             $('.phpcn-tab-title').find('li').css('background','none');
  207.             $(this).css('background','#f6f6f6');
  208.         }
  209.         if(i.css('width')!='100%'){
  210.             i.css('width','100%');
  211.         }
  212.     });
  213. </script>
  214. </body>
  215. </html>

文章表

图片表

商品表

栏目表

总结

本次作业刚开始感觉还不知道怎么下手，但慢慢写起来感觉还是不难，在一步步的改进中还是能达到实现的效果，思路应该一直都有只是以前不知道如何从数据库中调出数据并渲染出来，然后经过一学习现在还是没得问题了。但还是有不足的地方 就是感觉现在我用的渲染方法应该不好很不便于后期的功能扩展和维护，如果 再复杂一点的数据渲染估计就找不到方法和思路。

上一条：1206_迷你MVC框架 第30课下一条：php-大作业-九期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多