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

面向人羣：

零基礎或初學者

難度：

簡單

重要說明

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

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

任務目的

• 針對設計稿樣式進行合理的HTML架構，包括如下但不限於：
  • 掌握經常使用HTML標籤的含義、用法
  • 可以基於設計稿來合理規劃HTML文檔結構
  • 理解語義化，合理地使用HTML標籤來構建頁面
• 掌握基本的CSS編碼，包括如下但不限於：
  • 瞭解CSS的定義、概念、發展簡史
  • 掌握CSS選擇器的含義和用法
  • 實踐並掌握CSS的顏色、字體、背景、邊框、盒模型、簡單佈局等樣式的定義方式

任務描述

• 基於第一個任務「零基礎HTML編碼」的代碼，參考 示例圖（點擊查看），在步驟一的代碼基礎上增長CSS樣式代碼的編寫
• 頭部和底部的黑色區域始終是100%寬
• 頁面右側部分爲固定寬度，左側保持與瀏覽器窗口變化同步自適應變化
• 左側的各個模塊裏面的內容寬度跟隨左側總體寬度同步自適應變化
• 10張圖片須要永遠都完整展示，因此會隨着寬度變窄，從兩行變成三行甚至更多，也有可能隨着寬度變寬，變成一行

任務注意事項

• 只須要完成HTML，CSS代碼編寫，不須要寫JavaScript
• 示例圖僅爲參考，不須要徹底實現一致，其中的圖片、文案都可自行設定
• 儘量多地嘗試不一樣的、更多的樣式設定來實踐各類CSS屬性
• HTML 及 CSS 代碼結構清晰、規範

任務協做建議

• 團隊集中討論，明確題目要求，保證隊伍各自對題目要求認知一致
• 能夠各自完成任務實踐，也能夠按照如下分模塊而後各自分工完成
  1. 頭部、底部及總體左右佈局架構
  2. 右側表單
  3. 前面兩篇文章部分
  4. 圖片部分
  5. 表格部分
• 交叉互相Review其餘人的代碼，建議每一個人至少看一個同組隊友的代碼
• 相互討論，最後合成一份組內最佳代碼進行提交

在線學習參考資料

• MDN HTML入門
• MDN CSS入門教程
• 慕課HTML+CSS基礎教程視頻