資源簡介

(共67張PPT)
05盒子模型的使用任務 1 制作注冊網頁任務 2 制作登錄網頁制作注冊網頁任務 1● 1. 了解盒子模型的概念?！?2. 熟練運用盒子模型相關屬性對網頁進行布局。本任務主要通過設置盒子的內外邊距、邊框等屬性，布局繽購樂食電子商務網站注冊網頁表單模塊，并對盒子進行定位設置，完成繽購樂食電子商務網站注冊網頁。該注冊網頁包括 login-header、login-banner、login-footer 三個盒子。圖所示為繽購樂食電子商務網站注冊網頁。繽購樂食電子商務網站注冊網頁步驟一：在 body 標簽中新建網頁頂部的大盒子 div，命名為 login-header，利用 img 標簽在盒子中加入電商網站 logo 圖片。代碼如圖所示。運行上圖中的代碼，效果如圖所示。加入 logo 圖片效果步驟二：在 body 標簽的下部新建一個底部盒子并命名為 login-footer，盒子包含 2 行內容，上面一行命名為 login-ftop，下面一行命名為 login-fbottom，代碼如圖所示。加入 html 內容加入 html 內容使用 CSS 代碼為底部盒子中的元素設置字體顏色和字符間距，如圖所示。設置文字顏色和文字間距步驟三：在body標簽中，在login-header的下方、login-footer的上方新建一個盒子并命名為login-banner，盒子包含三個子盒子，第一個子盒子命名為login-main，login-main 盒子下又包含兩個子盒子，分別命名為 login-mleft、login-mright。首先在 login-mleft 盒子中使用 img標簽引入背景大圖，然后在 login-mright 盒子中添加 form 表單，在 form 表單中添加多個不同的 input 表單控件。代碼如圖所示。加入 login-banner 盒子中的內容加入 login-banner 盒子中的內容步驟四：使用 CSS 代碼設置 login-banner 的寬度與瀏覽器同寬，高度為 470 像素；設置 login-main 的寬度為 1 000 像素，居于 login-banner 的水平中間位置；盛放表單的盒子 login-mright的寬度設置為 360 像素，高度設置為 430 像素。表單中每個 input 控件左側的圖標都是通過使用 background 屬性設置的背景圖片。代碼如圖所示。設置中間部分樣式設置中間部分樣式設置中間部分樣式設置中間部分樣式一、盒子模型什么是 CSS 的盒子模型呢？為什么稱為盒子？在網頁設計中常見的屬性名有內容（content）、填充（padding）、邊框（border）、邊界（margin），CSS 盒子模型具備以上這些屬性，通常又稱填充為內邊距、稱邊界為外邊距。盒子模型平面圖如圖所示。盒子模型平面圖盒子模型層次 3D 示意圖二、盒子模型相關屬性1. 邊框屬性為了分割網頁中不同的盒子，常常需要給元素設置邊框效果。在 CSS 中邊框屬性包括邊框樣式屬性（border-style）、邊框寬度屬性（border-width）、邊框顏色屬性（border-color）、單側邊框的屬性、邊框的綜合屬性，CSS 邊框類型及屬性見表。CSS 邊框類型及屬性在上表中列出了所有的邊框屬性，對于初學者來說比較難以理解，下面對上表中的邊框屬性進行具體講解。（1）設置邊框樣式邊框樣式用于定義網頁中邊框的風格，常用屬性值如下。none：沒有邊框，即忽略所有邊框的寬度（默認值）。solid：邊框為單實線。dashed：邊框為虛線。dotted：邊框為點線。double：邊框為雙實線。在設置邊框樣式時，既可以對盒子的單邊進行設置，又可以綜合設置四條邊的樣式，具體情況如下。border-top-style：上邊框樣式。border-right-style：右邊框樣式。border-bottom-style：下邊框樣式。border-left-style：左邊框樣式。border-style：上邊框樣式 右邊框樣式 下邊框樣式 左邊框樣式。border-style：上邊框樣式 左右邊框樣式 下邊框樣式。border-style：上下左右邊框樣式。使用 border-style 屬性綜合設置四條邊樣式時有兩個原則，一是必須按上右下左的順時針順序；二是省略時采用值復制的原則，即一個值為四條邊，兩個值為上下 / 左右，三個值為上 / 左右 / 下。（2）設置邊框寬度border-width 屬性用于設置邊框的寬度，其常用取值單位為像素 px。同邊框樣式一樣，邊框寬度也可以針對四條邊分別設置，或綜合設置四條邊的寬度，具體情況如下。border-top-width：上邊框寬度。border-right-width：右邊框寬度。border-bottom-width：下邊框寬度。border-left-width：左邊框寬度。border-width：上邊框寬度 右邊框寬度 下邊框寬度 左邊框寬度。（3）設置邊框顏色border-color 屬性用于設置邊框的顏色，其取值可以為預定義的顏色值、十六進制#RRGGBB 或 RGB 格式 rgb（r, g, b）、rgb（r%, g%, b%），實際工作中最常用的是十六進制#RRGGBB。邊框的默認顏色為元素本身的文本顏色，對于沒有文本的元素，其默認邊框顏色為父元素的文本顏色。邊框顏色的單邊與綜合設置如下。border-top-color：上邊框顏色。border-right-color：右邊框顏色。border-bottom-color：下邊框顏色。border-left-color：左邊框顏色。border-color：上邊框顏色 右邊框顏色 下邊框顏色 左邊框顏色。綜合設置邊框四條邊的顏色時，必須按照上右下左的順時針順序，省略時采用值復制的原則，即一個值為四條邊，兩個值為上下 / 左右，三個值為上 / 左右 / 下。（4）綜合設置邊框使用 border-style、border-width、border-color 雖然可以實現豐富的邊框效果，但是采用這種方式書寫的代碼比較煩瑣，且不便于閱讀，為此 CSS 提供了更簡單的邊框設置方式，其基本格式如下。采用上述設置方式時，寬度、樣式、顏色的順序不分先后，可以只指定需要設置的屬性，省略的部分將取默認值（樣式不能省略）。當每一側的邊框樣式都不相同，或者只需單獨定義某一側的邊框時，可以使用單側邊框的綜合屬性 border-top、border-bottom、border-left 或 border-right 進行設置。例如，單獨定義上邊框，代碼如圖所示。當四條邊的邊框樣式都相同時，可以使用 border 屬性進行綜合設置。單獨定義上邊框代碼若要將二級標題的邊框設置為雙實線、紅色、3 像素寬，操作代碼如圖所示。能夠用一個屬性定義元素的多種樣式，如 border、border-top 等，在 CSS 中稱為復合屬性。常用的復合屬性有 font、border、margin、padding 和 background 等。實際工作中常使用復合屬性，它可以簡化代碼，提高網頁的運行速度。設置二級標題的邊框代碼2. 內邊距屬性在網頁設計中，為了調整內容在盒子中的顯示位置，常常需要給元素設置內邊距，所謂內邊距指的是元素內容之間的距離，也常常稱為內填充。在 CSS 中，padding 屬性之間的距離也常常被稱為內填充。在 CSS 中，padding 屬性用于設置內邊距，同邊框屬性 border 一樣，padding 也是復合屬性，其相關設置方法如下。padding-top：上內邊距。padding-right：右內邊距。padding-bottom：下內邊距。padding-left：左內邊距。padding：上內邊距 右內邊距 下內邊距 左內邊距。在上面的設置中，padding 相關屬性的取值可為 auto（默認值）、不同單位的數值、相對于父元素（或瀏覽器）寬度的百分比（%），實際工作中最常用的是像素值（px），不允許使用負值。同邊框相關屬性一樣，使用復合屬性 padding 定義內邊距時，必須按照順時針順序，省略時采用值復制的原則，一個值為四條邊，兩個值為上下 / 左右，三個值為上 / 左右 / 下。3. 外邊距屬性網頁是由多個盒子排列而成的，要想拉開盒子與盒子之間的距離，合理地布局網頁，就要為盒子設置外邊距。所謂外邊距，指的是元素邊框與相鄰元素之間的距離。在 CSS 中，margin 屬性用于設置外邊距，它是一個復合屬性，與內邊距 padding 的用法類似，設置外邊距的具體方法如下。margin-top：上外邊距。margin-right：右外邊距。margin-bottom：下外邊距。margin-left：左外邊距。margin：上外邊距 右外邊距 下外邊距 左外邊距。margin 相關屬性的值以及復合屬性 margin 取 1 ～ 4 個值的情況與 padding 相同。但是外邊距可以使用負值，使相鄰元素重疊。4. 背景屬性網頁能通過背景圖像給讀者留下深刻的印象，如節日主題的網頁一般采用喜慶祥和的圖片來突出效果，所以在網頁設計中合理控制背景顏色和背景圖像至關重要。下面將詳細介紹用 CSS 控制背景樣式的方法。（1）設置背景顏色設置背景顏色需要通過 background-color 屬性來實現，關于該屬性在前面的項目中已經做過詳細講解，這里不再做具體介紹。（2）設置背景圖像在 CSS 中，背景不僅可以設置為某種顏色，還可以將圖像作為網頁元素的背景，通過background-image 屬性設置來實現。（3）設置背景圖像平鋪默認情況下，背景圖像會自動向水平和豎直兩個方向平鋪，如果不希望背景圖像平鋪，或者只想沿著一個方向平鋪，可以通過 background-repeat 屬性來控制，該屬性的取值如下。Repeat：沿水平和豎直兩個方向平鋪（默認值）。no-repeat：不平鋪（圖像位于元素的左上角，只顯示一次）。repeat-x：只沿水平方向平鋪。repeat-y：只沿豎直方向平鋪。（4）設置背景圖像的不平鋪如果將背景圖像的平鋪屬性 background-repeat 定義為 no-repeat，圖像將以不平鋪的方式顯示在 body 標簽的左上角，代碼如圖所示。設置背景圖像不平鋪的代碼（5）設置背景圖像的位置如果想改變背景圖像顯示的位置，就需要對另一個 CSS 屬性 background-position 進行設置。background-position 屬性的取值有多種，具體如下。1）使用不同單位（最常用的是像素 px）的數值：直接設置圖像左上角在元素中的坐標，例如“background-position: 20px 20px;”。2）使用預定義的關鍵字：指定背景圖像在元素中的對齊方式。3）使用百分比：按背景圖像和元素的指定點對齊。5. 盒子的寬與高網頁是由多個盒子排列而成的，每個盒子都有固定的大小。在 CSS 中使用寬度屬性width 和高度屬性 height 可以對盒子的大小進行控制。width 和 height 的屬性值可以為不同單位的數值或相對于父元素的百分比。實際工作中，最常用的是像素值。制作登錄網頁任務2● 1. 熟悉元素的定位模式和邊偏移模式。● 2. 掌握靜態定位的用法。● 3. 掌握相對定位的用法?！?4. 掌握絕對定位的用法?！?5. 掌握固定定位的用法。● 6. 掌握行元素和塊元素之間的轉換方法。本任務使用 CSS 定位對網頁中的“注冊”按鈕和“忘記密碼”超鏈接進行了精確定位，制作完成的繽購樂食電子商務網站登錄網頁如圖所示。繽購樂食電子商務網站登錄網頁步驟一：由于本任務所制作的繽購樂食電子商務網站登錄網頁與任務 1 中繽購樂食電子商務網站注冊網頁的樣式相似，故把任務 1 中的代碼移植過來進行修改。首先把“手機號注冊”改為“登錄商城”，并且在后面加上一個“注冊”按鈕。然后把 input 標簽減少到兩個，并修改其中的圖標與文字信息。最后把 checkbox 復選框后面的內容改為“記住密碼”，并在其后加上一個“忘記密碼”超鏈接。修改后的代碼如圖所示。登錄商城未加定位相關 CSS 代碼的原表單效果如圖所示。未加定位相關 CSS 代碼的原表單效果步驟二：通過圖可以看到，“注冊”按鈕沒有顯示按鈕效果，且位置不對。使用絕對定位后的 CSS 代碼設置好定位相關代碼之后，運行代碼，定位后的登錄表單效果如圖所示。定位后的登錄表單效果步驟三：步驟二已完成登錄網頁的內容，想要實現注冊網頁與登錄網頁之間的跳轉，有兩種很好的跳轉方式：一是在表單 form 標簽的屬性 action 里面設置跳轉目標網頁地址；二是在 a 標簽的 href 屬性里面設置跳轉目標網頁地址?，F在要實現在注冊網頁單擊“注冊”按鈕跳轉到登錄網頁，采用第一種跳轉方式；在登錄網頁單擊“登錄”按鈕跳轉到注冊網頁，采用第二種跳轉方式，具體操作如下。注冊網頁登錄網頁在注冊網頁上設置跳轉代碼，如圖所示。在登錄網頁上設置跳轉代碼，如圖所示。這樣設置好后，兩個網頁之間就可以進行跳轉了。注冊網頁上的跳轉登錄網頁上的跳轉一、元素的定位屬性元素的定位屬性主要包括定位模式和邊偏移兩部分。1. 定位模式在 CSS 中，position 屬性用于定義元素的定位模式，其基本語法格式如下。position 屬性值及含義其中，position 屬性值有 static、relative、absolute、 xed，具體見表。從表中可以看出，元素的定位主要分為四類，下面針對每一種定位方式進行詳細講解。（1）靜態定位當用于定位的元素的 position 屬性值為 static 時，稱此定位模式為靜態定位，元素所在的位置也就是在文檔流中的位置。（2）相對定位當用于定位的元素的 position 屬性值為 relative 時，稱此定位模式為相對定位。（3）絕對定位當用于定位的元素的 position 屬性值為 absolute 時，稱此定位模式為絕對定位。絕對定位是將元素依據最近的已經定位（絕對定位、固定定位或相對定位）的父元素進行定位，若所有元素都沒有定位，則依據根元素 body（瀏覽器窗口）進行定位。（4）固定定位當網頁元素的 position 屬性值為 xed 時，稱此定位模式為固定定位。固定定位的元素特性如下。1）固定定位是相對于“當前瀏覽器窗口”來進行的定位。2）固定定位元素不再占空間，層級要高于普通元素，跟“浮動”很像。3）行內元素使用 xed 定位，將轉成“塊元素”。4）如果只指定了 xed 定位屬性，并沒有設置偏移量，則“原地不動”。邊偏移屬性及描述2. 邊偏移定位模式僅用于定義元素以哪種方式定位，并不能確定元素的具體位置。在 CSS 中，通過邊偏移屬性 top、bottom、left 或 right 來精確定義定位元素的位置，具體見表。二、元素的轉換html 中的網頁元素被定義成不同的類型，大致分為塊元素和行內元素兩大類，也稱塊標簽和行內標簽。通過學習它們的特性，可以為使用 CSS 設置樣式和布局打下基礎。1. 塊元素塊元素在頁面中以區域塊的形式出現，其特點有：獨自占據一整行或多行；可對其設置寬度、高度、對齊等屬性；可以容納行內元素和其他塊元素。常見的塊元素有 h1 ～ h6、p、div、ul、ol、li 等，其中 div 標簽是最典型的塊元素。2. 行內元素行內元素也稱內聯元素或內嵌元素，其特點有：和其他行內元素都在同一行上顯示，不會獨自換行；寬度就是它的文字或圖片的寬度，默認不可改變；設置高度 height 無效，可以通過 line-height 來設置；設置 margin 只有左右 margin 有效，上下無效；設置 padding 只有左右 padding 有效，上下無效；只能容納文本或者其他行內元素。常見的行內元素有 strong、b、em、i、del、s、ins、u、a、span 等，其中 span 標簽是最典型的行內元素。在具體使用時，可根據需要，通過 display 屬性實現塊元素與行內元素之間的轉換。display 的屬性值及含義見表。display 的屬性值及含義下面通過一個案例來進一步學習塊元素和行內元素，代碼如圖所示。未使用元素的轉換之前的代碼應用在上圖中，先使用 <span> 定義文本，然后對它們設置邊框顏色屬性，設置高度和寬度屬性值。運行上圖中的代碼，效果如圖所示。從圖中可以看出，對 id 名為 span1 的 span標簽設置的寬度和高度屬性值與 id 名為 span2 的 span 標簽未設置寬度和高度效果是一樣的，那就說明 span1 設置的寬度和高度屬性值是無用的，所以需要使用元素的轉換。未使用元素的轉換之前的效果接下來將 span 標簽轉換為塊元素標簽，看一看它的效果會如何變化。代碼如圖所示。使用元素的轉換的代碼應用在 id 名為 span1 的 span 標簽里面加了“display:block;”，該屬性值使 span 標簽轉換成塊元素標簽。保存 html 文件，刷新網頁，效果如圖所示。這時可以發現使用了元素轉換屬性的 span 標簽的高度和寬度發生了改變。如果使用的是行內元素標簽并且相對這個標簽的寬、高屬性進行設置的話，那么就要使用元素的轉換屬性，將它轉換成塊級元素。使用元素的轉換的效果

展開更多......

收起↑