Unterteilungen in voller Breite mit HTML5 und CSS3 (responsiv)

StackOverflow https://stackoverflow.com//questions/25076798

  •  02-01-2020
  •  | 
  •  

Frage

Ich bin relativ neu bei StackOverflow und habe beim Erstellen einer Webseite einige Schwierigkeiten

Was ich also benötige, ist eine einseitige Website, die in verschiedene Abschnitte unterteilt ist, die Divs in voller Breite (d. h. 100 % der Breite des Bildschirms) sind und mit unterschiedlichen Hintergrundfarben aufeinanderfolgen.

Das Problem, mit dem ich konfrontiert bin, besteht darin, dass die Divs nicht die gesamte Breite des Bildschirms einnehmen und nicht nur an den Seiten, sondern auch zwischen zwei Divs Leerraum aufweisen
Wenn sich die Fenstergröße verringert, vergrößert sich außerdem die Lücke zwischen den Divs

Das gewünschte Ergebnis ist auf den folgenden Websites zu beobachten:

http://classrebels.com/
http://startbootstrap.com/templates/freelancer/

Der Code, den ich verwende, ist wie folgt:

i) HTML:

    <html>
    <body>
    <div class="full" id="one">
    <h1>Just something</h1>
    </div>
    <div class="full" id="two">
    <h1>Just something</h1>
    </div>
    </body>
    </html>

ii) Das CSS:

    .full{
    width= 100%;
     }
    #one{
     background-color: #fff;
    }  
    #two{
     background-color: #f13;
    }

Bitte sagen Sie mir, wo ich falsch liege

War es hilfreich?

Lösung

Demo

html

generasacodicetagpre.

css

generasacodicetagpre.

Andere Tipps

Demo fiddel

Um die Standardspanne / Polsterung auf dem Ansichtsfenster zu entfernen (das Ihnen den Whitespace gibt), müssen Sie die folgenden CSS hinzufügen:

generasacodicetagpre.

und ändern:

generasacodicetagpre.

an:

generasacodicetagpre.

CSS-Stil Eigenschafts- / Wertpaare werden mit einem Colon-: getrennt und nicht mit einem Equal-=

Haben Sie versucht, Marge und Rollding 0 in voller und in Body-Tag-Tag zu stecken? wie

generasacodicetagpre.

In ähnlicher Weise dauert Ihre Überschrift auch einen Rand, also setzen Sie den Rand der Überschrift nach Bedarf ein. Zur besseren Wenden Sie sich bitte an diesen Link w3schools

Sie müssen den Körper und die H1-Margen ändern, da sie Standardwerte im Browser haben. Ich habe es in dieser Geige behoben:

generasacodicetagpre.

http://jsfiddle.net/pwlgb/

Das Problem ist, dass Sie nicht den ganzen DIV eine Hintergrundfarbe geben, sondern nur den Text.

Wenn Sie eine Grenze anzünden, können Sie die echte Größe des DIV sehen und das gesamte DIV mit Farbe füllen.

Überprüfen Sie die Geige, die ich dafür gemacht habe

generasacodicetagpre.

http://jsfiddle.net/2h4kq/

Sie können den Rand auf 0px einstellen, sodass er nicht angezeigt wird, und es gibt Ihnen das richtige Ergebnis

Die Demos, auf die Sie verlinken, verwenden keine Divs in voller Breite.Sie nutzen tatsächlich die volle Breite <section> Element, für das die Hintergrundfarbe festgelegt ist.

Dann haben sie eine innere Reihe <div> das dann einen Container und eine Säule hat <div>.Im Freelancer-Beispiel sieht es also so aus:

<section class="success" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>About</h2>
                    <hr class="star-light">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-lg-offset-2">
                    <p>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
                </div>
                <div class="col-lg-4">
                    <p>Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
                </div>
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <a href="#" class="btn btn-lg btn-outline">
                        <i class="fa fa-download"></i> Download Theme
                    </a>
                </div>
            </div>
        </div>
    </section>

Beispiel des CSS:

section.success {
color: #fff;
background: #18bc9c;
}

.container {
width: 1170px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}

Laden Sie diese Vorlage herunter, sie verwendet Bootstrap, und experimentieren Sie damit, um das gewünschte Aussehen zu erhalten.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top