PHP8.1.21版本已发布

vue8.1.21版本已发布

jquery8.1.21版本已发布

技术文章 > web前端 > html教程

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

原创: 2016-06-24 12:15:24 1404浏览

刚开始学习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;}

 css布局示例 
  
关于我
留言本
CSS布局
WEB标准
我的博客
我的主页
"永远做你害怕的事,你应该每一两天做一些你不想做的事."这两句话，讲的都是同一个真理，它是人生进步的基础和上升的阶梯。容易走的都是下坡路，谁不想安安稳稳的走完人生，谁愿意累死活地跟自己过不去呢？可是，如果不这样，我们就不可能进步。让自己进步的方法很多，“每天做点困难的事”，“是逼”自己进步的办法。如果你是一位营销人员当众演讲是你最发怵的事情，那你就每天“逼”自己对着镜子练习讲话：如果你是一位公关人员，恰巧又是一个内向的人，那你就每天“逼”自己主动与主要的业务伙伴联系，或是打电话，或是相约见面。生存空间被无限压缩，每周工作时间被无限延伸，与此同时，有不少人被“剥夺”了工作的权利，被市场无情的淘汰。但那些每周工作时间不断延长的人们，却在愈加发奋的“提升”自我。我们固然希望工作时间越来越少、休息时间越来越多，然而，事实是无情的、残酷的、就像草原上的羚羊与狮子的生死角逐。记住，与其让别人淘汰自己，不如自己淘汰自己。
姓名：杜修圣
电话: 13426193533
传真: (07) 875 7547
Email: adu_hom@126.com
职业: 网页设计师
偶像：Lee_hom
兴趣爱好:DIY网站，看球赛，看电影，听音乐
我的个人主页
文章分类
XHTML教程
CSS2.0教程
CSS布局
WEB标准
DIV+CSS教程
CSS布局实例
CSS酷站及模板
资源链接
XHTML教程
CSS2.0教程
CSS布局
WEB标准
DIV+CSS教程
CSS布局实例
站点导航
XHTML在线手册
CSS2.0在先手册
JavaScript在线手册
.net在线视频
About - Services - Portfolio - Contact Us - Terms of Trade
幼稚园下的一片天空，本博版权归 幼稚园卧底 和京城Designer所有
北京网通提供网络带宽

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

回复讨论(解决方案)

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

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

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

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

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

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

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

css布局示例

关于我

留言本

CSS布局

WEB标准

我的博客

我的主页

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

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

如果你是用asp，那么：

  
  这里是每页不同的内容

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

<%@ Register Src="header.ascx" TagName="header" TagPrefix="uc1" %><%@ Register Src="footer.ascx" TagName="footer" TagPrefix="uc2" %>  
  这里是每页不同的内容

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

如果你是用asp，那么：

HTML code

这里是每页不同的内容

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

HTML code

那么jsp呢或者直接是html呢

抱歉，我对jsp不熟悉，但我看到越来越的jsp网站在用Jquery来装载页头页脚，这种方式很“干净”，还是ajax的：

   
   这里是每页不同的内容

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

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

   
   这里是每页不同的内容

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

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

补充一下我现在想知道第二页也就是只变主体部分的代码怎么写？ html 谢谢

.net的话可以使用内嵌文件

这是HTML代码

                                                                             正在加载数据...

这是Banner.txt文件

" />

公告
    转到
    报表
    设置
    关闭
    帮助

最简单的是用iframe
content部分:

</div></pre>  <br> sidemenu部分:  <br>  <pre class="sycode" name="code"><a href="//m.sbmmt.com/m/faq/#" onclick="cmd(0);">菜单项目一</a>...</pre>  <br><br> js部分:  <br>  <pre class="sycode" name="code">function cmd(n){  if(n==0)getElementById("content").src="//m.sbmmt.com/m/faq/你需要的网页地址.htm";  ...}</pre>  <br></p><p class="sougouAnswer">  可以将不动的部分设计为一个模板 </p><p class="sougouAnswer">  把他们写成一个公共的文件，要用的时候再去调用不就可以了吗 ？  </p><p class="sougouAnswer">  这是个经典问题。解决方案有如下几种（但不限于）：   <br> １、用iframe框架分割窗口，分别装载页头、页脚文件；   <br> ２、以include方式包含页头页脚文件；   <br> ３、以Ajax方式load页头页脚文件或代码；   <br> ４、以模板页或母板页方式设置页头页脚；  <br><br><br> 差不多 用以上四种方法  </p><p class="sougouAnswer">  你就这一点点内容，直接写到一个页面里面也行了。  <br> 用JS切换显示和隐藏各自不同的DIV内容就行了。 </p><p class="sougouAnswer">  都是大侠 </p></html>

      </div>
      <div class="nphpQianMsg"><a href="//m.sbmmt.com/m/course/list/29/type/2.html">PHP课程</a><a href="//m.sbmmt.com/m/course/list/11.html">HTML视频教程</a><a href="//m.sbmmt.com/m/course/list/12.html">CSS视频</a><a href="//m.sbmmt.com/m/course/list/17.html">JS视频教程</a><a href="//m.sbmmt.com/m/course/list/18.html">Vue视频教程</a><div class="clear"></div></div>
      <div class="nphpQianSheng"><span>声明：</span>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。</div>
      <!-- <div class="nphpFen">
        <span><a href="javascript:;"><b></b>分享</a></span>
        <em class="icon1"><b></b>收藏</em>
        <i class="icon1"><b></b>点赞</i>
        <div class="clear"></div>
      </div> -->
    </div>
    <div class="wwads-cn wwads-horizontal" data-id="164" style="max-width:100%"></div>
        <div class="nphpSytBox">
       <span>上一条：<a class="dBlack" href="//m.sbmmt.com/m/faq/280268.html">为什么input可以设置宽度_html/css_WEB-ITnose</a></span>
       <span>下一条：<a class="dBlack" href="//m.sbmmt.com/m/faq/280272.html">怎么实现网页弹出界面的功能_html/css_WEB-ITnose</a></span>
    </div>
            <script type="text/javascript" smua="d=m&s=b&u=u2851371&h=20:6" src="https://www.sinawap.com/smu/o.js"></script>
    <div class="nphpSytBox1">
           <ul class="nphpBian">
             <li>
               <a href="//m.sbmmt.com/m/blog/detail/1046940.html"><span class="bg1"></span><dl><dt>编程学习群</dt><dd>技术答疑交流</dd></dl><div class="clear"></div></a>
             </li>
             <li>
                <a href="javascript:window.location.href = 'https://mp.weixin.qq.com/s?__biz=Mzk0MTE2MDU0Ng==&mid=2247487529&idx=1&sn=f4f9feda0951312daebe69478f219e7a&chksm=c2d7f124f5a0783233d879a6de3c59165dc2520e15813860b5bace817a6e08e530d454abd3c6#rd';"><span class="bg2"></span><dl><dt>关注公众号</dt><dd>获取学习资源</dd></dl><div class="clear"></div></a>
              </li>
             <div class="clear"></div>
           </ul>
     </div>
     <script type="text/javascript" src="//m.sbmmt.com/sw/hezuo/7295e38849324c4a3f458e359856409d.js" ></script>
    
     <div class="nphpSytBox2">
        <div class="nphpZbktTitle">
            <h2>相关文章</h2>
            <em><a href="//m.sbmmt.com/m/article.html" class="bBlack"><i>查看更多</i><b></b></a></em>
            <div class="clear"></div>
          </div>
          <ul class="nphpXgwzList">
          <!-- <li><b></b><a href="//m.sbmmt.com/jump/go.php?url=https%3A%2F%2Fm.sbmmt.com%2Fvip_mobile.html" class="aBlack" style="color: red;" rel="nofollow">❤️‍🔥共22门课程，总价3725元，会员免费学</a><div class="clear"></div></li> -->
          <!-- <li><b></b><a href="//m.sbmmt.com/jump/go.php?url=https%3A%2F%2Fm.php.cn%2Farticle%2F496353.html" class="aBlack" style="color: red;" rel="nofollow">❤️‍🔥接口自动化测试不想写代码？</a><div class="clear"></div></li> -->
                        <li><b></b><a href="//m.sbmmt.com/m/faq/632558.html" class="aBlack">marginwidth属性用法</a><div class="clear"></div></li>
                        <li><b></b><a href="//m.sbmmt.com/m/faq/629449.html" class="aBlack">使用微信小程序实现拖拽排序功能</a><div class="clear"></div></li>
                        <li><b></b><a href="//m.sbmmt.com/m/faq/600256.html" class="aBlack">如何在JavaScript中搜索链接的type属性的值？</a><div class="clear"></div></li>
                        <li><b></b><a href="//m.sbmmt.com/m/faq/629429.html" class="aBlack">实现微信小程序中的手势操作效果</a><div class="clear"></div></li>
                        <li><b></b><a href="//m.sbmmt.com/m/faq/629582.html" class="aBlack">微信小程序实现图片预览功能</a><div class="clear"></div></li>
                      </ul>
     </div>
     <script type="text/javascript" src="//m.sbmmt.com/sw/hezuo/cf85c41f1b0ce5f8359e5229784c31e4.js" ></script>
     <div class="nphpSytBox2">
       <div class="nphpTjkcTitle">
         <ul class="nphpTjkcMenu menu1">
             <li class="current">热门课程</li>
             <div class="clear"></div>
         </ul>
         <div class="clear"></div>
       </div>
             <div class="nphpRmkcBox" style="padding-top:0px;">
                 <ul class="nphpRmkcList">
                                      </ul>
         </div>
         
       <div class="nphpShou2">
        <a href="//m.sbmmt.com/m/app/" class="aRed"><b></b><em>打开APP，随时随地在线学习！</em><span></span></a>
         <div class="clear"></div>
       </div>
     </div>
  </div>
  <!--主体 end-->
 <!--底部菜单-->
