读书人
栏目▼

CSS布局有关问题 100分下一页 有什么

发布时间： 2013-03-26 09:54:34 作者： rapoo

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 style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/../Images/Com/banner_board.gif" /><a href="#"><font color="white">公告</font></a>   
<img style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/../Images/Com/banner_goto.gif" /><a href="#"><font color="white">转到</font></a>   
<img style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/../Images/Com/banner_reporting.gif" /><a href="#"><font color="white">报表</font></a>   
<img style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/../Images/Com/banner_setting.gif" /><a href="#"><font color="white">设置</font></a>   
<img style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/../Images/Com/banner_shutdown.gif" /><a href="#"><font color="white">关闭</font></a>   
<img style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/../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页头页脚文件或代码；
４、以模板页或母板页方式设置页头页脚；



差不多 用以上四种方法

读书人网 >CSS

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net