做网站页面时，总是会把header部分做成一个统一的，然后在不同的页面引入。但是，不同的页面可能会有自己不同的样式，不同的js，当然还有不同的等信息。<pre>这些本来该通用的部分，因为这些而变的不同，大家是怎么解决的呢？<pre>我能想到的是两种解决方案<pre>+在header中做判断<pre>+把header在做细，只做通用的一部分，剩下的部分，还是让各个页面，自己来写。<pre><pre><pre></div>
<div class="info clearfix">
<div class="l"><img src="//img1.sycdn.imooc.com/533e4d00000171e602000200-100-100.jpg">海绵宝宝撒</div>
<div class="r"><span>浏览 296</span><span>回答 2</span></div>
</div>
<!--广告位-->
</section>
<div id="wap_wenda_detail" style="overflow:hidden;line-height:0;margin-bottom:.2rem; max-height:4.26666667rem">
</div>
<section>
<input type="hidden" id="searchRecommandInput" data-problems="解决不同作用域下数据传递的问题,同一域名设置问题,这个问题怎么解决,mac下打不开uiautomator，怎么解决？有遇到类似的问题同学吗">
<h5>2回答</h5>
<dl class="answer-list js-answer-list">
<dd id="499793">
<img src="//img1.sycdn.imooc.com/54584f6d0001759002200220-100-100.jpg" class="avator">
<p class="name">萧十郎</p>
<div class="content">在需要引用header的页面：header.php:</div>
<div class="action clearfix">
<div class="l">
<a href="javascript:void(0);" data-flag="support" class="like js-is-support js-support "><i class="imwap-thumb_up"></i><span class="js-support-num">0</span></a>
<a href="javascript:void(0);" data-flag="unsupport" class="like js-is-support js-unsupport "><i class="imwap-thumb_down"></i><span class="js-support-num">0</span></a>
</div>
<div class="r"><a href="/account/login">0<i class="imwap-comment"></i></a></div>
</div>
</dd>
<dd id="499794">
<img src="//img1.sycdn.imooc.com/5458477f0001cabd02200220-100-100.jpg" class="avator">
<p class="name">沧海一幻觉</p>
<div class="content">感觉这道题是在论模板存在的重要性啊。一般来说title往往就是显示文章名（变量）和网站标题（变量）这种，所以用if判断是比较方便的，各种博客主题（我接触这个比较多就单说这个了）也基本都是这样做的，类似于：至于CSS的话一般来说基本都是各个页面变化不大的，在这种情况下可以试着用条件判断为不同的页面增加一些不一样的id或者class属性，同时在style.css文件中分别描述修饰内容就好了，类似于下面这种：</div>
<div class="action clearfix">
<div class="l">
<a href="javascript:void(0);" data-flag="support" class="like js-is-support js-support "><i class="imwap-thumb_up"></i><span class="js-support-num">0</span></a>
<a href="javascript:void(0);" data-flag="unsupport" class="like js-is-support js-unsupport "><i class="imwap-thumb_down"></i><span class="js-support-num">0</span></a>
</div>
<div class="r"><a href="/account/login">0<i class="imwap-comment"></i></a></div>
</div>
</dd>
</dl>
</section>
<div class="wenda-more-wrap hide js-wenda-more">
<i class="imwap-zhankai js-more-wenda"></i>
<span class="appload-open js-appload-open">打开App，查看更多内容</span>
</div>
</div>
<div class="app-box shadow">
<img class="logo" src="/static/wap/static/common/img/logo-small@2x.png" />随时随地看视频<a id="js-appload" href="javascript:void(0);" class="r js-appload-open"">慕课网APP</a>
</div>
<div class="relate-box">
<p class="tit">相关分类</p>
<dl class="ques-list">
<dt class="clearfix">
<a href="/wenda/17" target="_blank">
<img class="left-img" src="//img1.sycdn.imooc.com/59e96f340001faac02400240.jpg"> JavaScript
</a>
</dt>
</dl>
</div>
</div>
<!-- 唤醒app弹窗 -->
<div class="app-box-black" style="display:none">
<div class="app-box-modal">
<div class="app-box-title">继续浏览精彩内容</div>
<div class="app-box-mkw">
<div class="app-mkw-logo"></div>
<div class="logo-title">慕课网APP</div>
<div class="logo-desc">程序员的梦工厂</div>
<div class="app-alive-btn js-zhuge-appload js-appload-open" id="js-appload-footer">打开</div>
</div>
<div class="app-box-webserve">
<img src='' class="webserve-logo">
<div class="webserve-name"></div>
<div class="webserve-btn js-go-on">继续</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var isLogin = false;
var wendaID = 533473;
window.onload = function() {
zhuge.track('ContentPage', {
'Category': '猿问',
'Name': '怎么解决统一header，引用不同css问题？',
'CID': wendaID,
'Price': 0
});
}
</script>
<script type="text/javascript">
var shareData = {
title: "怎么解决统一header，引用不同css问题？",
desc: "<pre>做网站页面时，总是会把header部分做成一个统一的，然后在不同的页面引入。但是，不同的页面可能会有自己不同的样式，不同的js，当然还有不同的<title>等信息。<pre>这些本来该通用的部分，因为这些而变的不同，大家是怎么解决的呢？<pre>我能想到的是两种解决方案<pre>+在header中做判断<pre>+把header在做细，只做通用的一部分，剩下的部分，还是让各个页面，自己来写。<pre><pre><pre>",
imgUrl: 'https://moco.imooc.com/static/base/images/logo-share.png',
otherImgUrl: '',
text: '我正在参加@慕课网的课程，很不错哦！快来一起学习吧！',
// url: 'https://www.imooc.com' + window.location.pathname + window.location.search
url: window.location.href,
link: window.location.href
}
</script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<!-- 微信分享 -->
<script type="text/javascript">
wx.config({
debug: false,
appId: 'wxe02b60dcb9fbd01f',
timestamp: '1736511991',
nonceStr: '(@*IMOOC+==+AK47%#)',
signature: '2a567ef268d189545bba2cfe8d3e95deb8d42498',
jsApiList: 'onMenuShareTimeline,onMenuShareAppMessage,onMenuShareQQ,onMenuShareWeibo'.split(',')
});
wx.ready(function() {
wx.onMenuShareTimeline(shareData);
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareQQ(shareData);
wx.onMenuShareWeibo(shareData);
});
</script>
<div style="display:none;">
<!-- 百度统计 -->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?c92536284537e1806a07ef3e6873f2b3";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<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);
})();
</script>
</div>
<script type="text/javascript" src="/static/wap/static/lib/zhugeio/init_455ad6a.js"></script><script type="text/javascript" src="/static/wap/static/common/js/jquery-2.1.0.min_ac9f840.js"></script><script type="text/javascript" src="/static/wap/static/common/js/common_be54bdc.js"></script><script type="text/javascript" src="/static/wap/static/lib/pretty/prettify_cedfcfe.js"></script><script type="text/javascript" src="/static/wap/static/common/js/msg_bed8d10.js"></script><script type="text/javascript" src="/static/wap/static/js/wenda/detail_2708af8.js"></script><script type="text/javascript" src="/static/wap/static/js/course/advertisementReport_6e58a98.js"></script></body>
</html>