page contents

WEB前端教程:实战任务

实现一个官网首页,加深对于 HTML、CSS 的实战能力,进一步深入学习掌握弹性盒子和网格布局

attachments-2022-10-w8s926BR634e4dde8a2f6.png任务目标

实现一个官网首页,加深对于 HTML、CSS 的实战能力,进一步深入学习掌握弹性盒子和网格布局,以及响应式页面的构建

阅读复习

编码一

通过 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电子书、教程、项目接单、源码等等

attachments-2022-10-pDICeoi1634e4c1186f2d.jpg

0 条评论

请先 登录 后评论
小柒
小柒

1300 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. 小柒 1300 文章
  3. Pack 1135 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章