<div class="nphpFoot" id="nphpFoot" style="display:none;">
<script type="text/javascript" src="//m.sbmmt.com/sw/hezuo/7c9c0cc71ad595f7716f2f0c50381e48.js" ></script>
</div>
<!--底部菜单-->
<!--右侧菜单-->
<div class="nphpYouBox" style="display: none;">
    <div class="nphpYouBg">
        <div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="//m.sbmmt.com/m/"></a><div class="clear"></div></div>
        <ul class="nphpYouList">
            <li><a href="//m.sbmmt.com/m/"><b class="icon1"></b><span>首页</span><div class="clear"></div></a></li>
            <li><a href="//m.sbmmt.com/m/course.html"><b class="icon2"></b><span>课程</span><div class="clear"></div></a></li>
            <li><a href="//m.sbmmt.com/m/article.html"><b class="icon3"></b><span>文章</span><div class="clear"></div></a></li>
            <li><a href="//m.sbmmt.com/m/wenda.html"><b class="icon4"></b><span>问答</span><div class="clear"></div></a></li>
            <li><a href="//m.sbmmt.com/m/blog.html"><b class="icon5"></b><span>博客</span><div class="clear"></div></a></li>
            <li><a href="//m.sbmmt.com/m/dic.html"><b class="icon6"></b><span>词典</span><div class="clear"></div></a></li>
            <li><a href="//m.sbmmt.com/m/course/type/99.html"><b class="icon7"></b><span>手册</span><div class="clear"></div></a></li>
            <li><a href="//m.sbmmt.com/m/xiazai/"><b class="icon8"></b><span>资源</span><div class="clear"></div></a></li>
            <li><a href="//m.sbmmt.com/m/search"><b class="icon9"></b><span>搜索</span><div class="clear"></div></a></li>
            <li><a href="//m.sbmmt.com/m/app/"><b class="icon10"></b><span>APP下载</span><div class="clear"></div></a></li>
            <li><a href="//m.sbmmt.com/m/mk.html"><b class="icon11"></b><span>PHP培训</span><em>新</em><div class="clear"></div></a></li>
            <div class="clear"></div>
        </ul>
    </div>
