Question

我真的很难找到在我网站底部制作灰色空间的内容。这是我第一次尝试任何编码，所以任何简单的答案都会非常感激。我确信代码/冲突代码中有很多错误但是我一直在尝试媒体查询，也可能会让事情出错？任何帮助都会很受欢迎......到目前为止，这是代码......

<!DOCTYPE HTML>

<html>

<head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>

<style>


a:link {
text-decoration: none;
font-family: "georgia";
font-style: normal;
font-size: 20px;
        font-weight:lighter;
        color: #7a5131; 
}

a:visited {
text-decoration: none;
font-family: "georgia";
font-style: normal;
        font-weight:lighter;
        color: #7a5131; 
}

a:hover {
text-decoration: none;
font-style: normal;
font-family: "georgia";
        font-weight:lighter;
        color: #c57b43; 
}

a:active {
text-decoration: none;
font-style: normal;
font-family: "georgia";
        font-weight:lighter;
        color: #7a5131; 
}

* {
padding: 0px;
margin: 0px;
margin-top: -5px;


}

#footer { 

    position: fixed; 
    clear: both; 
    width: 104%; 
    height: 30px; 
    bottom: 0; 
    border: none; 
    padding: 13px 0 0 0; 
    text-align: 
    center; color: #ffffff; 
    background-color: #ffffff; }


body {
    background-color:grey;
    height: auto;
    background-size: 100% 100%\9


    }











}

#container {
        width: 100%;
        height: auto;

        color:blue;
        margin-left:0;
        padding-left: 0;
        margin-top: 0;
        padding-top: 0; 
        position: absolute;


    }
        #nav {
        width: 100%;
        height: 100%;
        text-align: center;
        margin-left:0;
        padding-left: 0;
        padding-top: 0px;
        height: 100px;
        font-family: "georgia";
        font-weight:lighter;
        color: #7a5131; 
        font-size: 20px;
        word-spacing: 20px;
        float:left;

}   



navtype { 
        position: absolute; 
        top: 60px; 
        left: 0; 
        width: 100%;
        font-family: "georgia";
        font-weight:lighter;
        color: #7a5131; 
        font-size: 20px;
        word-spacing: 20px;

}

#images { 
        position: relative;
        width:100%; /* you can use % */
        height: auto;
        font-family: "georgia";
        font-weight:lighter;
        color: #7a5131; 
        font-size: 20px;
        top: 0px;
}






        #fullscreen  {
        position: relative;
        width:100%; /* you can use % */
        height: auto;
        margin-left: auto;
        margin-right: auto;
        padding-top: 40px;
        padding-bottom: 0px;
        min-width: 50%;
        text-align: center;


        }



        #test  {
        position: absolute;
        width:100%; /* you can use % */
        height: auto;
        margin-left: auto;
        margin-right: auto;
        min-width: 50%;
        text-align: center;
        background-size: 100%;
        background-position: top center;
        background-repeat: no-repeat;
        display: block;


        }








    #ourstory {
        position: relative;
        width:100%; /* you can use % */
        height: auto;
        margin-left: auto;
        margin-right: auto;
        padding-top: 40px;
        padding-bottom: 50px;
        min-width: 50%;

        text-align: center;


        background-image: url("/Users/DESIGNHAPPY04/Desktop/NEW 
  SCROLL DOWNSITE/images/storyback.jpg" );
        background-size: 100%;



}

#type { 
        position: relative;
        margin-left: 15%;
        margin-right: auto;
        max-width: 70%;
        font-family: "georgia";
        font-style: italic;
        font-weight:lighter;
        color: #5f4029; 
        line-height: 180%;
        font-size: 15px;


}



