search

Home >Web Front-end >HTML Tutorial >CSS layout problem 100 points next page Is there any way to avoid writing repeated content such as navigation footer copyright information, etc._html/css_WEB-ITnose

CSS layout problem 100 points next page Is there any way to avoid writing repeated content such as navigation footer copyright information, etc._html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:15:241673browse

刚开始学习css+xml   问一下有关布局问题 

body {font-family: Arial, Helvetica, Verdana, Sans-serif;font-size: 15px;color:#666666;background:#FFDDAA;margin:0px;padding:0px;}.hidden {display: none;}#container {width:760px;background:#FFDDAA;margin:auto;}#main  {background:#FFCCCC;height:30px ;padding:15px 5px 0 0;}#main ul {list-style-type:none;margin:0;}#main ul li {float:right;margin:0 6px;}.sd {width:1.5px;height:17px;background:#FF00FF ;}#main ul li a:link {background:#FFB3FF;font-weight:bold; color:#CC6666}#main ul li a:visited {font-weight:bold;background:#B94FFF;}#main ul li a:hover {font-weight:bold;background:#BBFF00;}#header {background:#FFA488;height:150px;}#content {float:left;width:550px;background:#FFBB00;line-height:25px;}#content  h2{margin: 0;padding: 0;padding-bottom:10px;}#content  p {margin: 0;padding: 0;padding-bottom:15px;}#content  .padding {padding: 20px;}.aa { font-family:华文行楷;font-size:20px;color:#770077;font-weight:bold;text-decoration:none;}#side {float:right;width:205px;background:#FF7744;line-height:25px;}#side h2{color:#3399CC;margin: 0;text-align:center;}hr {margin:0;padding:0;}#side ul li a{margin: 0;padding: 0;padding-bottom:9px;}#side  .padding {padding: 20px;}#footer {clear:both;background:#D28EFF;font-family:??_GB2312;font-size:14px;color:#660077 ;height:66px;border-top: 1px solid #FF8888;padding: 13px 25px;line-height: 20px;text-align:center;}#footer a {color: #5555FF;text-decoration:inherit;}#footer a:hover {color: #770077;}h1 {margin: 0;padding: 0;}



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="aduhom" content=adu_hom@126.com> <title>css布局示例</title><link href="css/css.css" rel="stylesheet" type="text/css"> </head><body><div id="container"><div id="main"><ul><li><a href="http://blog.sina.com.cn/lovergoodbye" >关于我</a></li><li class="sd"></li><li><a href="http://blog.sina.com.cn/adudesigner" >留言本</a></li><li class="sd"></li><li><a href="http://blog.sina.com.cn/adudesigner" >CSS布局</a></li><li class="sd"></li><li><a href="http://blog.sina.com.cn/adudesigner" >WEB标准</a></li><li class="sd"></li><li><a href="http://blog.sina.com.cn/adudesigner" >我的博客</a></li><li class="sd"></li><li><a href="http://blog.sina.com.cn/adudesigner" >我的主页</a></li></ul></div><div id="header"><img src="imag/about.jpg" alt="我的个人主页" width="760" height="150"/></div><div id="content"><div class="padding"><h2><img src="imag/logo_enlighten.gif"  alt="人生格言" width="236" height="36"/></h2><p><strong>"永远做你害怕的事,你应该每一两天做一些你不想做的事."</strong>这两句话，讲的都是同一个真理，它是人生进步的基础和上升的阶梯。容易走的都是下坡路，谁不想安安稳稳的走完人生，谁愿意累死活地跟自己过不去呢？可是，如果不这样，我们就不可能进步。让自己进步的方法很多，“每天做点困难的事”，“是逼”自己进步的办法。如果你是一位营销人员当众演讲是你最发怵的事情，那你就每天“逼”自己对着镜子练习讲话：如果你是一位公关人员，恰巧又是一个内向的人，那你就每天“逼”自己主动与主要的业务伙伴联系，或是打电话，或是相约见面。生存空间被无限压缩，每周工作时间被无限延伸，与此同时，有不少人被“剥夺”了工作的权利，被市场无情的淘汰。但那些每周工作时间不断延长的人们，却在愈加发奋的“提升”自我。我们固然希望工作时间越来越少、休息时间越来越多，然而，事实是无情的、残酷的、就像草原上的羚羊与狮子的生死角逐。记住，与其让别人淘汰自己，不如自己淘汰自己。</p><h2><img src="imag/logo_enlighten.gif" alt="我的联系方式"/></h2><p>姓名：杜修圣<br/>电话: 13426193533<br />传真: (07) 875 7547<br />Email: <a href="mailto:adu_hom@126.com" >adu_hom@126.com</a><br />职业: 网页设计师<br/>偶像：Lee_hom<br/>兴趣爱好:DIY网站，看球赛，看电影，听音乐<br/></p><p><a href="http://blog.sina.com.cn/lovergoodbye" class="aa">我的个人主页</a></p></div></div><div id="side"><hr><h2>文章分类</h2><hr><ul><li><a href="#" >XHTML教程</a></li><li><a href="#" >CSS2.0教程</a></li><li><a href="#" >CSS布局</a></li><li><a href="#" >WEB标准</a></li><li><a href="#" >DIV+CSS教程</a></li><li><a href="#" >CSS布局实例</a></li><li><a href="#" >CSS酷站及模板</a></li></ul><hr><h2>资源链接</h2><hr><ul><li><a href="#" >XHTML教程</a></li><li><a href="#" >CSS2.0教程</a></li><li><a href="#" >CSS布局</a></li><li><a href="#" >WEB标准</a></li><li><a href="#" >DIV+CSS教程</a></li><li><a href="#" >CSS布局实例</a></li></ul><hr><h2>站点导航</h2><hr><ul><li><a href="#" >XHTML在线手册</a></li><li><a href="#" >CSS2.0在先手册</a></li><li><a href="#" >JavaScript在线手册</a></li><li><a href="#" >.net在线视频</a></li></ul></div><div id="footer"><a href="#" >About</a> - <a href="#" >Services</a> - <a href="#" >Portfolio</a> - <a href="#" >Contact Us</a> - <a href="#" >Terms of Trade</a><br/>幼稚园下的一片天空，本博版权归 <a href="#" >幼稚园卧底</a> 和<a href="#" >京城Designer</a>所有<br/>北京网通提供网络带宽</div></div></body></html></body></html>




我的问题是   在这种布局里面    我点一下链接   我只希望在主窗口content 中变化内容  其它的导航部分不变化  页眉  页脚 也不能变，   我打开下一页   还要把这些内容一起写入下一页里面，是不是有点太累了！！！！100分诚心求教 一下,谢谢


回复讨论(解决方案)

可以外部连接一个网页到此网页！和CSS文件类似

可以外部连接一个网页到此网页！和CSS文件类似

你可以在底部链接一个外部网页！和CSS文件类似

这是个经典问题。解决方案有如下几种（但不限于）：
１、用iframe框架分割窗口，分别装载页头、页脚文件；
２、以include方式包含页头页脚文件；
３、以Ajax方式load页头页脚文件或代码；
４、以模板页或母板页方式设置页头页脚；

我的做法:
用不同的div完成不同的信息,用js更换div的内容即可.

我是新手能不能给些代码参考一下

fd619f8206d99acd32f7570ff957820d
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
b064ea1963483f6bff4d1dc648487091
6e279d8b8c44b5e0e5fb17f9796c22cd 
b2386ffb911b14667cb8f0f91ea547a7css布局示例6e916e0f7d1e588d4f442bf645aedb2f
e2387c854754b723d0013c1bda0b0c67 
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
ec9e539b02335acbbfd5a90c9acede68
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6eb0a468e95c04d1d22c94d16b0a95566关于我5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
dec5d329dfcb920500b37d9a2dda3460bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c661e75f8550dbeef26a1a25110d42ea9c留言本5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
dec5d329dfcb920500b37d9a2dda3460bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c661e75f8550dbeef26a1a25110d42ea9cCSS布局5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
dec5d329dfcb920500b37d9a2dda3460bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c661e75f8550dbeef26a1a25110d42ea9cWEB标准5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
dec5d329dfcb920500b37d9a2dda3460bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c661e75f8550dbeef26a1a25110d42ea9c我的博客5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
dec5d329dfcb920500b37d9a2dda3460bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c661e75f8550dbeef26a1a25110d42ea9c我的主页5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
202f555f0539d9b83c252ebeec097037
d5ba1642137c3f32f4f4493ae923989c可以任意修改iframe的内容.
e0e6b80c2b871989cf94b51f0a97caf2
4de7f166fcc9e016381fa981074c83d108b91d27979d415f1d0a895d7043ef6c16b28748ea4df4d9c2150843fecfba68
a6e374fd6c27f4b9d1f6db7dfd9d5066
81162cb24b352565f3aefe33fbc84417
c1a436a314ed609750bd7c7d319db4da
ce39ff2c358628c27da9540b521790122e9b454fa8428549ca2e64dfac4625cd
e388a4556c0f65e1904146cc1a846bee8e99a69fbe029cd4e2b854e244eab143"永远做你害怕的事,你应该每一两天做一些你不想做的事."128dba7a3a77be0113eb0bea6ea0a5d0这两句话，讲的都是同一个真理，它是人生进步的基础和上升的阶梯。容易走的都是下坡路，
谁不想安安稳稳的走完人生，谁愿意累死活地跟自己过不去呢？可是，如果不这样，我们就不可能进步。让自己进步的方法很多，“每天做点困难的事”，“是逼”自己进步的办法。
如果你是一位营销人员当众演讲是你最发怵的事情，那你就每天“逼”自己对着镜子练习讲话：如果你是一位公关人员，恰巧又是一个内向的人，那你就每天“逼”自己主动与主要的
业务伙伴联系，或是打电话，或是相约见面。生存空间被无限压缩，每周工作时间被无限延伸，与此同时，有不少人被“剥夺”了工作的权利，被市场无情的淘汰。
但那些每周工作时间不断延长的人们，却在愈加发奋的“提升”自我。我们固然希望工作时间越来越少、休息时间越来越多，然而，事实是无情的、残酷的、就像草原上的羚羊与狮子
的生死角逐。记住，与其让别人淘汰自己，不如自己淘汰自己。94b3e26ee717c64999d7867364b1b4a3

c1a436a314ed609750bd7c7d319db4da
8457decb7040dd0d8b5b062e54d7c907
2e9b454fa8428549ca2e64dfac4625cd
e388a4556c0f65e1904146cc1a846bee
姓名：杜修圣076402276aae5dbec7f672f8f4e5cc81
电话: 13426193533ff9d32c555bb1d9133a29eb4371c1213
传真: (07) 875 7547ff9d32c555bb1d9133a29eb4371c1213
Email: b0f17aaaa7438e2e94ed6db0adae3d3eadu_hom@126.com5db79b134e9f6b82c0b36e0489ee08edff9d32c555bb1d9133a29eb4371c1213
职业: 网页设计师076402276aae5dbec7f672f8f4e5cc81
偶像：Lee_hom076402276aae5dbec7f672f8f4e5cc81
兴趣爱好:DIY网站，看球赛，看电影，听音乐076402276aae5dbec7f672f8f4e5cc81
94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beef874c1988b44c1118817d02c87edc34f我的个人主页5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a316b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
969ae6090d0afd12a5bc51311b433759
f32b48428a809b51f04d3228cdf461fac1a436a314ed609750bd7c7d319db4da文章分类2e9b454fa8428549ca2e64dfac4625cdf32b48428a809b51f04d3228cdf461fa
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6804f1510e916549caca198418b1957e9XHTML教程5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6804f1510e916549caca198418b1957e9CSS2.0教程5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6804f1510e916549caca198418b1957e9CSS布局5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6804f1510e916549caca198418b1957e9WEB标准5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6804f1510e916549caca198418b1957e9DIV+CSS教程5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6804f1510e916549caca198418b1957e9CSS布局实例5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6804f1510e916549caca198418b1957e9CSS酷站及模板5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
f32b48428a809b51f04d3228cdf461fac1a436a314ed609750bd7c7d319db4da资源链接2e9b454fa8428549ca2e64dfac4625cdf32b48428a809b51f04d3228cdf461fa
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6804f1510e916549caca198418b1957e9XHTML教程5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6804f1510e916549caca198418b1957e9CSS2.0教程5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6804f1510e916549caca198418b1957e9CSS布局5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6804f1510e916549caca198418b1957e9WEB标准5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6804f1510e916549caca198418b1957e9DIV+CSS教程5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6804f1510e916549caca198418b1957e9CSS布局实例5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
f32b48428a809b51f04d3228cdf461fac1a436a314ed609750bd7c7d319db4da站点导航2e9b454fa8428549ca2e64dfac4625cdf32b48428a809b51f04d3228cdf461fa
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6804f1510e916549caca198418b1957e9XHTML在线手册5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6804f1510e916549caca198418b1957e9CSS2.0在先手册5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6804f1510e916549caca198418b1957e9JavaScript在线手册5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6804f1510e916549caca198418b1957e9.net在线视频5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
d5ba1642137c3f32f4f4493ae923989c
202f555f0539d9b83c252ebeec097037
cb8d7503cf17698f22935e80e47542b4
804f1510e916549caca198418b1957e9About5db79b134e9f6b82c0b36e0489ee08ed - 
804f1510e916549caca198418b1957e9Services5db79b134e9f6b82c0b36e0489ee08ed - 
804f1510e916549caca198418b1957e9Portfolio5db79b134e9f6b82c0b36e0489ee08ed - 
804f1510e916549caca198418b1957e9Contact Us5db79b134e9f6b82c0b36e0489ee08ed - 
804f1510e916549caca198418b1957e9Terms of Trade5db79b134e9f6b82c0b36e0489ee08ed076402276aae5dbec7f672f8f4e5cc81
幼稚园下的一片天空，本博版权归
 804f1510e916549caca198418b1957e9幼稚园卧底5db79b134e9f6b82c0b36e0489ee08ed 和
804f1510e916549caca198418b1957e9京城Designer5db79b134e9f6b82c0b36e0489ee08ed所有076402276aae5dbec7f672f8f4e5cc81
北京网通提供网络带宽
16b28748ea4df4d9c2150843fecfba68

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
36cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

用iframe方法好像会被别人利用，很多时候会被高手植入代码。
我很想知道如何用include的方法，能不能高手给点代码啊


加个图片   我只想每一页只变content部发的代码

如果你是用asp，那么： 

<body>  <div id="header"><!--#include file="header.asp"--></div>  <div id="content">这里是每页不同的内容</div>  <div id="footer"><!--#include file="footer.asp"--></div></body>


如果你是用asp.net，那么： 
<%@ Register Src="header.ascx" TagName="header" TagPrefix="uc1" %><%@ Register Src="footer.ascx" TagName="footer" TagPrefix="uc2" %><body>  <div id="header"><uc1:header ID="PageHeader" runat="server" /></div>  <div id="content">这里是每页不同的内容</div>  <div id="footer"><uc1:footer ID="PageFooter" runat="server" /></div></body>

其中header.asp或header.ascx就是固定不变的页头内容，footer.asp或footer.ascx则是固定不变的页脚内容。
一旦修改了页头或页脚文件，则所有包含该文件页面也自动更新。

如果你是用asp，那么： 

HTML code
6c04bd5ca3fcae76e30b72ad730ca86d
  4de7f166fcc9e016381fa981074c83d14a6a5119e4a9f1f22db79c95e3977eff16b28748ea4df4d9c2150843fecfba68
  a6e374fd6c27f4b9d1f6db7dfd9d5066这里是每页不同的内容16b28748ea4df4d9c2150843fecfba68
  cb8d7503cf17698f22935e80e47542b4148eae4b9ab4b6a46f62c5ff09ad8ba816b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956




如果你是用asp.net，那么： 

HTML code
32a9f25c7047e7a75c44ecabe3bd58fc
81a4eac46ffcae362dff130ae3478f05
        3695a6926938d0c878bf7cb8c067e1b2" />
    16b28748ea4df4d9c2150843fecfba68
145568c8126e0c7d9e2cd577fb1da924
6e0eda150e7db69c37c5b906ae4a8f97f1b3ba8846c179e65eb68da95b01a81259e7abc240f0c03572220cb57637ed8d公告e6e38b3c62e8df885fe2e3986461aa635db79b134e9f6b82c0b36e0489ee08ed
    283b8832127c5d128a35d952d50d98cdf1b3ba8846c179e65eb68da95b01a81259e7abc240f0c03572220cb57637ed8d转到e6e38b3c62e8df885fe2e3986461aa635db79b134e9f6b82c0b36e0489ee08ed
    5788e9a2e3bc98fa9cf0dcdb3c267fd6f1b3ba8846c179e65eb68da95b01a81259e7abc240f0c03572220cb57637ed8d报表e6e38b3c62e8df885fe2e3986461aa635db79b134e9f6b82c0b36e0489ee08ed
    0bfcc4f20bb7524351a220e1d6cd078cf1b3ba8846c179e65eb68da95b01a81259e7abc240f0c03572220cb57637ed8d设置e6e38b3c62e8df885fe2e3986461aa635db79b134e9f6b82c0b36e0489ee08ed
    e1f63517687553acbb57397a78984e4ef1b3ba8846c179e65eb68da95b01a81259e7abc240f0c03572220cb57637ed8d关闭e6e38b3c62e8df885fe2e3986461aa635db79b134e9f6b82c0b36e0489ee08ed
    4a2f949f597b7f8175879a1fc0732f04f1b3ba8846c179e65eb68da95b01a81259e7abc240f0c03572220cb57637ed8d帮助e6e38b3c62e8df885fe2e3986461aa635db79b134e9f6b82c0b36e0489ee08ed
16b28748ea4df4d9c2150843fecfba68

最简单的是用iframe
content部分: 

<div id="content"><iframe src="待定.html" wdith="400" height="300" frameborder="0"></div>

sidemenu部分: 
<a href="#" onclick="cmd(0);">菜单项目一</a>...


js部分: 
function cmd(n){  if(n==0)getElementById("content").src="你需要的网页地址.htm";  ...}

可以将不动的部分设计为一个模板

把他们写成一个公共的文件，要用的时候再去调用不就可以了吗 ？ 

这是个经典问题。解决方案有如下几种（但不限于）： 
１、用iframe框架分割窗口，分别装载页头、页脚文件； 
２、以include方式包含页头页脚文件； 
３、以Ajax方式load页头页脚文件或代码； 
４、以模板页或母板页方式设置页头页脚；


差不多 用以上四种方法 

你就这一点点内容，直接写到一个页面里面也行了。
用JS切换显示和隐藏各自不同的DIV内容就行了。

都是大侠

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Why can input width be set_html/css_WEB-ITnoseNext article：Why can input width be set_html/css_WEB-ITnose

Related articles

See more