首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

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

2013-03-26 
CSS布局问题 100分下一页有什么办法不用写入重复的内容如导航页脚版权信息等刚开始学习css+xml问一下有关

CSS布局问题 100分下一页 有什么办法不用写入重复的内容如导航页脚版权信息等
刚开始学习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="CSS布局有关问题 100分下一页  有什么办法不用写入重复的内容如导航页脚版权信息等" width="760" height="150"/></div>
<div id="content">
<div class="padding">
<h2>
<img src="imag/logo_enlighten.gif"  alt="CSS布局有关问题 100分下一页  有什么办法不用写入重复的内容如导航页脚版权信息等" width="236" height="36"/></h2>
<p><strong>"永远做你害怕的事,你应该每一两天做一些你不想做的事."</strong>这两句话，讲的都是同一个真理，它是人生进步的基础和上升的阶梯。容易走的都是下坡路，
谁不想安安稳稳的走完人生，谁愿意累死活地跟自己过不去呢？可是，如果不这样，我们就不可能进步。让自己进步的方法很多，“每天做点困难的事”，“是逼”自己进步的办法。
如果你是一位营销人员当众演讲是你最发怵的事情，那你就每天“逼”自己对着镜子练习讲话：如果你是一位公关人员，恰巧又是一个内向的人，那你就每天“逼”自己主动与主要的
业务伙伴联系，或是打电话，或是相约见面。生存空间被无限压缩，每周工作时间被无限延伸，与此同时，有不少人被“剥夺”了工作的权利，被市场无情的淘汰。
但那些每周工作时间不断延长的人们，却在愈加发奋的“提升”自我。我们固然希望工作时间越来越少、休息时间越来越多，然而，事实是无情的、残酷的、就像草原上的羚羊与狮子
的生死角逐。记住，与其让别人淘汰自己，不如自己淘汰自己。</p>

<h2>
<img src="imag/logo_enlighten.gif" alt="CSS布局有关问题 100分下一页  有什么办法不用写入重复的内容如导航页脚版权信息等"/>
</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的内容即可.

[解决办法]
<!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="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>
<!--放在外面-->
<iframe>可以任意修改iframe的内容.
<div id="container">
<div id="header"><img src="imag/about.jpg" alt="CSS布局有关问题 100分下一页 有什么办法不用写入重复的内容如导航页脚版权信息等" width="760" height="150"/></div>
<div id="content">
<div class="padding">
<h2>
<img src="imag/logo_enlighten.gif"  alt="CSS布局有关问题 100分下一页 有什么办法不用写入重复的内容如导航页脚版权信息等" width="236" height="36"/></h2>
<p><strong>"永远做你害怕的事,你应该每一两天做一些你不想做的事."</strong>这两句话，讲的都是同一个真理，它是人生进步的基础和上升的阶梯。容易走的都是下坡路，
谁不想安安稳稳的走完人生，谁愿意累死活地跟自己过不去呢？可是，如果不这样，我们就不可能进步。让自己进步的方法很多，“每天做点困难的事”，“是逼”自己进步的办法。
如果你是一位营销人员当众演讲是你最发怵的事情，那你就每天“逼”自己对着镜子练习讲话：如果你是一位公关人员，恰巧又是一个内向的人，那你就每天“逼”自己主动与主要的
业务伙伴联系，或是打电话，或是相约见面。生存空间被无限压缩，每周工作时间被无限延伸，与此同时，有不少人被“剥夺”了工作的权利，被市场无情的淘汰。
但那些每周工作时间不断延长的人们，却在愈加发奋的“提升”自我。我们固然希望工作时间越来越少、休息时间越来越多，然而，事实是无情的、残酷的、就像草原上的羚羊与狮子
的生死角逐。记住，与其让别人淘汰自己，不如自己淘汰自己。</p>

<h2>
<img src="imag/logo_enlighten.gif" alt="CSS布局有关问题 100分下一页 有什么办法不用写入重复的内容如导航页脚版权信息等"/>
</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>
<iframe>
<!--放在外面-->
<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>

</body>
</html>
</body></html>

[解决办法]
如果你是用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则是固定不变的页脚内容。
一旦修改了页头或页脚文件，则所有包含该文件页面也自动更新。
[解决办法]
抱歉，我对jsp不熟悉，但我看到越来越的jsp网站在用Jquery来装载页头页脚，这种方式很“干净”，还是ajax的：

<body> 
  <div id="header"></div> 
  <div id="content">这里是每页不同的内容 </div> 
  <div id="footer"></div> 
</body>  
 


function loadHeader_Footer()
{
  $("#header").load("header.html"); //也可以是jsp、xml甚至txt文件，都能load进页面
  $("#footer").load("footer.html");
}

很显然，对于纯html页面也完全可以用Jquery或直接用Javascript实现页头页脚装载！
如：

<body> 
  <div id="header"><script src="header.js"></script></div> 
  <div id="content">这里是每页不同的内容 </div> 
  <div id="footer"><script src="footer.js"></script></div> 
</body> 

还有一个较老的方法可以实现在一个html中包含其他html文件，就是:

<object type="text/x-scriptlet" data="header.html"></object>

但上面的方法由于安全性等方面原因，很多浏览器会要求确认才能正常显示。
此外如果不考虑浏览器兼容问题，也可以使用Behavior的download方式，此方式仅IE浏览器能正确识别。
[解决办法]
.net的话可以使用内嵌文件

这是HTML代码

<body >
    <form id="form1" runat="server">
                     <div id="T">
                <!-- #include file="../../Com/Banner.txt" -->
                <div id="OT">
                    正在加载数据...
                </div>
            </div>


这是Banner.txt文件

<div id="TL">
        <img src="<%=imgurl %>" />
    </div>
<div id="TR">
<img src="../../../Images/Com/banner_board.gif" /><a href="#"><font color="white">公告</font></a>&nbsp;&nbsp;&nbsp;
    <img src="../../../Images/Com/banner_goto.gif" /><a href="#"><font color="white">转到</font></a>&nbsp;&nbsp;&nbsp;
    <img src="../../../Images/Com/banner_reporting.gif" /><a href="#"><font color="white">报表</font></a>&nbsp;&nbsp;&nbsp;
    <img src="../../../Images/Com/banner_setting.gif" /><a href="#"><font color="white">设置</font></a>&nbsp;&nbsp;&nbsp;
    <img src="../../../Images/Com/banner_shutdown.gif" /><a href="#"><font color="white">关闭</font></a>&nbsp;&nbsp;&nbsp;
    <img src="../../../Images/Com/banner_help.gif" /><a href="#"><font color="white">帮助</font></a>
</div>
[解决办法]
最简单的是用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页头页脚文件或代码； 
４、以模板页或母板页方式设置页头页脚；



差不多 用以上四种方法 

读书人精选
热点排行