body,div,dl,dd,dt,ul,li,h1,h2,h3,h4,h5,h6,input,form,a,p,textarea{
margin:0px
padding:0px
}
ol,ul,li{
list-style:none
}
a{
text-decoration: none
display: block
color:#fff
}
img{
border:none
display: block
}
.clearfloat{
zoom:1
}
.clearfloat:after{
display: block
clear:both
content:""
visibility:hidden
height:0
}
还是这个
.public-container{
/*position:relative如果子元素没有绝对定位的，其实是不需要写这个的*/
position:relative
width:1100px
margin:0 auto
}
.public-header .header-logo{
float:left
background-image: url("../images/logo.png")
margin-top:40px
}
.public-header .header-logo a{
width:182px
height:54px
}
.public-header .header-nav{
float:right
margin-top:44px
}
.public-header .header-nav .item{
float:left
margin-left:50px
/*color: #3b3b3b这里写是没用的*/
}
.public-header .header-nav a {
color: #3b3b3b
}
.public-header .header-nav a:hover{
text-decoration: underline
}
.public-footer{
height:218px
background-color: #3b3b3b
padding-top:100px
}
.public-footer .footer-col{
width:230px
float:left
margin-right:60px
font-size:16px
color:#fff
lineheight:1.8
}
.public-footer .footer-col:last-child{
margin-right:0px
}
.public-footer .footer-logo{
width:182px
height:54px
margin-top:-10px
margin-bottom:10px
background-image: url("../images/logo-white.png")
}
关于这个问题常规的实现方法有两种！
使用js调用公共部分的代码，插入到HTML文件中。
如代码：
<!doctype html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title></title>
</head>
<body>
<!--header.js里面调用你所需要的公共头部的页面代码--><script type="text/javascript" src="/js/header.js"></script>
<!--页面主题部分-->
<!--footer.js里面调用你所需要的公共头部的页面代码--><script src="/js/footer.js"></script>
</body>
</html>
使用PHP或其他后台语言调用（smarty模板引擎）。
代码以dedecms的程序为例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset={dede:global.cfg_soft_lang/}">
<meta name="mobile-agent" content="format=html5 url={dede:global.cfg_wapurl/}">
<link rel="alternate" media="only screen and(max-width: 640px)" href="{dede:global.cfg_wapurl/}" >
<title>{dede:global.cfg_webname/}</title>
{dede:include filename="head.htm"/}<!--调用的公共页面头部-->
<!--网页主体部分-->
{dede:include filename="footer.htm"/}<!--调用的公共页面底部-->
</html>
<!--第一种：jquery获取dom内的id，直接加载想要引入的页面-->
<div id="page"></div>
<script>
$("#page").load("header.html")
</script>
<!--第二种：引入include.js文件，然后用include标签加载想要的页面
代码如下-->
<script>
(function(window, document, undefined) {
var Include39485748323 = function() {}
Include39485748323.prototype = {
//倒序循环
forEach: function(array, callback) {
var size = array.length
for(var i = size - 1 i >= 0 i--){
callback.apply(array[i], [i])
}
},
getFilePath: function() {
var curWwwPath=window.document.location.href
var pathName=window.document.location.pathname
var localhostPaht=curWwwPath.substring(0,curWwwPath.indexOf(pathName))
var projectName=pathName.substring(0,pathName.substr(1).lastIndexOf('/')+1)
return localhostPaht+projectName
},
//获取文件内容
getFileContent: function(url) {
var ie = navigator.userAgent.indexOf('MSIE') > 0
var o = ie ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest()
o.open('get', url, false)
o.send(null)
return o.responseText
},
parseNode: function(content) {
var objE = document.createElement("div")
objE.innerHTML = content
return objE.childNodes
},
executeScript: function(content) {
var mac = /<script>([\s\S]*?)<\/script>/g
var r = ""
while(r = mac.exec(content)) {
eval(r[1])
}
},
getHtml: function(content) {
var mac = /<script>([\s\S]*?)<\/script>/g
content.replace(mac, "")
return content
},
getPrevCount: function(src) {
var mac = /\.\.\//g
var count = 0
while(mac.exec(src)) {
count++
}
return count
},
getRequestUrl: function(filePath, src) {
if(/http:\/\//g.test(src)){ return src }
var prevCount = this.getPrevCount(src)
while(prevCount--) {
filePath = filePath.substring(0,filePath.substr(1).lastIndexOf('/')+1)
}
return filePath + "/"+src.replace(/\.\.\//g, "")
},
replaceIncludeElements: function() {
var $this = this
var filePath = $this.getFilePath()
var includeTals = document.getElementsByTagName("include")
this.forEach(includeTals, function() {
//拿到路径
var src = this.getAttribute("src")
//拿到文件内容
var content = $this.getFileContent($this.getRequestUrl(filePath, src))
//将文本转换成节点
var parent = this.parentNode
var includeNodes = $this.parseNode($this.getHtml(content))
var size = includeNodes.length
for(var i = 0 i < size i++) {
parent.insertBefore(includeNodes[0], this)
}
//执行文本中的额javascript
$this.executeScript(content)
parent.removeChild(this)
//替换元素 this.parentNode.replaceChild(includeNodes[1], this)
})
}
}
window.onload = function() {
new Include39485748323().replaceIncludeElements()
}
})(window, document)
</script>
<!--下面引入文件-->
<include src="header.html"></include>
<!--第三种： 用inframe框架加载页面， 兼容性不好-->
<iframe src="xxx.html"></iframe>
