个人中心
gpt4 book ai didi

html - 我的 CSS 样式表只影响了 4 个页面中的 3 个。我如何更新第 4 页？

转载 作者：太空宇宙 更新时间：2023-11-03 21:45:12 24 4
gpt4 key购买 nike

我这里的主要问题是我有一个 .css 样式表连接到 3 页，因为这实际上只是暂时形成一个模板，直到我可以决定我希望每个页面如何单独显示。

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

a working example Click here

还有一个没有: a non-working example Click here

如果仔细观察，您会发现我的链接更多地移到了右上角，我的主要内容部分也是如此。顺便说一下，本网站中使用的其他两个链接看起来与工作页面相同。

CODING(警告，那里可能有一些不必要的代码，但除了 img src 属性之外，所有网站的编码都完全相同，因此没有理由所有页面看起来都不一样):

有效的页面:

<!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;
}




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

最佳答案

工作

<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

关于html - 我的 CSS 样式表只影响了 4 个页面中的 3 个。我如何更新第 4 页？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21000483/

24 4 0
文章推荐： c# - 如何获取安装程序类中安装 MSI 的路径
文章推荐： python - Excel 模糊查找中使用的算法
文章推荐： c# - 忽略 MVC 模型中的 REGEX 或根据用户输入选择另一个 REGEX
文章推荐： android - 哪个是 HSV 皮肤检测器 openCV android 的颜色空间？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com