自学网页开发遇到的问题，像网页一般头部或者顶部有菜单栏或者中间左右有菜单栏选项，底部有版权所有之类的固定内容，基本上每个菜单选项后的页面都有固定的头尾部分或者左右菜单保持不变，只是选择菜单后希望主要内容区块变换相应的内容，查找资料学习后发现这种分拆网页然后组合的模块的方式比较好用，可以提取固定的模块页面部分为一个独立的页面，然后组合到一个网页，显示出网页整体效果。
下面是我做的网页的首页代码，可供参考，中间区域页面可以随便自定义
-----组合页面代码
<!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>firstFrame</title>
<!-- 头部样式 -->
<!--<link href="../css/head.css" rel="stylesheet" type="text/css">
--><!-- 中间页面样式 -->
<!--<link href="../css/home.css" rel="stylesheet" type="text/css">
--><!-- 底部样式 -->
<!--<link href="../css/foot.css" rel="stylesheet" type="text/css">
--><!-- 组合页面样式 -->
<style type="text/css">
iframe {
width:100%;
height: 100%;
}
/* 头部加载样式 */
#heading {
height: 130px;
width:100%;
margin: 0px;
padding: 0px;
}
/* 中部加载样式 */
#maining {
height: 1050px;
width:100%;
margin: 0px;
padding: 0px;
}
/* 底部加载样式 */
#footing {
height: 80px;
width:100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<!-- 头部导航栏 -->
<!-- 加载头部区 -->
<div id="heading" >
<iframe frameborder="0" scrolling="No" src="head.html"></iframe>
</div>
<!-- 中间主内容区 -->
<!-- 加载中间区 -->
<div id="maining" >
<iframe frameborder="0" scrolling="No" src="../homes/firstPage.html"></iframe>
</div>
<!-- 底部版权联系区 -->
<!-- 加载底部区 -->
<div id="footing" >
<iframe frameborder="0" scrolling="No" src="foot.html"></iframe>
</div>
</body>
</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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>head</title>
<!-- 头部样式 -->
<link href="../css/head.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 头部导航栏 -->
<div id="head">
<div id="headTop"></div>
<div id="header">
<div id="logo"><img src="../images/logo.gif" width="248" height="68" /></div>
<div id="menus">
<ul>
<li><a href="../frames/firstFrame.html" target="_top">首页</a></li>
<li><a href="../frames/lendFrame.html" target="_top">我要投资</a></li>
<li><a href="../frames/loanFrame.html" target="_top">我要借钱</a></li>
<li><a href="../frames/discussFrame.html" target="_top">财富论坛</a></li>
<li><a href="../frames/userFrame.html" target="_top">用户中心</a></li>
<li><a href="../frames/helpFrame.html" target="_top">帮助中心</a></li>
</ul>
</div>
</div>
</div>
</body>
</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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>foot</title>
<!-- 底部样式 -->
<link href="../css/foot.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 底部版权联系区 -->
<div id="foot">
<br/>
<div id="tel" >联系我们----400-888- 8888 （08:00 - 20:00）</div>
<div id="copyright">
Copyright Reserved 2012-2016 © 蚁族财富网（www.antMoney.com） | 深ICP备05063398号-4 | 深圳蚁族财富金融信息服务有限公司
</div>
</div>
</body>
</html>
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
