百度前端学院_小薇课堂_task2

任务目的

• 针对设计稿样式进行合理的HTML架构，包括以下但不限于：
  
  • 掌握常用HTML标签的含义、用法
  • 能够基于设计稿来合理规划HTML文档结构
  • 理解语义化，合理地使用HTML标签来构建页面
• 掌握基本的CSS编码，包括以下但不限于：
  
  • 了解CSS的定义、概念、发展简史
  • 掌握CSS选择器的含义和用法
  • 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式

任务描述

基于第一个任务“零基础HTML编码”的代码，参考 示例图（点击查看），在步骤一的代码基础上增加CSS样式代码的编写

任务注意事项

• 只需要完成HTML，CSS代码编写，不需要写JavaScript
• 示例图仅为参考，不需要完全实现一致，其中的图片、文案均可自行设定
• 尽可能多地尝试不同的、更多的样式设定来实践各种CSS属性
• HTML 及 CSS 代码结构清晰、规范

在线学习参考资料

• MDN HTML入门
• MDN CSS入门教程
• 慕课HTML+CSS基础教程视频

效果图

点击查看效果图

源码地址

点击查看源码地址

涉及的CSS基础内容

• 表单
• 表格
• 图片
• 超链接的样式

总结

主要用到了CSS的基础，总体不算太难。
更多的css的基础会单独写一篇文章来详细记录。

百度前端学院小薇课堂任务一

系统学习前端之HTML基础

系统学习前端之CSS基础