Preisschild für Elektronik Shop in HTML ** EDIT ** (1)

Question

Ich bin Student an einer Universität, spezialisiert auf Informationstechnologien. Ich habe in den letzten zwei Jahren C++ und C# gelernt und vor kurzem habe ich mit meinem Onkel eine Wette über eine HTML-Aufgabe gemacht. Wenn es mir gelingt, die Aufgabe erfolgreich zu erledigen und in Betrieb zu nehmen, bekomme ich für den Sommer eine Stelle in seiner Firma. Wenn ich nicht fertig bin, muss ich einen Job für den Sommer finden.

Die Aufgabe besteht darin, eine Vorlage für ein Preisschild für einen Elektronikladen in HTML zu erstellen. Ich werde unten einige grafische Informationen zur Verfügung stellen.

Jede Zahl in den Bereichen bis zu einem gewissen Schrift das Ding, Schriftgröße, Inhalt, usw. Die Aufgabe ist zu erstellen ein Preisschild wie dies in html, eine Vorlage spezifisch zu sein und es ermöglichen, entspricht die Größe und drucke es aus.

Das Problem ist, dass ich HTML nie auf diese Weise verwendet habe. Die einzige Zeit, in der ich HTML verwendete, war für einige dumme Websites, die ich gemacht habe, wenn mir langweilig war. Ich würde es schätzen, wenn jemand mir ein paar Anweisungen geben könnte, ein paar Ratschläge oder Hinweise auf etwas Ähnliches, damit ich diesen verrückten Prozess beginnen kann. Wie würde ich anfangen, über dieses Projekt zu starten? Ich weiß, dass ich CSS und einige Skriptsprachen wie PHP oder Javascript lernen und verwenden muss. Ich würde alles schätzen, was du mir entgegenwirfst.

Vielen Dank im Voraus. Ich brauche nur einen kleinen Kick, um loszulegen, weil ich das ganze Web ohne Erfolg durchsucht habe.

EDIT: Also hier ist mein Versuch dabei. Ich habe die Boxen gemacht, aber jetzt bin ich mit einigen Blöcken fest, die nicht in einer Linie bleiben werden (Block 5-10;) Wie mache ich Block 5,6,7 auf einer Linie und 8,9,10 auf einer anderen Linie ? PS: machte dies in Codepen, Link unter Code. HTML:

<div class="mainblock"> 
    <div class="top"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="three"></div> 
    </div> 
    <div class="clearfix"></div> 
    <div class="spacing"></div> 

    <div class="middle"> 
    <div class="four"></div> 
    <div class="five"></div> 
    <div class="six"></div> 
    <div class="seven"></div> 
    <div class="eight"></div> 
    <div class="nine"></div> 
    <div class="ten"></div> 

    </div> 

    <div class="spacing"></div> 

    <div class="bottom"></div> 
</div> 

CSS:

.top,.middle,.bottom{ 
    border-style: solid; 
    border-width: thin; 
    border-color: blue; 
    margin: 0mm; 
} 
.clearfix{ 
    clear: both; 
} 
.spacing{ 
    height: 1mm; 
    width: 91mm; 
} 
.mainblock{ 
    width: 91mm; 
    border-style: solid; 
    border-width: thin; 
    padding-left: 7mm; 
    padding-right: 7mm; 
    padding-bottom: 7mm; 
    padding-top: 27mm; 
} 

.top{ 
    width: 91mm; 
    height: 7mm; 
} 
.middle{ 
    width: 91mm; 
    height: 16mm; 
} 
.bottom{ 
    width: 91mm; 
    height: 16mm; 
} 

.one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.eleven,.twelve,.thirteen,.fourteen,.fifthteen,.sixthteen,.seventhteen,.eighthteen,.ninethteen,.twenty,.twentyone,.twentytwo,.twentythree,.twentyfour{ 
    border-style: solid; 
    border-width: thin; 
    border-color: green; 
} 
.one{ 
    width: 67mm; 
    height: 7mm; 
    float: left; 
} 
.two{ 
    width: 24mm; 
    height: 3.5mm; 
    margin-left:67mm; 
} 
.three{ 
    width: 24mm; 
    height: 3.5mm; 
    margin-left:67mm 
} 
.four{ 
    width: 65mm; 
    height: 16mm; 
    float: left; 
} 
.five,.six,.seven,.eight,.nine,.ten{ 
    width: 8mm; 
    height: 8mm; 
} 
.five,.eight{ 
    margin-left: 67mm; 
} 
.six,.nine{ 
    margin-left: 75mm; 
} 
.seven,.ten{ 
    margin-left: 83mm; 
} 

Codepen Ritus HERE

Answer 1

Ich weiß nicht, wie schön Ausdrucke erstellen, aber es klingt wie Sie HTML, CSS und Javascript lernen müssen . HTML ist die Knochen. CSS ist die Haut und das Make-up (Styling). Mit Javascript (und jQuery) können Sie die Werte, die Sie ändern möchten, dynamisch ändern.

Für html, denke ich gerne in Bezug auf die Boxen. Nur, Boxen innerhalb von Boxen. Dieses Bild ist nicht vollständig, aber es gibt die Essenz der Idee. Das Blau ist das gesamte divs und das Grün sind divs innerhalb des Blaus.

<div class="blue float-left"> 
    <div class="green float-left"></div> 
    <div class="green float-left"></div> 
    <div class="clearfix></div> 
</div> 
<div class="blue float-left"> 
    <div class="green float-left"></div> 
    <div class="green float-left"></div> 
    <div class="green float-left"></div> 
    <div class="clearfix></div> 
</div> 
<div class="clearfix></div> 

Das Klassenattribut für Styling verwendet wird. Es gibt viele Ideen hier, aber es wird dir zumindest einen Anfang geben. Vielleicht möchtest du etwas wie purecss auschecken, anstatt dein eigenes CSS zu schreiben.

Für Javascript, überprüfen Sie die MDN website. Verwenden Sie Suchbegriffe wie "javascript mdn get element". Sie könnten an jQuery oder Javascript-Methoden wie document.getElementById interessiert sein.

Viel Glück!