百度前端技術學院—-小薇學院(HTML+CSS課程任務)

任務一：零基礎HTML編碼課程概述作業提交截止時間：04-24 重要說明百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。我們儘力保證課程內容的質量以及學習難度的合理性，但即使如此，真正決定課程效果的，還是你的每一次思考和實踐。課程多數題目的解決方案都不是唯一的， ...

任務一：零基礎HTML編碼

課程概述

作業提交截止時間：04-24

重要說明

百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。我們儘力保證課程內容的質量以及學習難度的合理性，但即使如此，真正決定課程效果的，還是你的每一次思考和實踐。

課程多數題目的解決方案都不是唯一的，這和我們在實際工作中的情況也是一致的。因此，我們的要求不僅僅是實現設計稿的效果，更是要多去思考不同的解決方案，評估不同方案的優劣，然後使用在該場景下最優雅的方式去實現。那些最終沒有被我們採納的方案，同樣也可以幫助我們學到很多知識。所以，我們列出的參考資料未必是實現需求所必須的。有的時候，實現題目的要求很簡單，甚至參考資料里就有，但是背後的思考和親手去實踐卻是任務最關鍵的一部分。在學習這些資料時，要多思考，多提問，多質疑。相信通過和小伙伴們的交流，能讓你的學習事半功倍。

任務目的

瞭解HTML的定義、概念、發展簡史

掌握常用HTML標簽的含義、用法

能夠基於設計稿來合理規劃HTML文檔結構

理解語義化，合理地使用HTML標簽來構建頁面

任務描述

參考示例圖（點擊查看），完成一個HTML頁面代碼編寫（不寫CSS，不需要關註樣式，只關註文檔結構）

任務註意事項

只需要完成HTML代碼編寫，不需要寫CSS

示例圖僅為參考，不需要完全實現一致，其中的圖片、文案均可自行設定

儘可能多地嘗試更多的HTML標簽

線上學習參考資料

Web相關名詞通俗解釋

MDN HTML入門

慕課HTML+CSS基礎教程視頻

任務二：零基礎HTML及CSS編碼（一）

課程概述

作業提交截止時間：04-24

重要說明

任務目的

針對設計稿樣式進行合理的HTML架構，包括以下但不限於：

掌握常用HTML標簽的含義、用法
能夠基於設計稿來合理規劃HTML文檔結構

理解語義化，合理地使用HTML標簽來構建頁面

掌握基本的CSS編碼，包括以下但不限於：

瞭解CSS的定義、概念、發展簡史
掌握CSS選擇器的含義和用法

實踐並掌握CSS的顏色、字體、背景、邊框、盒模型、簡單佈局等樣式的定義方式

任務描述

基於第一個任務“零基礎HTML編碼”的代碼，參考示例圖（點擊查看），在步驟一的代碼基礎上增加CSS樣式代碼的編寫

任務註意事項

只需要完成HTML，CSS代碼編寫，不需要寫JavaScript

示例圖僅為參考，不需要完全實現一致，其中的圖片、文案均可自行設定

儘可能多地嘗試不同的、更多的樣式設定來實踐各種CSS屬性

HTML 及 CSS 代碼結構清晰、規範

線上學習參考資料

MDN HTML入門

MDN CSS入門教程

慕課HTML+CSS基礎教程視頻

任務三：三欄式佈局

課程概述

作業提交截止時間：04-24

重要說明

任務目標

掌握HTML/CSS佈局的概念

掌握盒模型的概念

掌握position與float的概念以及在佈局時的用法

任務描述

使用 HTML 與 CSS 按照示例圖（點擊查看）實現三欄式佈局。

左右兩欄寬度固定，中間一欄根據父元素寬度填充滿，最外面的框應理解為瀏覽器。背景色為 #eee 區域的高度取決於三個子元素中最高的高度。

任務註意事項

嘗試 position 和 float 的效果，思考它們的異同和應用場景。

註意測試不同情況，尤其是極端情況下的效果。

圖片和文字內容請自行替換，儘可能體現團隊的特色。

調節瀏覽器寬度，固定寬度和自適應寬度的效果始終符合預期。

改變中間一欄的內容長度，以確保在中間一欄較高和右邊一欄較高時，父元素的高度始終為子元素中最高的高度。

其他效果圖中給出的標識均被正確地實現。

參考資料

MDN：position：瞭解 CSS position 屬性的基本知識

MDN：float：瞭解 CSS float 屬性的基本知識

Learn CSS Positioning in Ten Steps：通過具體的例子熟悉 position 屬性

清除浮動（clearfix hack）：清除浮動是什麼，如何簡單地清除浮動

StackOverflow：Which method of ‘clearfix’ is best?：清除浮動黑科技完整解讀

任務四：定位和居中問題

重要說明

任務目標

實踐HTML/CSS佈局方式

深入瞭解position等CSS屬性

任務描述

實現如示例圖（點擊打開）的效果

灰色元素水平垂直居中，有兩個四分之一圓位於其左上角和右下角。

