专业做苗木的网站,制作网页视频教程,了解营销型企业网站建设,网站为什么没有排名了页面布局是可视化大屏的基础#xff0c;想要拥有一个基本美观的大屏#xff0c;就得考虑页面整体模块的宽高自适应#xff0c;我们自然就会想到具有强大灵活性flex布局#xff0c;再借助百分比布局来辅助。至此#xff0c;大屏页面布局问题即可得到解决。 可视化大屏开发系… 页面布局是可视化大屏的基础想要拥有一个基本美观的大屏就得考虑页面整体模块的宽高自适应我们自然就会想到具有强大灵活性flex布局再借助百分比布局来辅助。至此大屏页面布局问题即可得到解决。 可视化大屏开发系列——页面布局 案例分析实现思路完整效果 案例分析 观察上述页面对页面布局进行分析
整体分为头部标题区域和主体内容区域两部分主体内容区域从左到右分为左、中、右三部分主体内容左边和右边的区域从上到下分为四部分左边第一部分分为左右两块主体内容中间的区域从上到下分为两部分上边第一部分分为左中右三块。
实现思路
1页面整体高度设为100%头部标题区域高度设为10%主体内容区域高度设为90%——实现分析1
div classalldiv classhead头部标题/divdiv classwhole主体内容/div
/div.all {height: 100%;.head {height: 10%;}.whole {height: 90%;}
}2鉴于页面上有从左到右和从上到下的布局利用flex布局实现这里抽取出一些公共样式节省代码量后面会使用
.my-h-flex {//容器的样式从左到右display: flex;gap: 8px;
}
.my-v-flex {//容器的样式从上到下display: flex;flex-direction: column;gap:10px;
}
.my-flex1 {//项目的样式flex: 1;
}3主体内容区域从左到右布局则为主体内容区域元素添加样式my-h-flex为其添加三个内部直接子元素并设置子元素flex属性来表示所占的剩余空间——实现分析2
div classwhole my-h-flexdiv classleft左/divdiv classmiddle中/divdiv classright右/div
/div.left {flex: 1;
}
.middle {flex: 2;
}
.right {flex: 1;
}4主体内容区域左边部分从上到下布局则为其相应元素添加样式my-v-flex为其添加四个内部直接子元素并设置子元素flex属性来表示所占的剩余空间而第一个内部直接子元素的布局方式与3类似。与此同理主体内容区域中间和右边部分依然从上到下布局这里不再赘述。——实现分析3和分析4
div classleft my-v-flexdiv classfirst my-h-flex styleflex:0.8;div classmy-flex1左上1/divdiv classmy-flex1左上2/div/divdiv classsecond my-flex1左2/divdiv classthird my-flex1左3/divdiv classforth my-flex1左4/div
/div完整效果
整体页面布局代码较长这里就不全部贴出占用过多篇幅。按照本文思路码完代码最终页面呈现的完整效果如下 好了掌握以上页面布局思路我们就可以轻松画出各种大屏页面布局啦~
PS:若对页面布局完整代码有需要的同学可留言
