Question

页面上的一个块稍微向下移动。正如您在屏幕截图中看到的，锚点会移动此块。但我没有为它设置任何高度。 Image

HTML：

<!doctype html>

<html>
<meta charset="utf-8">
<head>
    <title>Life in Arena</title>

    <link rel="stylesheet" type="text/css" href="css/style.css" >
</head>

<body>

        <header>

            <div id="mid-header">
                <div id="top-image-block">
                    <a href="index.html"><img src="images/logo.png" id="top-image"></a>
                </div>
                <ul id="main-menu">
                    <li class="top-menu-list"><a href="#" class="top-menu-link">LIAPEDIA</a></li>
                    <li class="top-menu-list"><a href="#" class="top-menu-link">GUIDES</a></li>
                    <li class="top-menu-list"><a href="#" class="top-menu-link">ABOUT</a></li>
                </ul>
            </div>

        </header>


        <div id="main-block">
            <div id="wide-column">

            </div>

            <div id="small-column">

            </div>

        </div>

        <footer>
            <div id="mid-footer">
                <img src="images/links.png" id="links-label">
                <div id="social-media-buttons">
                    <ul id="sm-list">
                        <li class="sm-button"><a href="http://vk.com/lifeinarena" target="_blank" class="sm-link"><img src="images/socvk.png"></a></li>
                        <li class="sm-button"><a href="https://twitter.com/LifeInArena" target="_blank" class="sm-link"><img src="images/soctwitter.png"></a></li>
                        <li class="sm-button"><a href="https://www.youtube.com/channel/UCe04DzYZgUIYzwXqZFF1_mA" target="_blank" class="sm-link"><img src="images/socyt.png"</a></li>
                    </ul>
                </div>
                <img src="images/wanttotelussomething.png" id="feedback-label">
                <div id="feedback-button">
                    <a href="#" target="_blank" id="feedback-link">Feedback</a>
                </div>
            </div>
        </footer>

</body>

</html>

CSS：身体 { 背景：线性渐变（到底部，＃292829，＃2e182a）; overflow-x：auto; 填充：0; 保证金：0; }

/* H E A D E R*/
header
{
    position: relative;
    background-color: #1a1818;
    width: 100%;
    height: 131px;
    margin: 0;
}

#mid-header
{
    margin: 0 auto;
    width: 1171px;
    height: 131px;
    background-color: #1a1818;
}

#top-image-block
{
    float: left;
    margin-right: 10px;
    left: 0;
    top: 0;
}

#top-image
{
    left: 0;
    top: 0;
}

#main-menu 
{
    list-style-type: none;
    margin-top: 60px;
    padding: 0;
    overflow: hidden;
    height: 40px;
    float: left;
}

.top-menu-list
{
    float: left;
    height: 131px;
}

.top-menu-list a 
{
    color: #b0b0b0;
    padding: 0px 14px;
    text-decoration: none;
    font-size: 20px;
    height: 131px;
    font-family: Arial, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, sans-serif;
}

.top-menu-list a:hover
{
    color: #eeeeee;
}


/* C O N T E N T*/
#main-block
{
    display: block;
    width: 1171px;
    height: 800px;
    margin: 0 auto;
}

#wide-column
{
    display: block;
    width: 812px;
    height: 100%;
    background-color: #22181d;  
    float:left;
}

#small-column
{
    display: block;
    width: 318px;
    height: 100%;
    background-color: #22181d;  
    float:left;
}

/* F O O T E R*/
footer
{
    background-color: #000000;
    min-width: 100%;
    left: 0;
    top: 0;
    margin: 0 auto;
    height: 350px;
}

#mid-footer
{ 
    width: 1171px;
    margin:0 auto;
    background-color: #000000;
    height: 160px;
    padding: 20px 15px;

}

#sm-list 
{
    list-style-type: none;
    margin: 20px 0 20px 0;
    padding: 0;
    overflow: hidden;
}
.sm-button
{
    float: left;
    margin-right: 10px;
}

.sm-button a 
{
    display: block;
    text-decoration: none;
}

#feedback-button
{
    width: 150px;
    height: 60px;
    margin-top: 20px;
    background-color: #1a84dd;  

}

#feedback-link
{
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 19px 14px;
    text-decoration: none;
    font-size: 22px;
    vertical-align: middle;
    height: 60px;
    letter-spacing: 1px;
    font-family: Arial, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, sans-serif;
}

锚点包含在id =＆＃34; top-image-block＆＃34;的块中。

锚点向下移动的块有id =＆＃34; main-block＆＃34;。

一个块稍微向下移动

0 个答案: