把静态转换为动态页面，替换首页功能
首先是改一个静态页面，就只有一个首页而已
把这样的一个首页
改为三行三列
给我们发了个半成品代码，修改，修改后的效果为这样
把整个源代码写在博客上，以备以后万一用到这样一个魔板
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="width: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-width: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> <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的增删改功能非常普遍，所以一定要学会，如果自己写不出来也没关系，一定要有个之前的例子，会粘贴会复制修改
遇到后直接拿过来用就可以
