WEB前端教程：浮动实战任务 - 好学星城学习论坛

page contents

WEB前端教程：浮动实战任务

掌握常用 HTML 标签的含义、用法，基于设计稿来合理规划 HTML 文档结构，理解语义化，合理地使用 HTML 标签来构建页面

任务目标

掌握常用 HTML 标签的含义、用法，基于设计稿来合理规划 HTML 文档结构，理解语义化，合理地使用 HTML 标签来构建页面；了解 CSS 的定义、概念、发展简史，掌握 CSS 选择器的含义和用法，实践并掌握 CSS 的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式。

编码

通过 HTML 及 CSS 参考示例图 (opens new window)实现页面开发，要求实现效果与示例图基本一致

页面宽度固定（定宽）,请应用 CSS 浮动以及前几天所学的 CSS 样式来完成页面效果
只需要完成 HTML、CSS 代码编写，不需要写 JavaScript
示例图中的图片、文案均可自行设定
在 Chrome 中完美实现与示例图的各项字体、布局、内外边距等样式
有能力的同学可以尝试跨浏览器的兼容性
有能力的同学可以在实现一遍后尝试用 less、sass 或者 stylus 等再实现一次

注意事项

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

参考阅读

总结

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

日期，今天的学习总用时，今天学习的目标是什么，是否达成
哪些东西今天了解得比较透彻，说说自己的理解
哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-15 10:07
阅读 ( 370 )
分类：WEB前端开发

作家榜 »

轩辕小不懂 2403 文章
小柒 1470 文章
Pack 1135 文章
Nen 576 文章
王昭君 209 文章
文双 71 文章
小威 64 文章
Cara 36 文章