Web前端开发实战教程（HTML5+CSS3+JavaScript）（AI协同）（第2版）课件 模块五 布局项目实战.pptx

布局项目实战

课件目录01在线计算器布局02蜗牛学苑宣传页布局03响应式布局04蜗牛笔记布局

在线计算器布局项目介绍本实战项目主要结合第2章完成的在线计算器的布局，对第2章的基于表格完成的布局利用盒模型+CSS进行改造，基本需求描述如下。（1）全部使用盒模型标签完成，不得使用其他标签。（2）3个小圆点使用盒模型完成，利用盒模型的圆角属性完成圆形设计。（3）结果框为红色边框加白色背景，计算器的四周为圆角。在线计算器界面如图5-1所示。

在线计算器布局开发思路先从总体上对在线计算器进行布局分析，其需要一个完整的父容器，即最外面的那一层容器，其大小和宽度可以参考第2章的设置。将背景色铺满整个容器，背