Question

我的主要问题是我有一个.css样式表连接到3页，因为这真的只是形成一个模板，直到我可以决定我希望每个页面单独查看。

我在网站上进行了一些div定位，我认为它看起来不错，并且集中在大多数页面上......大多数。我有一个页面连接到正确的样式表，并将更改我添加到样式表的任何内容，除非某些div不会在这一页上移动。以下是有效页面的屏幕截图：

如果你仔细观察，你可以看到我的链接更多地转移到了右上角，我的主要内容部分也是如此。顺便说一句，本网站使用的其他两个链接与工作页面相同。

CODING（警告，那里可能有一些不必要的代码，但除了img src属性之外，所有网站上的编码完全相同，所以没有理由说所有页面看起来都不一样）：< / p>

有效的网页：

<!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=utf-8" />
<title>Teens For Antarctica Preservation</title>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>
  <p><a id="firstlink" href="index.html">TAP</a>
    <a id="rollover" href="whatis.html">Who is TAP</a>
    <a id="rollover" href="why.html">Why we do it</a>
    <a id="rollover" href="resources.html">Resources</a></p>
  <p>&nbsp;</p>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<img id="image" src="images/14_Seal2.jpg" /> <!-- TemplateEndEditable -->

<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>

<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
</body>
</html>

这是不起作用的网站代码：

<!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=utf-8" />
<title>Who is TAP?</title>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
  <p><a id="firstlink" href="index.html">TAP</a>
    <a id="rollover" href="whatis.html">Who is TAP</a>
    <a id="rollover" href="why.html">Why we do it</a>
    <a id="rollover" href="resources.html">Resources</a></p>
  <p>&nbsp;</p>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<img src="images/14_Teens.jpg" id="image"/><!-- TemplateEndEditable -->

<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>

<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>

</body>
</html>

这是我的CSS样式表：

@charset "utf-8";
/* CSS Document */

.header
{
    height: 150px;
    width: 100%;
    margin-left: 25px;
    margin-right: 50px;
    position:relative;
    left:0px;
    top:0px;
}

html
{
    width: 1000px;
    height: 650px;
    background-color:#D7D7FF;
}

    a#rollover:link, a#rollover:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#B8B8B8;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
border:1px solid #000;
float:left;
margin-top:30px;
}

a#rollover:hover, a#rollover:active
{
background-color:#A7A7A7;
}

a#firstlink:link, a#firstlink:visited
{
    display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#B8B8B8;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
border:1px solid #000;
float:left;
margin-top:30px;
margin-left:265px;
}

a#firstlink:hover, a#firstlink:active
{
    background-color:#A7A7A7;
}

#image
{
    height:230px; 
    width:300px; 
    float:left; 
    border: 3px solid #B5B5B5; 
    margin-left:150px; 
    margin-top:10px;
    border-radius:25px;
    box-shadow:10px 10px 6px #A3A3A3;

}


#main
{
    height:250px; 
    width:450px; 
    border:3px solid #B5B5B5; 
    margin-left:500px; 
    margin-top:15px;
    border-radius:25px;
    box-shadow:10px 10px 6px #A3A3A3;
    padding-left:10px;
    padding-top: 6px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight:400;
    background-color:#FFF;
}

#footer
{
    height:100px;
    bottom:0px;
    text-align:center;
    width:100%;
    padding-top:100px;
    padding-left:25px;
}

#pfoot
{
    margin-left:50px;
}

请提供有关如何解决此问题的任何问题。

Answer 1

工作

<div class="header">
   <div style="margin-left:200px;"> 
     <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
   </div>
 </div>

不工作

<div class="header">
    <div style="margin-left:200px;"> 
        <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
     </div>

在不工作的版本上，你错过了'header'的结束div

Answer 2

我知道，你的HTML代码不一样。

第一份文件

<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>

和第二份文件：

<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>

第二个文档不正确，因为您忘记关闭第二个div。

我的CSS样式表仅影响了我的4页中的3页。如何更新第4页？

2 个答案: