Wie teile ich eine Webseite in verschiedene Abschnitte?

Question

Ich habe eine Webseite, die eine Länge von 2000px hat, aber ich möchte es in 4 verschiedene Abschnitte (dh. Je 500px) teilen, damit ich verschiedene Inhalte dort mit anderem Design hinzufügen kann. Aber ich habe keine Ahnung, wie es geht. Ich möchte auch Hyperlinks von ihnen geben.

Answer 1

eine schreckliche Antwort ist Frames; eine mäßig schlechte Antwort ist CSS divs

<div class="bottom"> 
    <div id="area1" style="float: left; width: 25%;"></div> 
    <div id="area2" style="float: left; width: 25%;"></div> 
    <div id="area3" style="float: left; width: 25%;"></div> 
    <div id="area4" style="float: left; width: 25%;"></div> 
</div> 

jetzt, wenn Sie Hyperlinks sagen .. meinen Sie, wie in Ihnen den Mini-Teil der Seite klicken und es dehnt sich auf den Teil davon? weil Sie wahrscheinlich einige Jquery Hack zu tun haben es

$("#area1").click(function(){ 
$("#area1").css("width", "100%"); 
$("area2").css("width", "0%"); 
$("area3").css("width", "0%"); 
$("area4").css("width", "0%"); 
}); 

(die über die angeklickt div für das Quartal die Größe sollten Sie auf 100 angeklickt, während die anderen schrumpfen. würden Sie dann die einzelnen div in der CSS-Stil für es durch ID oder Klasse etc.

Answer 2

einfache Möglichkeit für Sie, Bootstrap zu verwenden, die bereits Spalten und mit responsive Funktionalität bietet.IF wollen Sie nicht die nächste Option verwenden können wir css oder frames.like wie oben Antwort

Answer 3

Klingt, als ob Sie einige Grundlagen benötigen

Die Struktur Ihrer Seite ist HTML, während stilistische Elemente in CSS diktiert sind. So werden Sie vier logische Abschnitte wollen (aka <div></div>) innerhalb eines enthaltenden <div></div>, wie folgt aus:

<div> 
    <div></div> 
    <div></div>  
    <div></div> 
    <div></div> 
</div> 

A div ist etwas, ein Block-Level-Element genannt, die automatisch auf die volle Breite erweitert wird (dh: 100 %) seines Containers. Sie möchten, dass die inneren div Elemente die gleiche Breite haben, und da es vier davon gibt, können Sie etwas rechnen.

100%/4 = die Breite, die Sie jeweils wollen div zu sein.

<div> 
    <div style="width:25%;"></div> 
    <div style="width:25%;"></div>  
    <div style="width:25%;"></div> 
    <div style="width:25%;"></div> 
</div> 

Sie werden bemerken, dies nicht wie erwartet funktionieren, da die div Elemente die Breite, die Sie nur wollen, sondern auf der jeweils anderen gestapelt werden. Um sie nebeneinander zu bekommen, können Sie display:inline-block; verwenden, die die Blockstufe zwischen Block und Inline ändert.

<div> 
    <div style="width:25%; display:inline-block;"></div> 
    <div style="width:25%; display:inline-block;"></div>  
    <div style="width:25%; display:inline-block;"></div> 
    <div style="width:25%; display:inline-block;"></div> 
</div> 

Dies wird fast, was Sie wollen, es sei denn Sie einige Lücken zwischen den div Elemente bemerken, die eigentlich weißen Raum ist im HTML-Code erhalten wird (die Zeilenumbrüche zwischen dem <div></div>). Es gibt mehrere Möglichkeiten, dies zu beseitigen. Meiner Meinung nach, ist die einfachste einen leeren Kommentar zwischen den Elementen zu stellen, wie folgt aus:

<div> 
    <div style="width:25%; display:inline-block;"></div><!-- 
    --><div style="width:25%; display:inline-block;"></div><!--  
    --><div style="width:25%; display:inline-block;"></div><!-- 
    --><div style="width:25%; display:inline-block;"></div> 
</div> 

Dies ist CSS-Stile innerhalb der HTML-Elemente verwenden, aber Sie sollten setzen CSS in a stylesheet and reference it in the page wirklich.