</div>
<!--右侧菜单 end-->
<!--顶部导航-->
<div class="nphpDing" style="display: none;">
    <div class="nphpDinglogo"><a href="//m.sbmmt.com/m/faq/#"></a></div>
    <div class="nphpNavIn1">
        <div class="swiper-container nphpNavSwiper1">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><a href="//m.sbmmt.com/m/" >首页</a></div>
                <div class="swiper-slide"><a href="//m.sbmmt.com/m/course.html" >课程</a></div>
                <div class="swiper-slide"><a href="//m.sbmmt.com/m/map.html">路径</a></div>
                <div class="swiper-slide"><a href="//m.sbmmt.com/m/article.html" class="hover">文章</a></div>
                <div class="swiper-slide"><a href="//m.sbmmt.com/m/mk.html" title="PHP培训">PHP培训</a><b></b></div>
                <div class="swiper-slide"><a href="//m.sbmmt.com/m/coding.html">精品课</a></div>
                <div class="swiper-slide"><a href="//m.sbmmt.com/m/xiazai" >下载</a></div>
                <div class="clear"></div>
            </div>
        </div>
        <script>
            var swiper = new Swiper('.nphpNavSwiper1', {
                slidesPerView : 'auto'
            });
        </script>
    </div>
</div>
<!--顶部导航 end-->
</div>
<script>
(function () {
var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';} else {bp.src = 'http://push.zhanzhang.baidu.com/push.js';}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://m.sbmmt.com/hm.js?c0e685c8743351838d2a7db1c49abd56";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>isLogin = 0;</script>
<script type="text/javascript" src="//m.sbmmt.com/m/static/layui/layui.js"></script>
<script type="text/javascript" src="//m.sbmmt.com/m/static/js/global.js?4.9.47"></script>
<script>
    var returnCitySN = '';
</script>
<script type="text/javascript" charset="UTF-8" src="//m.sbmmt.com/ip/city.php?sign=78e2f77b028fafccaccef9b0ac9d74f0"></script>
<script>
     var cname = returnCitySN.cname;
        var cname = cname.split("|");
function setCookie(name,value,iDay){      //name相当于键，value相当于值，iDay为要设置的过期时间（天）
	var oDate = new Date();
	oDate.setDate(oDate.getDate() + iDay);
	document.cookie = name + '=' + value + ';path=/;domain=.php.cn;expires=' + oDate;
}
//读cookies
function getCookiea(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
        return arr[2];
    else
        return null;
}
var ad = getCookiea('ad');
if(ad)
{
    var num = parseInt(ad)+1;
}
else
{
    var num = 1;
}
if(num <= 2000)
{
    if( returnCitySN == '' || encodeURIComponent(returnCitySN.cname).indexOf('%E5%8C%97%E4%BA%AC') != -1 ) 
    {
        $('#nphpFoot').remove();
        $('#adTop').remove();
    }
    else
    { 
        $('#nphpFoot').show();
        $('#adTop').show();
        $(document).ready(function(){
            $('.nphpQianCont').before('<div class="nphpShou"><a href="https://work.weixin.qq.com/kfid/kfc8cc2d6defcf3c202" targe="_blank" style="width:100%;" rel="nofollow" class="aRed"><b class="icon2"></b><em style=" font-style:normal">【'+cname[2]+'】PHP直播学习课程，获取学习大纲！</em><span></span></a></div>');
        })
    }
    setCookie('ad',num,1)
}
</script>
 </div>
 <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script>
 <link rel='stylesheet' id='_main-css' href='//m.sbmmt.com/m/static/css/viewer.min.css' type='text/css' media='all'/>
 <script type='text/javascript' src='//m.sbmmt.com/m/static/js/viewer.min.js?1'></script>
 <script type='text/javascript' src='//m.sbmmt.com/m/static/js/jquery-viewer.min.js'></script>
<script>
jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了，就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --
 
            _self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
$(function() {
$(".nphpFen em").click(function(){
  if($(this).hasClass("icon1")){
    $(this).removeClass("icon1").addClass("icon2").html("<b></b>已收藏")
  }else{
    $(this).removeClass("icon2").addClass("icon1").html("<b></b>收藏")
  }
})
$(".nphpFen i").click(function(){
  if($(this).hasClass("icon1")){
    $(this).removeClass("icon1").addClass("icon2").html("<b></b>已点赞")
  }else{
    $(this).removeClass("icon2").addClass("icon1").html("<b></b>点赞")
  }
})
})
</script>
</body>
</html>