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

時間 2019-11-09

標籤百度前端技術學院 html+css html css 課程任務欄目 CSS 简体版

原文原文鏈接

任務一：零基礎HTML編碼

課程概述

做業提交截止時間：04-24css

重要說明

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

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

任務目的

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

掌握經常使用HTML標籤的含義、用法css3

可以基於設計稿來合理規劃HTML文檔結構git

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

任務描述

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

任務注意事項

只須要完成HTML代碼編寫，不須要寫CSSbootstrap

示例圖僅爲參考，不須要徹底實現一致，其中的圖片、文案都可自行設定segmentfault

儘量多地嘗試更多的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 代碼結構清晰、規範