如何为我的网站的所有网页获得相同的页眉和页脚

时间：2013-09-06 11:58:58

标签： php html css

标题不会粘贴到所有网页的一个位置，它会不断改变位置。使用html，css和php构建网站，想到使用iframe但是去了php。包括 <?php include 'header.php';?>正好在body标记下方，stil标题会保留页面中的更改，

htmlcode位于：enter code here 

<!doctype html>
<html>
<head><link rel="stylesheet" type="text/css" 

href="headerstyle.css"/></head>
<body>

<div id="header">

<a href="https://twitter.com" title="Follow Me on Twitter" 

class="twitter social-slide" target="_blank"></a>

<a href="https://facebook.com" title="Follow Me on Facebook" 

class="facebook social-slide" target="_blank"></a>

<a href="https://plus.google.com" title="Follow Me on 

Google+" class="google plus social-slide" 

target="_blank"></a>

<a href="https://linkedin.com" title="Follow Me on Linkedin" 

class="linkedin social-slide" target="_blank"></a>


<div class="company">

<h1> Tech Processor</h1>
</div>

<div class="tagline">


<h5>We Grow with Technology</h5>
</div>



<div class="nav">
    <ul>
        <li class="logo"><a href="https://index.htm"><img 

src="images/home.png" border="0" /></a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Insights</a></li>
        <li><a href="#">Contact Us</a></li>
        <li class="search"><a><input type="text" 

value="Search" onclick="(this.value=='Search' ? this.value = 

'' : null)" /></a></li>
    </ul>
</div>




<div class="contact">
<a href="form.html"/contact" class="contact 

pNav">Enquiry</a>
</div>


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

css代码：

{

width,body,div,h1,h2,h3,width,padding,margin,height

}

html

{

height:170%

}

body

{

background-color:#79a2ff;


}

#header 

{
  background-color:#ffffff;
  height:125px;
  width:1372px;
  margin-left:-8px;
}


.company

{

  color:#acacac;
  padding-top:20px;
  padding-left:40px;
  margin-left:-1%;
  margin-top:-1% 



}

.tagline
{
  margin-top:-2%;
  margin-left:5%;
  padding:2px;
  positon:fixed;

}


.social-slide {

    height: 48px;
    width: 48px;
    margin:15px 5px 0px 10px;
    float: right;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;




}
.social-slide:hover {
    background-position: 0px -48px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.twitter {
    background-image: url('images/twitter.png');
}
.facebook {
    background-image: url('images/facebook.png');
}
.google {
    background-image: url('images/google plus.png');
}

.linkedin {
    background-image: url('images/linkedin.png');
}




a, a:hover, a:active, a:visited, a:visited:hover { text-

decoration: none; border: none; outline: none; }

div.nav {
    margin: 0px 0px 0px auto;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #fff #dfdfdf #dfdfdf #dfdfdf;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    display: table;
}

div.nav ul {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: #9f9f9f;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    background: -webkit-gradient(linear, left top, left 

bottom, from(#b3b3b3), to(#6e6e6e));
    background: -moz-linear-gradient(top,  #b3b3b3,  

#6e6e6e);
    filter: progid:DXImageTransform.Microsoft.gradient

(startColorstr='#b3b3b3', endColorstr='#6e6e6e');
    display: inline-block;
    list-style: none;
}

div.nav ul li {
    margin: 0px 1px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: -webkit-gradient(linear, left top, left 

bottom, from(#cecece), to(#8c8c8c));
    background: -moz-linear-gradient(top,  #cecece,  

#8c8c8c);
    filter: progid:DXImageTransform.Microsoft.gradient

(startColorstr='#cecece', endColorstr='#8c8c8c');
    float: left;
}
div.nav ul li:first-child {
    border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    -webkit-border-radius: 5px 0px 0px 5px;
}
div.nav ul li:last-child {
    margin-right: 0px !important;
    border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    -webkit-border-radius: 0px 5px 5px 0px;
}
div.nav ul li a {
    margin: 0px 1px 0px 1px;
    padding: 11px 33px 11px 33px;
    background: -webkit-gradient(linear, left top, left 

bottom, from(#cacaca), to(#848484));
    background: -moz-linear-gradient(top,  #cacaca,  

#848484);
    filter: progid:DXImageTransform.Microsoft.gradient

(startColorstr='#cacaca', endColorstr='#848484');
    float: left;
    /*-*/
    font-family: Lucida Sans, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #252525;
    text-shadow: #cecece 0px 1px 0px;
}

div.nav ul li:first-child a {
    border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    -webkit-border-radius: 5px 0px 0px 5px;
}
div.nav ul li:last-child a {
    margin-right: 0px !important;
    border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    -webkit-border-radius: 0px 5px 5px 0px;
}

div.nav ul li:hover {
    background: -webkit-gradient(linear, left top, left 

bottom, from(#999999), to(#5f5f5f));
    background: -moz-linear-gradient(top,  #999999,  

#5f5f5f);
    filter: progid:DXImageTransform.Microsoft.gradient

(startColorstr='#999999', endColorstr='#5f5f5f');
}
div.nav ul li:hover a {
    padding: 11px 33px 11px 33px;
    background: -webkit-gradient(linear, left top, left 

bottom, from(#929292), to(#535353));
    background: -moz-linear-gradient(top,  #929292,  

#535353);
    filter: progid:DXImageTransform.Microsoft.gradient

(startColorstr='#929292', endColorstr='#535353');
    /*-*/
    color: #fff;
    text-shadow: #454545 0px -1px 1px;
}
div.nav ul li:active {
    background: -webkit-gradient(linear, left top, left 

bottom, from(#242424), to(#3f3f3f));
    background: -moz-linear-gradient(top,  #242424,  

#3f3f3f);
    filter: progid:DXImageTransform.Microsoft.gradient

(startColorstr='#242424', endColorstr='#3f3f3f');
}
div.nav ul li:active a {
    margin: 0px 0px 0px 0px;
    padding: 9px 33px 11px 33px;
    border-width: 2px 1px 0px 1px;
    border-style: solid;
    border-color: #282928 #3f3f3f #525051 #3f3f3f;
    -webkit-box-shadow: inset 0 -10px 20px rgba(0, 0, 0, 

.05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255, 

255, 255, .1);
    -moz-box-shadow: inset 0 -10px 20px rgba(0, 0, 0, .05), 

inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255, 255, 255, 

.1);
    background: -webkit-gradient(linear, left top, left 

bottom, from(#999999), to(#5f5f5f));
    background: -moz-linear-gradient(top,  #999999,  

#5f5f5f);
    filter: progid:DXImageTransform.Microsoft.gradient

(startColorstr='#999999', endColorstr='#5f5f5f');
    color: #fff;
    text-shadow: #454545 0px -1px 1px;
}
div.nav ul li:last-child:active a {
    padding-right: 34px;
}
div.nav ul li.selected {
    background: -webkit-gradient(linear, left top, left 

bottom, from(#242424), to(#3f3f3f));
    background: -moz-linear-gradient(top,  #242424,  

#3f3f3f);
    filter: progid:DXImageTransform.Microsoft.gradient

(startColorstr='#242424', endColorstr='#3f3f3f');
}
div.nav ul li.selected a {
    margin: 0px 0px 0px 0px;
    padding: 9px 33px 11px 33px;
    border-width: 2px 1px 0px 1px;
    border-style: solid;
    border-color: #282928 #3f3f3f #525051 #3f3f3f;
    background: -webkit-gradient(linear, left top, left 

bottom, from(#373837), to(#525051));
    background: -moz-linear-gradient(top,  #373837,  

#525051);
    filter: progid:DXImageTransform.Microsoft.gradient

(startColorstr='#373837', endColorstr='#525051');
    /*-*/
    color: #fff;
    text-shadow: #454545 0px -1px 1px;
}
div.nav ul li.selected:last-child a {
    padding-right: 34px;
}

/*-----*/

div.nav ul li.logo a {
    padding: 5px 34px 7px 34px;
}
div.nav ul li.logo:active a {
    padding: 5px 35px 7px 35px;
    border: none;
}
div.nav ul li.logo a img { width: 24px; height: 24px; }

/*-----*/

div.nav ul li.search a {
    padding: 8px 9px 9px 7px;
}
div.nav ul li.search a input {
    width: 120px;
    height: 17px;
    padding: 0px 0px 0px 20px;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #888 #b0b0b0 #dedede #b0b0b0;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    background: #fff url(button_search.png) no-repeat 5px 

3px;
    /*-*/
    font-family: "Lucida Grande", "Lucida Sans Unicode", 

Arial, Verdana, sans-serif;
    font-size: 11px;
    color: #7e7e7e;
}
div.nav ul li.search:hover, div.nav ul li.search:active {
    background: -webkit-gradient(linear, left top, left 

bottom, from(#cecece), to(#8c8c8c));
    background: -moz-linear-gradient(top,  #cecece,  

#8c8c8c);
    filter: progid:DXImageTransform.Microsoft.gradient

(startColorstr='#cecece', endColorstr='#8c8c8c');
}
div.nav ul li.search:hover a, div.nav ul li.search:active a 

{
    margin: 0px 1px 0px 1px;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    background: -webkit-gradient(linear, left top, left 

bottom, from(#cacaca), to(#848484));
    background: -moz-linear-gradient(top,  #cacaca,  

#848484);
    filter: progid:DXImageTransform.Microsoft.gradient

(startColorstr='#cacaca', endColorstr='#848484');
}
div.nav ul li.search:active a {
    padding: 8px 9px 9px 7px;
}


.contact
{
-webkit-backface-visibility: hidden;
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-tap-highlight-color: rgb(0, 138, 255);
background-attachment: scroll;
background-clip: border-box;
background-color:#79a2ff;
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(92, 144, 188);
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(92, 144, 188);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(92, 144, 188);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(92, 144, 188);
border-top-style: solid;
border-top-width: 1px;
color:#ffffff;
cursor: pointer
display: block;
font-size: 16px;
font-style: normal;
font-weight: normal;
height: 20px;
letter-spacing: normal;
line-height: 20px;
opacity: 0.800000011920929;

right: 134.890625px;
text-align: center;
text-decoration: none;
text-shadow: rgb(0, 0, 0) 0px 1px 2px;
text-transform: uppercase;
top: 70px;
right:0px;
width: 100px;
position: fixed;
word-spacing: 0px;
z-index: 15;

}

1 个答案:

答案 0 :(得分：2)

如果您使用此结构：

some page.php：

<html>
  <head>..</head>
  <body>
    <?php include('header.php'); ?>
      <div> ..body content.. </div>
    <?php include('footer.php'); ?>
  </body>
</html>

并且您在每个页面上都包含相同的页眉和页脚，您已经设置好了。 只需确保在所有页面上以一致的方式包含包含。对此并不多。

如果您仍然遇到定位问题，可能会在您的css或html结构中发生一些事情。

更新： 你也许想解决这个问题：

<a href="form.html"/contact" class="contact 

pNav">Enquiry</a>
相关问题
最新问题