HTML和CSS——初步认知

任务大纲

一、基本任务（一）
要求：完成一个表格 （有表格标题、换行变色、添加：按钮点击事件）

二、基本任务（二）
要求：在https://studio.code.org上注册账号，完成HTML和CSS的系列⽹⻚开发任务。

三、拓展任务
要求：
1、理解CSS盒⼦模型的多层含义（边框边距、标准⽂档流、浮动与定位、布局模式）
2、完成下图的CSS盒⼦模型布局

基本任务（一）

要求：

完成一个表格 （有表格标题、换行变色、添加：按钮点击事件）

• 任务需求：

操作

• 输入上面的源码后，如图：
• 点击我要认证后弹出网页：

基本任务（二）

要求：

• 在code.org上以「所⻅即所得（WYSIWYG）」的⽅式完成HTML和CSS系列⽹⻚开发任务（
  https://studio.code.org/s/csd2-2019 ） 如果已注册账号则⽆需再注册
• 加深对HTML和CSS技术的理解
• 任务需求：

操作

• 登录：https://studio.code.org 创建一个账号，再进入https://studio.code.org/s/csd2-2019 开始学习：

我的网站为：aichard.github.io（还未完成主题布局）

拓展任务

要求：

• 深⼊理解CSS盒⼦模型多层次含义
• 边框边距
• 标准⽂档流（浮动与定位）
• 布局模式
• 完成下图的CSS盒⼦模型布局
  

做出图案：

操作方法（在这里）

Thanks！
（有错误请私信改正。）