WEB前端教程：实战任务
实现一个官网首页，加深对于 HTML、CSS 的实战能力，进一步深入学习掌握弹性盒子和网格布局
任务目标
实现一个官网首页，加深对于 HTML、CSS 的实战能力，进一步深入学习掌握弹性盒子和网格布局，以及响应式页面的构建
阅读复习
- MDN 网格(opens new window)
- MDN 弹性盒子(opens new window)
- 响应式设计(opens new window)
- MDN 媒体查询基础(opens new window)
编码一
通过 HTML 及 CSS 网格布局以及弹性盒子布局实现一个响应式主页，具体实现要求如下
- PC 端访问主页效果为示例图 (opens new window),手机端访问主页效果为示例图(opens new window)
- 只需要完成 HTML、CSS 代码编写，不需要写 JavaScript
- 示例图中的图片、文案均可自行设定
- 在 Chrome 中完美实现与示例图的各项字体、布局、内外边距等样式
- 有能力的同学可以尝试跨浏览器的兼容性
- 有能力的同学可以在实现一遍后尝试用 less、sass 或者 stylus 等再实现一次
编码二
还记得我们学习完浮动进行的实战任务练习吗，当时的页面主要用浮动来实现的，试试看用网格或者弹性盒子将那个静态页面编程一个响应式,这里给出一个移动端效果图(opens new window)
提交
把你的代码提交到 Github ，把 Github 地址提交到作业里，如果有余力的同学，可以学习如何在 Github 中预览你的 HTML 代码，并提交预览地址。
总结
找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：
- 日期，今天的学习总用时，今天学习的目标是什么，是否达成
- 哪些东西今天了解得比较透彻，说说自己的理解
- 哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
- 哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等
- 发表于 2022-10-18 14:55
- 阅读 ( 530 )
- 分类：WEB前端开发