任務註意事項

思考不同情況下（如灰色高度是根據內容動態變化的）水平垂直居中的解決方案。

動手試一試各種情況的組合，父元素和子元素分別取不同的 position 值。思考 position 屬性各種取值的真正含義，尤其是 absolute 究竟是相對誰而言的。

註意測試不同情況，尤其是極端情況下的效果。

調節瀏覽器寬度，灰色元素始終水平居中。

調節瀏覽器高度，灰色元素始終垂直居中。

調節瀏覽器高度和寬度，黃色扇形的定位始終準確。

其他效果圖中給出的標識均被正確地實現，錯一項扣一分。

參考資料

HTML和CSS高級指南之二——定位詳解：大漠老師手把手教你，這次徹底搞懂定位問題

Centering in CSS: A Complete Guide：完整討論了不同情況下的居中方案，建議自己思考之後再看答案

Get HTML & CSS Tips In Your Inbox：有人寫了一個作弊工具生成居中代碼，但是看著代碼你明白為什麼嗎

任務五：零基礎HTML及CSS編碼（二）

重要說明

任務目的

針對設計稿樣式進行合理的HTML架構，包括以下但不限於：

掌握常用HTML標簽的含義、用法
能夠基於設計稿來合理規劃HTML文檔結構
理解語義化，合理地使用HTML標簽來構建頁面
掌握基本的CSS編碼，包括以下但不限於：
瞭解CSS的定義、概念、發展簡史
掌握CSS選擇器的含義和用法

實踐並掌握CSS的顏色、字體、背景、邊框、盒模型、簡單佈局等樣式的定義方式

任務描述

基於第一個任務“零基礎HTML編碼”的代碼，參考示例圖（點擊查看），在步驟一的代碼基礎上增加CSS樣式代碼的編寫

頭部和底部的黑色區域始終是100%寬

頁面右側部分為固定寬度，左側保持與瀏覽器視窗變化同步自適應變化

左側的各個模塊裡面的內容寬度跟隨左側整體寬度同步自適應變化

10張圖片需要永遠都完整展現，所以會隨著寬度變窄，從兩行變成三行甚至更多，也有可能隨著寬度變寬，變成一行

任務註意事項

只需要完成HTML，CSS代碼編寫，不需要寫JavaScript

示例圖僅為參考，不需要完全實現一致，其中的圖片、文案均可自行設定

儘可能多地嘗試不同的、更多的樣式設定來實踐各種CSS屬性

HTML 及 CSS 代碼結構清晰、規範

線上學習參考資料

MDN HTML入門

MDN CSS入門教程

慕課HTML+CSS基礎教程視頻

任務六：通過HTML及CSS模擬報紙排版

重要說明

任務目的

深入掌握CSS中的字體、背景、顏色等屬性的設置

進一步練習CSS佈局

任務描述

參考 PDS設計稿（點擊下載），實現頁面開發，要求實現效果與樣例（點擊查看）基本一致

頁面中的各字體大小，內外邊距等可參看標註圖（點擊查看）

頁面寬度固定（定寬）

任務註意事項

只需要完成HTML，CSS代碼編寫，不需要寫JavaScript

設計稿中的圖片、文案均可自行設定

在Chrome中完美實現符合標註中的各項說明

有能力的同學可以嘗試跨瀏覽器的相容性

有能力的同學可以在實現一遍後嘗試用less, sass或者stylus等再實現一次

線上學習參考資料

MDN HTML入門
MDN CSS入門教程

任務七：實現常見的技術產品官網的頁面架構及樣式佈局

重要說明

任務目的

通過實現一個常見的技術產品官網，加深對於HTML，CSS的實戰能力

學習掌握如何在沒有標註的情況下實現設計稿到頁面的精確轉變

任務描述

通過HTML及CSS實現設計稿設計稿PSD文件（點擊下載），效果如效果圖（點擊打開）

設計稿是有一定寬度的，這個寬度為頁面的最小寬度，也就是說，當瀏覽器視窗寬度小於設計稿寬度時，允許出現橫向滾動條，頁面內容寬度保持不變，但是當瀏覽器視窗寬度大於設計稿寬度時，頁面部分內容的寬度應該保持和瀏覽器視窗寬度一致，具體哪些部分題目不做具體指明，看看大家的判斷如何。

任務註意事項

只需要完成HTML，CSS代碼編寫，不需要寫JavaScript

設計稿中的圖片、文案均可自行設定

在Chrome中完美實現與設計稿的各項字體、佈局、內外邊距等樣式

有能力的同學可以嘗試跨瀏覽器的相容性

有能力的同學可以在實現一遍後嘗試用less, sass或者stylus等再實現一次

線上學習參考資料

MDN HTML入門

MDN CSS入門教程

任務八：響應式網格（柵格化）佈局

重要說明

任務目的

使用 HTML 與 CSS 實現類似 BootStrap 的響應式 12 欄網格佈局，根據屏幕寬度，元素占的欄數不同。

