-3

ウェブサイトの slicknav-menu と top-part の 2 つの要素の間のスペースを削減しようとしています。

以下はcssコードです 

#banner {
        /*background: url("assets/upload/compressed.jpg") no-repeat center center fixed;*/

}

#banner .big-text {
  /*color: white;*/
  /*color: #7dcbbb;*/
  /*font-size: 2.5em;*/
  /*margin-top: 80px;*/
  /*font-weight: 0;*/

}

#banner .small-text {
  /*color: white;*/
  /*color: #7dcbbb;*/
  /*font-size: 2em;*/

}



@media (max-width: 350px){
    #banner .big-text {
      /*color: black;*/
    }
    #banner .small-text {
      /*color: black;*/
    }



}

.slicknav_menu {
    display:none;
}

#top_part{
    margin-bottom: 0 auto;

}

#work{
    margin-bottom: 50px;
}

@media screen and (max-width: 50em) {
    /* #menu is the original menu */
    .js .navbar {
        display:none;
    }

    .js .slicknav_menu {
        z-index: -1;
        display:block;
        color: white;
        float: right;
        background: black;
        right: 0px;
        position: fixed;
        margin-top: -3px;
    }
}

@media screen and (max-width: 1100px) {
    #work-preview li {
        width: 49%;
    }
}

@media screen and (max-width: 800px) {
    #top_part{
        margin-bottom: 150px;
    }
}

@media screen and (max-width: 700px) {
    #work-preview li {
        width: 99%;
    }
}

@media screen and (max-width: 400px) {    
    #top_part{
        margin-bottom: 100px;
    }
}

ここにいくつかのhtmlコードもあります。背景にバナーがあり、上部のリンクと現在ページの中央にあるテキストの最初の要素の間のスペースを減らそうとしていますが、それを引っ張りたいです上

<body>


        <!-- NAVIGATION START -->
        <div class="navigation">
            <!-- START LOGO -->
            <div class="logo-wrapper" id="logo-wrap">
                <a id="logo" href="index.htm">Title</a>
            </div><!-- END LOGO -->
            <ul class="navbar">
                <!-- <li class="{% if this.page.id == 'home' %}active{% endif %}"><a href="{{ 'home'|page }}">Home</a></li> -->
                <li class=""><a href="link1.htm">Link 1</a></li>

            </ul>
        </div>
        <!-- NAVIGATION END -->

        <!-- Content -->
        <section id="layout-content">
            <!-- START PAGE WRAPPER -->
            <div id="page-wrapper">
                <!-- START BANNER SECTION -->
                <section id="banner" class="section parallax" style='background-image:  url("assets/ttg.png")'>
                    <div class="banner-container">
                        <div id="top_part">

                            <span class="big-text">Site title</span><br>
                            <span class="small-text">
                                 Site description<span class="bold"> </span>
                            </span>
                        </div>

                  <div id="bottom_part">
                            <div class="button-wrapper">
                                <a class="button scrollto" href="#work1">Browse </a>
                                <a class="button scrollto" href="getaquote.htm">Get </a>
                            </div>
                            <br><br>
                            <div class="text-center moto">
                                <h4 style="color: #FFFFFF">Use </h4>
                            </div>
                        </div>
                    </div>
                </section><!-- END BANNER SECTION -->
4

2 に答える 2

0

おそらく、要素をブロック レベルの要素 (display:block) にし、マージンを 0px に設定する必要があります。

于 2014-10-17T20:07:12.583 に答える