标题不会对所有网页都固定在一个位置，它会不断改变位置。使用 html、css 和 php 构建网站，曾想过使用 iframe，但选择了 php。包含
<?php include 'header.php';?>在 body 标签下方，stil header 保持页面中的变化，
html代码如下：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;
}