前端布局典型案例

一、题目要求及页面效果示意图

1）如下图布局，分为上下两栏，下面一栏又分左右两栏。上栏宽度为100%、高度为200px，下栏左侧栏宽度为100px，下栏右侧栏根据页面宽度自适应。请写出具体的HTML和css代码。
2）当浏览器宽度减少到700px后，顶部栏高度变为50px，下栏左侧栏消失，下栏右侧栏宽度为100%。

二、考点分析

基础的布局知识，可以用伸缩布局和定位等多种方法实现。
媒体查询，媒体查询根据屏幕尺寸的变化进行动态适配，语法为 @media (条件) {}。

三、解答代码

1）定位写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>面试题</title><style>* {margin: 0;padding: 0;}@media (min-width: 701px) {.topbox {width: 100%;height: 200px;background-color: #33ccff;}.leftbox {width: 100px;position: absolute;top: 200px;left: 0;bottom: 0;background-color: #ffcc99;}.rightbox {position: absolute;top: 200px;left: 100px;right: 0;bottom: 0;background-color: #da84db;}}@media (max-width: 700px) {.topbox {width: 100%;height: 50px;background-color: #33ccff;}.leftbox {display: none;}.rightbox {width: 100%;position: absolute;top: 50px;bottom: 0;background-color: #da84db;}}</style>
</head>
<body><div class="topbox">上栏</div><div class="bottombox"><div class="leftbox">下栏左侧栏</div><div class="rightbox">下栏右侧栏</div></div>
</body>
</html>

2）伸缩布局写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>面试题</title><style>* {margin: 0;padding: 0;height: 100%;}body{display: flex;flex-direction:column;justify-content: space-between;height: 100%;}@media (min-width: 701px) {.topbox {width: 100%;height: 200px;background-color: #33ccff;}.bottombox{display: flex;justify-content: space-between;flex-grow: 1;}.leftbox {width: 100px;height: 100%;background-color: #ffcc99;}.rightbox {height: 100%;background-color: #da84db;flex-grow: 1;}}@media (max-width: 700px) {.topbox {width: 100%;height: 50px;background-color: #33ccff;}.leftbox {display: none;}.rightbox {width: 100%;flex-grow: 1;background-color: #da84db;}}</style>
</head>
<body><div class="topbox">上栏</div><div class="bottombox"><div class="leftbox">下栏左侧栏</div><div class="rightbox">下栏右侧栏</div></div>
</body>
</html>

四、页面展示

前端布局面典型案例面试题相关推荐

透过现象看本质: 常见的前端架构风格和案例
所谓软件架构风格,是指描述某个特定应用领域中系统组织方式的惯用模式.架构风格定义一个词汇表和一组约束,词汇表中包含一些组件及连接器,约束则指出系统如何将构建和连接器组合起来.软件架构风格反映了领域中众 ...
从上往下流式布局_教大家怎么写前端布局
一.静态布局(Static Layout) 1. 布局概念最传统.原始的Web布局设计.网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow: ...
2022-2028年中国医疗器械行业战略运营模式与典型案例分析报告
2022-2028年中国医疗器械行业战略运营模式与典型案例分析报告 mmmmmm&mmmmmm鸿**mmm晟&mmm信**mmm合&mmm研**mmmmmmm究&mmm ...
网易云信荣获2021年度智慧教育典型案例奖项，并入选《智慧教育发展及产业图谱研究报告》...
日前,2021年中国国际信息通信展览会.ICT 中国·智慧教育高峰论坛在北京成功举办.本次大会以"同心致远聚力前行"为主题,汇聚了来自各大高校.科研机构.知名企业的众多专家,共话 ...
软件架构设计案例_透过现象看本质：常见的前端架构风格和案例
所谓软件架构风格,是指描述某个特定应用领域中系统组织方式的惯用模式.架构风格定义一个词汇表和一组约束,词汇表中包含一些组件及连接器,约束则指出系统如何将构建和连接器组合起来.软件架构风格反映了领域中众 ...
智慧园区主要功能及典型案例分析
智慧园区主要功能及典型案例分析智慧园区是指融合新一代信息与通信技术,具备迅速信息采集.高速信息传输.高度集中技术.智慧实时处理和服务提供能力,实现产业园区内及时.互动.整合的信息感知.传递和处理,以 ...
Web前端求职必备常见前端面试题汇总（二）
一般情况下web前端面试的时候并不会设计特别复杂的问题.但是依旧有很多同学在比较基础的问题上栽了跟头.所以小编结合多套面试题,为大家整理出8个虽然简单面试题,即将面试或者正在面试的小伙伴速度参考一下, ...
Web前端程序员必备前端面试题汇总（1）
任何技术岗位面试的时候都要经过人力面试和技术岗位面试至少两次.人力面试一般也就是考察一下个人品质以及薪资问题,而技术岗位则是考察你是否有真才实学.本文和大家分享一个难到了很多前端工程师的面试题:Qui ...
web前端HTML和CSS3常见面试题
web前端HTML和CSS3常见面试题 1.你常用的浏览器有哪些? 1: Chrome 内核 Webkit -> Blink 2: FireFox 火狐内核 Gecko 开源 3: IE Tr ...
大数据公司挖掘数据价值的49个典型案例
大数据公司挖掘数据价值的49个典型案例对于企业来说,100条理论确实不如一个成功的标杆有实践意义,本文的主旨就是寻找"正在做"大数据的49个样本. 本文力图从企业运营和管理的角度 ...

前端布局面典型案例面试题

前端布局典型案例

一、题目要求及页面效果示意图

二、考点分析

三、解答代码

1）定位写法

2）伸缩布局写法

四、页面展示

前端布局面典型案例面试题相关推荐

最新文章

热门文章

前端布局面典型案例 面试题

前端布局典型案例

一、题目要求及页面效果示意图

二、考点分析

三、解答代码

1）定位写法

2）伸缩布局写法

四、页面展示

前端布局面典型案例 面试题相关推荐

最新文章

热门文章

前端布局面典型案例面试题

前端布局面典型案例面试题相关推荐