ホームページ >ウェブフロントエンド >htmlチュートリアル >CSSレイアウト問題100点 次のページ ナビゲーションフッターの著作権情報など、繰り返しの内容を書かないようにする方法はありますか_html/css_WEB-ITnose
CSSレイアウト問題100点 次のページ ナビゲーションフッターの著作権情報など、繰り返しの内容を書かないようにする方法はありますか_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:15:241670ブラウズ
刚开始学习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内容就行了。
都是大侠