任務描述

需要實現如效果圖所示，調整瀏覽器寬度查看響應式效果，效果圖中的紅色的文字是說明，不需要寫在 HTML 中。

任務註意事項

網格佈局的作用在於更有效地控制元素在網頁中所占比例的大小。比如，博客中有一個留言板模塊，在比較大的屏幕上，我們希望它占了右邊 25% 的寬度，在手機等比較小的屏幕上，我們希望它占 100% 的寬度，出現在博客文章下方。網格佈局是一種實現這一需求的辦法，它的好處是，把所有的寬度分為固定欄數（常用 12 欄），從而更高效的控制元素寬度。而這功能，我們使用 HTML 和 CSS 就能實現了。

以 BootStrap 的網格系統為例，DOM 元素類名形如 col-md-4；其中 col 是“列” column 的縮寫；md 是 medium 的縮寫，適用於應屏幕寬度大於 768px 的場景；4 是占四欄的意思。因此，col-md-4 的意思是，在屏幕寬度大於 768px 時，該元素占四欄。

線上學習參考資料

BootStrap 官網：如果你沒用過的話，至少瞭解一下它是做什麼的

Bootstrap grid examples：改變瀏覽器寬度，查看不同類名元素的表現，理解網格系統的作用。然後，通過“審查元素”查看對應 CSS，思考這一系統是如何實現的

BootStrap 帶 offset 的網格系統

Creating Your Own CSS Grid System：你可以先自己想想怎麼實現，沒有思路的話看看別人的做法

任務九：使用HTML/CSS實現一個複雜頁面

重要說明

任務目的

通過實現一個較為複雜的頁面，加深對於HTML，CSS的實戰能力

實踐代碼的復用、優化

任務描述

通過HTML及CSS實現設計稿設計稿PSD文件（點擊下載），效果如效果圖（點擊打開）
整個頁面內容寬度固定，但頭部的藍色導航和瀏覽器寬度保持一致

任務註意事項

只需要完成HTML，CSS代碼編寫，不需要寫JavaScript

tab只需要實現樣式，有能力餘力的同學可以嘗試實現不使用JavaScript的情況下，實現Tab切換

所有的下拉菜單（Select）均要求按照設計稿樣式實現，下拉後的樣式自定義，不需要實現下拉選擇的功能，但樣式要實現

在Chrome中完美實現與設計稿的除了文字以外的各項圖片、字體、顏色、佈局、內外邊距等樣式

有能力的同學可以嘗試跨瀏覽器的相容性

有能力的同學可以在實現一遍後嘗試用less, sass或者stylus等再實現一次

線上學習參考資料

MDN HTML入門

MDN CSS入門教程

任務十：Flexbox 佈局練習

重要說明

任務目的

學習如何flex進行佈局，學習如何根據屏幕寬度調整佈局策略。

任務描述

需要實現的效果如效果圖（點擊打開）所示，調整瀏覽器寬度查看響應式效果，紅色的文字是說明，不需要寫在 HTML 中。

任務註意事項

只需要完成HTML，CSS代碼編寫，不需要寫JavaScript
屏幕寬度小於 640px 時，調整 Flexbox 的屬性以實現第四個元素移動到最前面的效果，而不要改動第一個元素的邊框顏色與高度實現效果圖。
思考 Flexbox 佈局和網格佈局的異同，以及分別適用於什麼樣的場景。可以搜索一下別人的結論，不過要保持思辨的態度，不可直接接受別人的觀點。
HTML 及 CSS 代碼結構清晰、規範

線上學習參考資料

Flexbox詳解：瞭解 Flexbox 屬性的含義
圖解 CSS3 Flexbox 屬性：看完這兩篇，對 Flexbox 的瞭解就夠了，多實踐一下，理解會更深刻
Flexbox——快速佈局神器
 使用 CSS 彈性盒
 MDN flex屬性

任務十一：移動Web頁面佈局實踐

重要說明

任務目的

進行移動開發時的HTML及CSS實踐

掌握移動Web開發在頁面架構和佈局的方法及差異性

掌握移動Web開發頁面調試的方法

任務描述

實現與設計圖（點擊查看）一致的移動端Web頁面

任務註意事項

本任務只涉及 HTML 及 CSS

實現的頁面和設計圖在iOS Safari，微信，Android瀏覽器中均基本一致

HTML 及 CSS 代碼結構清晰、規範

嘗試在適合的地方使用CSS 3中的flex佈局

有能力的同學可以在實現一遍後嘗試用less, sass或者stylus等再實現一次

線上學習參考資料

任務十二：學習CSS 3的新特性

重要說明

任務目的

學習瞭解 CSS 3 都有哪些新特性，並選取其中一些進行實戰小練習

任務描述

實現示例圖（點擊查看）中的幾個例子

任務註意事項

本任務只涉及 HTML 及 CSS
HTML 及 CSS 代碼結構清晰、規範
除了任務中的3個小任務，儘可能多地嘗試 CSS 3 的其他新特性