@media all and (min-width: 601px) {
#test {background-image:url("/Users/DESIGNHAPPY04/Desktop/NEW 
SCROLL DOWN SITE/images/breaker.jpg" );
width:100%;height:100%;


}
}
@media all and (max-width: 600px) {
#test {background-image:url("/Users/DESIGNHAPPY04/Desktop/NEW 
SCROLL DOWN SITE/images/breakermobile.jpg" );width:100%;height:100%;



}


    #type {

    position: relative;
        margin-left: 15%;
        margin-right: auto;
        max-width: 70%;
        font-family: "georgia";
        font-style: italic;
        font-weight:lighter;
        color: #5f4029; 
        line-height: 180%;
        font-size: 10px;


}

a:link {
text-decoration: none;
font-family: "georgia";
font-style: normal;
font-size: 13px;
        font-weight:lighter;
        color: #7a5131; 
}

a:visited {
text-decoration: none;
font-family: "georgia";
font-style: normal;
        font-weight:lighter;
        color: #7a5131; 
}

a:hover {
text-decoration: none;
font-style: normal;
font-family: "georgia";
        font-weight:lighter;
        color: #c57b43; 
}

a:active {
text-decoration: none;
font-style: normal;
font-family: "georgia";
        font-weight:lighter;
        color: #7a5131; 
}

* {
padding: 0px;
margin: 0px;
margin-top: -5px;


}

    #nav {
        width: 100%;

        text-align: center;
        margin-left:0;
        padding-left: 0;
        padding-top: 0px;
        height: 60px;
        font-family: "georgia";
        font-weight:lighter;
        color: #7a5131; 
        font-size: 20px;
        word-spacing: 20px;
        position:relative;

    }   



    navtype { 
        position: absolute; 
        top: 30px; 
        left: 0; 
        width: 100%;
        font-family: "georgia";
        font-weight:lighter;
        color: #7a5131; 
        font-size: 20px;
        word-spacing: 20px;
}









}




</style>    



</head>

<body>





