zoukankan      html  css  js  c++  java
  • 把静态转换为动态页面,替换首页功能

    首先是改一个静态页面,就只有一个首页而已

    把这样的一个首页

    改为三行三列

    给我们发了个半成品代码,修改,修改后的效果为这样

    把整个源代码写在博客上,以备以后万一用到这样一个魔板

    html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="keywords" content="" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,maxinum-scale=1,user-scale=no" />
        <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
        <title></title>
        <link rel="stylesheet" href="./main.css" media="all" type="text/css" />
    </head>
    
    <body>
        <div class="content">
            <div class="logo">
                <img src="image/logo.png" style="100%" />
            </div>
            <div class="con-bg">
                <div class="main">
                    <div class="maintb">
                        <ul>
                            <li class="tb1"><a href="Default.aspx" target="_blank"><img src="image/tb1.png" />党员学习</a></li>
                            <li class="tb2"><a href="Modules/swgk_new/swgk.html" target="_blank"><img src="image/tb2.png" />三务公开</a></li>
                            <li class="tb3"><a href="Modules/swgk/gxzj.html" target="_blank"><img src="image/tb3.png" />关系转接</a></li>
                            <li class="tb4"><a href="Modules/DYSJ/lead.aspx" target="_blank"><img src="image/tb4.png" />党员服务</a></li>
                            <li class="tb5"><a href="Modules/swgk/fzdy.html" target="_blank"><img src="image/tb5.png" />发展党员</a></li>
                            <li class="tb6"><a href="Modules/PayDues/index.html" target="_blank"><img src="image/tb6.png" />党费缴纳</a></li>
                            <li class="tb7"><a href="Modules/VedioLive/index.html" target="_blank"><img src="image/tb7.png" />视频直播</a></li>
                            <li class="tb8"><a href="http://dangshi.ydxf.gov.cn/" target="_blank"><img src="image/tb8.png" />党史教育</a></li>
                            <li class="tb8"><a href="http://dangshi.ydxf.gov.cn/" target="_blank"><img src="image/tb8.png" />党史教育</a></li>
                        </ul>
                    </div>
    
                </div>
            </div>
        </div>
    <div class="foot"></div>
    </body>
    </html>

    main.css页面

    @charset "utf-8";
    /* CSS Document */
    html{ min-height:100%; margin:0; padding:0;}
    
    body{ width:100%; height:100%; clear:both; padding:0; margin:0; background:url(image/%E8%83%8C%E6%99%AF.jpg) top center no-repeat; background-size:cover; -moz-background-size:cover; -webkit-background-size:cover;
    /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file:///G:/website/wfleader/images/bg.jpg',sizingMethod='scale');  */
     font-family:'微软雅黑'; behavior:url(ie-css3.htc);
    }
    
    @media screen and(max-1441px){
        body{ width:100%; height:100%; clear:both; padding:0; margin:0; background:url(bg1440.jpg) top center no-repeat; background-size:cover; -moz-background-size:cover; -webkit-background-size:cover;
    /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file:///G:/website/wfleader/images/bg.jpg',sizingMethod='scale');  */
     font-family:'微软雅黑';
    }
    }
    a,ul,li{ margin:0; padding:0; text-decoration:none;}
    img{ border:0;}
    
    .content{ width:100%; height:auto; margin:0; padding:0;}
    .logo{ width:48%; margin:6% auto 0 auto; padding:0;}
    .con-bg{ float:left; width:100%; background-color: rgba(255,255,255,0.3); filter: alpha(opacity=30);  
      margin:1% 0; padding:2% 0;}
    .main{ width:52%; margin:0 auto; padding:0; position:relative; z-index:999;}
    /*mokuai*/
    
    .maintb ul{ float:left; width:100%; list-style:none; margin:0; padding:0;}
    .maintb ul li{float:left; width:29%; margin:1% 3% 1% 0; padding:1% 0;  color:#fff; opacity:0.7; -moz-opacity:0.7; filter:alpha(opacity=70);}
    .maintb ul li a{ float:left; width:100%; text-align:center; color:#fff; padding:0; margin:0; font-size:1.2em; line-height:1.6em;}
    .maintb ul li:hover{opacity:1; -moz-opacity:1; filter:alpha(opacity=100);}
    .maintb ul li a img{ width:60%; margin:3px 20%;}
    .tb1{ background-color: #b40081;}
    .tb2{ background-color: #0d56bd;}
    .tb3{ background-color: #7bba1d;}
    .tb4{ background-color: #ec721a;}
    .tb5{ background-color: #00c7a9;}
    .tb6{ background-color: #e39000;}
    .tb7{ background-color: #1fbbd8;}
    .tb8{ background-color: #e728e9;}
    
    /*login*/
    .loginbox{ float:right; width:240px; margin:60px 0 0 0; padding:0;}
    .divselect{ float:left; width:230px; height:34px; overflow:hidden; background:url(xiala.gif) 94% center no-repeat; border-radius:8px;}
    .divselect select{   background-color:#fff;
       width: 255px; opacity:0.7; -moz-opacity:0.7; filter:alpha(opacity=70); 
       padding: 5px 10px; border:0px; 
       font-size: 14px;   border-radius:8px;   height: 34px;
       -webkit-appearance: none; /*for chrome*/}
    
    .input{ float:left; width:210px; height:26px; border-radius:8px; background-color:#fff; opacity:0.7; -moz-opacity:0.7; filter:alpha(opacity=70); border:0px; font-size:14px; padding:4px 10px; margin:28px 0 0 0;}
    .loginbtn{ float:left; width:228px; height:44px; background:url(dl-btn.png) no-repeat; border:0; margin:28px 0 0 0;}
    
    .foot{ float:left; width:100%; text-align:center; position:absolute; bottom:5px;font-size:14px; }

    然后把数据和链接输入数据库中,做个后台,增删改的功能,然后把静态页面替换为动态的

    先看一下后台的大体样子

    然后再来看一下代码部分

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
    <script src="bootstrap.min.js"></script>
    
    <style type="text/css">
    *{
        margin:0px auto; padding:0px
        
     }
    
    .a1{
        color:#F00
        }
    </style>
    <body>
    <h1>修改栏目</h1>
    <br />
    <table width="100%" border="1" cellpadding="0" cellspacing="0">
    <tr>
     <td>代号</td>
     <td>栏目</td>
     <td>链接</td>
     <td>操作</td>
     
    </tr>
    <?php
    $db = new MySQLi("localhost","root","726","ziyuan");
    $sql = "select * from yunpingtai";
    $result = $db->query($sql);
    $attr=$result->fetch_all();
    foreach($attr as $v)
    {
        
        echo "<tr><td>{$v[0]}</td><td>{$v[1]}</td><td>{$v[2]}</td><td><a href='xiugai.php?code={$v[0]}'>修改</a>&nbsp;&nbsp;<a class='a1' href='shanchu.php?code={$v[0]}' onclick="return confirm('确定删除么')">删除</a></td></tr>";
        
        
        }
    ?>
    
    
    </table>
    <div><a href="tianjia.php">添加内容</a></div>
    
    </html>

    删除页面

    <?php
    $code= $_GET["code"];
    //造连接对象
    $db= new MySQLi("localhost","root","726","ziyuan");
    //写SQL语句
    $sql = "delete from yunpingtai where code='{$code}'";
    //执行
    $r=$db->query($sql);
    if($r)
    {
        header("location:houtai.php");
        }
    else
    {
        echo "删除失败!";
        }

    修改页面

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body>
    <h1>修改栏目</h1>
    <?php
    $code = $_GET["code"];
    //造连接对象
    $db = new MySQLi("localhost","root","726","ziyuan");
    //写SQL语句
    $sql = "select * from yunpingtai where code='{$code}'";
    //执行
    $result =$db->query($sql);
    //取数据
    $attr = $result->fetch_row();
    
    
    
    ?>
    <form action="xiugaichuli.php" method="post">
    <input type="hidden" name="code" value="<?php echo $attr[0] ?>" />   
    <div>名称:<input type="text" name="name" value="<?php echo $attr[1] ?>"/></div>
    <div>价格:<input type="text" name="lianjie" value="<?php echo $attr[2] ?>"/></div>
    
    <div><input type="submit" name="修改" /></div>
    </form>
    
    </body>
    </html>

    修改处理页面

    <?php
    $code = $_POST["code"];
    $name = $_POST["name"];
    $lianjie = $_POST["lianjie"];
    
    //造连接对象
    $db = new MySQLi("localhost","root","726","ziyuan");
    //写SQL语句
    $sql = "update yunpingtai set name='{$name}',lianjie='{$lianjie}' where code='{$code}'";
    //执行
    $r=$db->query($sql);
    if($r)
    {
        header("location:houtai.php");
        }
    else
    {
        echo "修改失败!";
        }

    添加页面

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <h1>添加栏目</h1>
    <form action="tianjiachuli.php" method="post">
    <div>代号:<input type="text" name="code" /></div>
    <div>名称:<input type="text" name="name" /></div>
    <div>链接:<input type="text" name="lianjie" /></div>
    
    <div><input type="submit" name="添加" /></div>
    </form>
    <body>
    </body>
    </html>

    添加处理页面

    <?php
    $code=$_POST["code"];
    $name= $_POST["name"];
    $lianjie = $_POST["lianjie"];
    
    //造连接对象
    $db = new MySQLi("localhost","root","726","ziyuan");
    
    
    //写SQL语句
    $sql = "insert into yunpingtai values('{$code}','{$name}','{$lianjie}')";
    //执行
    $r=$db->query($sql);
    if($r)
    {
        header("location:houtai.php");
        
    }
    else
    {
        echo "添加失败";
        
        }

    然后后台的基本功能完成

    再就是替换首页

    他没有要求图片和颜色也替换,所以只需要循环一条数据就可以

    需要改的地方是这里

    把原来的html文件名改为php   不然里面无法写php代码

    经替换后的首页,运行起来就是这样的

    工作中php的增删改功能非常普遍,所以一定要学会,如果自己写不出来也没关系,一定要有个之前的例子,会粘贴会复制修改

    遇到后直接拿过来用就可以

  • 相关阅读:
    mongo相关
    grafana相关
    问题与解决
    蓝鲸社区版6.0填坑指南
    go环境
    docker相关
    gitlab相关
    LRU(Least recently used,最近最少使用)
    LRU:最近最久未使用
    学习大神笔记之 “MyBatis学习总结(一)”
  • 原文地址:https://www.cnblogs.com/qishuang/p/6703610.html
Copyright © 2011-2022 走看看