-5
我是一個專門從事信息技術大學的學生。過去兩年我一直在學習C++和C＃，最近我跟我的叔叔打賭了一下html任務。如果我能成功完成任務並使其工作，那麼夏天我會在他的公司找到一份空缺職位。如果我沒有完成，那麼我將不得不在夏季找份工作。價格標籤爲電子商店在HTML **編輯**（1）
任務是爲HTML中的電子商店的價格標籤製作一個模板。我將在下面提供一些圖形信息。 
在田地裏的每個數字對應於某種字體，字體大小，內容等 的任務是創造一個價格標籤像這樣的HTML，模板是具體的，使人們有可能調整的事情並打印出來。
問題是，我從來沒有像這樣使用HTML。我唯一使用HTML的時候是因爲我在無聊時做出的一些愚蠢的網站。 我會appriciate如果有人可以給我一些方向，一些建議或一些參考simmilar，以便我可以開始這個瘋狂的過程。 我將如何開始關於這個項目？我知道我需要學習和使用CSS和一些腳本語言，比如php或javascript。我會安慰你扔給我的一切。
在此先感謝。我只需要一點點啓動，因爲我在網上搜索了所有內容，但都沒有成功。
編輯：所以這裏是我的嘗試。我製作了這些盒子，但現在我堅持使用一些不會保持在一行的塊（塊5-10;） 如何在一行上創建塊5,6,7並在另一行上創建塊8,9,10 ？ PS：在codepen中做到這一點，鏈接下面的代碼。 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儀式HERE
我真的不知道如何做到這一點，但我記得我的公司有HTML的網站和單獨的HTML的印刷（我認爲）。 – christo8989
預計您至少會嘗試爲自己編寫代碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users） ，無論是通過谷歌或通過搜索，做出嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –
我與Paulie_D達成協議。你很難在網絡上搜索***，並且找不到任何值得嘗試的東西。你到目前爲止嘗試過什麼？你能發佈一些你測試過的代碼不符合你的預期嗎？您是否需要在本地或在服務器上生成價格標籤HTML？這將有助於決定如果Javascript或PHP /其他服務器語言最好先學習，假設你不能同時學習（這將是我的建議）。 – Nicholas