<div id="container">

    <div id="nav">

    <navtype><span>
    <a href="#storyanchor"class="smoothScroll">Story</a> 
    <a href="#testimonial"class="smoothScroll">Testimonial</a>  
    <a href="#recipes"class="smoothScroll">Recipes</a> 
    <a href="#ourspreads"class="smoothScroll">Spreads</a>             
    </span></navtype>

    <a name="top"></a>

    <img src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/            images/headerbar.jpg" 
    alt="HTML5 Icon"style="width:100%;height:100%">
    </div>



    <div id="images">

    <img src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/            images/landscape.jpg" 
    alt="HTML5 Icon"style="width:100%;height:100%">

    </div>





    <div id="ourstory">

    <a name="storyanchor"></a> 

    <div id="images">

    <img src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/            images/storypics.png" 
    alt="HTML5 Icon"style="width:100%;height:100%">

    </div>



    <div id="type">

    How it all began
    <br>

    The emergence and growth of blogs in the late 1990s coincided           with the advent o
    web publishing tools that facilitated the           posting of &nbsp;content by non tec

 (Previously, &nbsp;a knowledge &nbsp;of &nbsp;such technologies    as HTML and  FTpu                                             Indeed, bloggers do not only produce content to post on theirblogs, but also build social relations
    <br><br>
    <a href="#storyanchor">Click Here For More Recipe ideas </a>
    </div>



</div>



            <a name="testimonial"></a>
        <img src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/images/breaker.jpg" 
    alt="HTML5 Icon"style="width:100%;height:100%">








</div>




    <div id="ourstory">

    <a name="ourspreads"></a> 

    <div id="images">

    <img src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/            images/jars.png" 
    alt="HTML5 Icon"style="width:100%;height:100%">

    </div>



    <div id="type">

    Our Spreads and Jams
    <br>

    The emergence and growth of blogs in the late 1990s coincided           with the advent of `      web publishing tools that facilitated the             posting of &nbsp;content by &nbsp;non-technical users. &nbsp;           (Previously, &nbsp;a knowledge &nbsp;of &nbsp;such technologies         as HTML and FTP had been required to publish ;content on the            Web.)Indeed, bloggers do not only produce content to post on their      blogs, but also build social relations

    </div>


        <div id="fullscreen">


        <a name="recipes"></a>      
    <div id="images">

    <img src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/            images/recipes.jpg" 
    alt="HTML5 Icon"style="width:100%;height:100%">

    </div>



    </div>


    <div id="test">


    </div>

</div>


<div id="footer">
<a href="#top"class="smoothScroll">Back to top</a></p>

</div> <!--END OFCONTAINER browser-->

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/java/smoothscroll.js"></script>
</body>

</html>

Answer 1

祝贺您自己的网站编码。以下是可能导致奇怪差距的一些事情：

两种影响间距的默认CSS样式

图片下的小空间，这可能是您的错误。一个快速解决方法是将图像更改为display:block;。另一种解决方案是使用vertical-align: bottom;，如这篇简单的文章所示：http://salman-w.blogspot.com/2012/10/remove-space-below-images-and-inline-block-elements.html
保证金折叠发生在一个html元素（div，标题...）的顶部或底部边距触及另一个没有边框，填充或其他任何内容的情况下。删除一个边距或将边距添加到一起，并且仅应用于一个元素。有关详细信息，请参阅此文章：http://www.sitepoint.com/web-foundations/collapsing-margins/

代码中的潜在问题：

正如Sable Foste建议的那样，通过验证器运行代码，并专注于代码错误。（您可能无法修复验证程序建议的所有内容。）请记住修复上述注释中提到的错误，同时修复页脚中缺少的开始<p>标记，并删除额外的右括号{{1在body和navtype下的css中。添加其他媒体查询右括号}（它们需要2：一个用于实际样式，一个用于关闭媒体查询）。请记住通过删除margin-top：-5px来修复}，并将其仅分配给需要-5px上边距的样式。这些看似微不足道，但编码错误会对您的布局造成严重破坏。
看起来您在底部使用* {padding: 0px; margin:0px; margin-top:-5px;}来测试媒体查询。您可以使用<div id="test">隐藏常规css中的div，并通过在媒体查询中添加#test {display:none;}将其重新打开。这可以帮助您查看测试div是否导致问题。

您询问有关使用代码段的信息。由于这是一个完整的网页，也许JSFiddle会有所帮助。

JSFiddle Tutorial - 此网站允许您将html，css和脚本粘贴到单独的可编辑环境中。然后它会在一个小浏览器窗口中显示结果。您可以粘贴该链接，我们可以在真实环境中进行故障排除和演示修复。例如，您提供的代码不会显示您的问题，但如果您在JSFiddle中使用它，我们可以看到问题，帮助解决问题，并提供真实的示例解决方案。如果您有JSFiddle示例，那么人们更愿意提供帮助。

实用信息

开发人员工具 - 了解如何在浏览器中使用内置的开发人员工具，因为在您对网站进行问题排查时，它会成为您最好的朋友。（和我们其他人一样，这不是你的最后一个错误）。您可以查看您的html和css代码，它还具有能够关闭甚至删除html元素和CSS样式的额外好处。这有助于快速找到有问题的元素。在此环境中进行编辑是安全的，因为更改位于浏览器中，并且不会更改您的实际代码。在浏览器中点击F12打开开发人员工具，然后在浏览器窗口中使用小箭头和鼠标悬停元素，以及下面显示的代码。右键单击元素以查看更多选项。您可以将Firefox与可下载的Firebug extensions一起使用。这可以让你编辑html和css。很多人都喜欢Chrome的开发者工具，你很幸运，因为CodeSchool提供了一个有趣，免费且简单的课程。它非常值得您花时间去学习，因为在您解决一个错误的时候，您可以完成这个课程。

使用本网站时，请提供有用的评论和答案，并接受解决问题的答案。 Upvoting和接受建立你的声誉，并表明你是一个积极的参与者，你自己的问题，它建立了回答你的问题的人的声誉，并建立了问题的声誉。如果您找到自己的解决方案，发布修补程序会很有帮助。

我无法找到在我的网站底部创建空间的内容

1 个答案: