天天看點

html執行個體百度網頁制作代碼_「HTML」從零開始學網頁制作-04

嘗試用DIV制作德國國旗

html執行個體百度網頁制作代碼_「HTML」從零開始學網頁制作-04

德意志聯邦共和國,簡稱德國,國旗由3種顔色長方形所構成。

我們需要制作出3個長方形來組合成德國國旗,需要用到

标簽。

什麼是div?

可以定義文檔中的分區或節; 标簽可以把文檔分割為獨立的、不同的部分。

我們暫且把 div 看作是一個盒子。

現在我們要做的就是讓浏覽器顯示盒子,并把盒子變成長方形,然後染上黑,紅,金這3種顔色。

試一試在

加上

你會發現無論怎麼重新整理浏覽器,還是一片空白。

這是因為

這個盒子沒有正常完全的顯示,是以需要 兩樣東西:

第一:缺少寬度和高度;我們要在紙上畫出長方形,就必須有長和寬,

也是同理。

第二:缺少邊框或背景顔色;要想讓

這個盒子能被我們看見,通常是給它加個邊框或者背景顔色。

二者缺一不可,為了這兩樣東西,我們需要把 style 添加到

中:

html執行個體百度網頁制作代碼_「HTML」從零開始學網頁制作-04

然後重新整理浏覽器,會出現一個黑色長方形:

html執行個體百度網頁制作代碼_「HTML」從零開始學網頁制作-04

我們來看一下加入

的html代碼:

style:它定義了

的樣式,也就是說,要讓div變成什麼樣子,就需要style來改變div。style等于号後面的width、height、background都屬于style的屬性。

width:定義div的寬度。

height:定義div的高度。

background:定義div的背景顔色。【 黑色:rgb(0,0,0) 紅色:rgb(255,0,0) 金色:rgb(255,200,0) 】

隻是一行簡單的代碼,我們就已經完成了國旗1/3的制作,那麼依葫蘆畫瓢,你自己寫出剩下兩行代碼吧~

答案:

html執行個體百度網頁制作代碼_「HTML」從零開始學網頁制作-04
html執行個體百度網頁制作代碼_「HTML」從零開始學網頁制作-04

總結: