首頁 > web前端 > html教學 > CSS布局问题 100分下一页 有什么办法不用写入重复的内容如导航页脚版权信息等_html/css_WEB-ITnose

CSS布局问题 100分下一页 有什么办法不用写入重复的内容如导航页脚版权信息等_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:15:24
原創
1683 人瀏覽過

刚开始学习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"    style="max-width:90%"/></div><div id="content"><div class="padding"><h2><img src="imag/logo_enlighten.gif"  alt="人生格言" width="236"    style="max-width:90%"/></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文件类似

这是个经典问题。解决方案有如下几种(但不限于):
1、用iframe框架分割窗口,分别装载页头、页脚文件;
2、以include方式包含页头页脚文件;
3、以Ajax方式load页头页脚文件或代码;
4、以模板页或母板页方式设置页头页脚;

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

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

"http://www.w3.org/TR/html4/loose.dtd">




css布局示例