任务五：零基础HTML及CSS编码（二）
任务目的
- 针对设计稿样式进行合理的HTML架构，包括以下但不限于：
- 掌握常用HTML标签的含义、用法
- 能够基于设计稿来合理规划HTML文档结构
- 理解语义化，合理地使用HTML标签来构建页面
- 掌握基本的CSS编码，包括以下但不限于：
- 了解CSS的定义、概念、发展简史
- 掌握CSS选择器的含义和用法
- 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式
任务描述
- 基于第一个任务“零基础HTML编码”的代码，参考 示例图（点击查看），在步骤一的代码基础上增加CSS样式代码的编写
- 头部和底部的黑色区域始终是100%宽
- 页面右侧部分为固定宽度，左侧保持与浏览器窗口变化同步自适应变化
- 左侧的各个模块里面的内容宽度跟随左侧整体宽度同步自适应变化
- 10张图片需要永远都完整展现，所以会随着宽度变窄，从两行变成三行甚至更多，也有可能随着宽度变宽，变成一行
详细任务要求请点击百度前端查看
感想
这个任务是基于任务一的HTML做出相应的样式排版的，难度来说不算大，尤其是加上任务二的时候已经设计了相关的样式了，所以现在做的是继续增加改进些样式，然后唯一的难度应该是左右分栏了，涉及到的是相关的浮动，这里的话我上面一篇练习文章里面有介绍到一篇讲解浮动原理的文章，看着理解好那篇教学文章的话，做起来还是很轻松的。
下面是练习的演示和代码
Demo：
百度前端任务五