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