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

小薇课堂_task_5

任务目的

• 针对设计稿样式进行合理的HTML架构，包括以下但不限于：

• 掌握常用HTML标签的含义、用法

  • 能够基于设计稿来合理规划HTML文档结构
  • 理解语义化，合理地使用HTML标签来构建页面

• 掌握基本的CSS编码，包括以下但不限于：

• 了解CSS的定义、概念、发展简史

  • 掌握CSS选择器的含义和用法
  • 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式

任务描述

• 基于第一个任务“零基础HTML编码”的代码，参考 示例图（点击查看），在步骤一的代码基础上增加CSS样式代码的编写
• 头部和底部的黑色区域始终是100%宽
• 页面右侧部分为固定宽度，左侧保持与浏览器窗口变化同步自适应变化
• 左侧的各个模块里面的内容宽度跟随左侧整体宽度同步自适应变化
• 10张图片需要永远都完整展现，所以会随着宽度变窄，从两行变成三行甚至更多，也有可能随着宽度变宽，变成一行

源码及效果图

效果图

源码

任务注意事项

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

总结：
- 两栏式布局，其中一栏固定定位，另一栏宽高自适应。（这里我使用了定位流排版）
- 水平垂直居中的问题，我是用了基础的text-align: center;line-height: 父元素等高;

CSS网页布局方式–浮动流、定位流

百度前端学院_task_1

百度前端学院_task_2

百度前端学院_task_3

百度前端学院_task_4