阳江 网站建设,wordpress插件woo,wordpress哪个模板好用,怎样解析网站域名CSS中的栅格布局
在写前端项目的时候#xff0c;我之前一直习惯使用flex布局#xff0c;flex布局写起来比较随心#xff0c;几乎可以实现任意形式的页面布局。不过自从B占看到某位大佬的grid布局后#xff0c;发现布局居然还可以这么玩#xff0c;正好自己在写一个vue3的…CSS中的栅格布局
在写前端项目的时候我之前一直习惯使用flex布局flex布局写起来比较随心几乎可以实现任意形式的页面布局。不过自从B占看到某位大佬的grid布局后发现布局居然还可以这么玩正好自己在写一个vue3的项目需要写几个大屏展示方案用栅格布局实现了一下发现真香
看一下最后的实现效果真实效果比这个好很多因为有数据和地图但这里主要记录怎么使用栅格布局所以我只将精髓 页面分上中下三部分整体使用flex布局排列方向是column。上面是标题中间是数据看板下面是展示的核心内容
上面也是用的flex布局中间和下面都是grid布局
先看下完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title网格布局/titlestyle.main-screen {display: flex;flex-direction: column;align-items: center;justify-content: center;}.header {width: 100%;height: 80px;background-color: #030829;display: flex;align-items: center;justify-content: space-between;}.time {color: #fff;margin-left: 20px;}.tip {color: #fff;margin-right: 20px;display: flex;justify-content: center;align-items: center;}.header-title {width: 30%;text-align: center;color: #FFFFff;background-size: 100% 100%;height: 80px;font-family: 微软雅黑 !important;}h2 {margin-top: 16px !important;font-size: 28px !important;}.content {width: 100%;background-color: #081832;padding-top: 10px;padding-bottom: 5px;height: 950px;display: flex;flex-direction: column;}.numeric {padding: 10px;display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 30px;// background-color: #034c6a;height: 15%;width: 100%;}.chart {height: 85%;width: 100%;// border: 1px solid #fff;display: grid;grid-template-columns: repeat(10, 1fr);gap: 10px;padding: 10px;}.box {box-shadow: -10px 0px 15px #034c6a inset,0px -10px 15px #034c6a inset,10px 0px 15px #034c6a inset,0px 10px 15px #034c6a inset;border: 1px solid #034c6a;box-sizing: border-box;margin-top: 10px;position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;}.title {background-color: #034c6a;border-radius: 18px;position: absolute;height: 35px;width: 60%;top: -15px;color: #ffffff;font-weight: bold;font-size: 16px;left: 20%;line-height: 35px;text-align: center;}.top-left {grid-row: 1/4;grid-column: 1/3;}.bottom-left {grid-row: 4/7;grid-column: 1/3;}.middle-map-left {grid-row: 1/5;grid-column: 3/6;}.middle-map-right {grid-row: 1/5;grid-column: 6/9;}.middle-bottom-left {grid-row: 5/7;grid-column: 3/5;}.middle-bottom-bottom {grid-row: 5/7;grid-column: 5/7;}.middle-bottom-right {grid-row: 5/7;grid-column: 7/9;}.right-top {grid-row: 1/4;grid-column: 9/11;}.right-bottom {grid-row: 4/7;grid-column: 9/11;}.numeric-box {background-color: #034c6a;border-radius: 8px;height: 100%;display: flex;justify-content: space-around;align-items: center;}/style
/head
body stylemargin: 0; padding: 0;div classmain-screendiv classheaderdiv classtime2023-10-27 16:59:59/divdiv classheader-titleh2strong无锡市今日数据看板/strong/h2/divdiv classtipspan提示数据每小时更新/span/div/divdiv classcontentdiv classnumericdiv classnumeric-box/divdiv classnumeric-box/divdiv classnumeric-box/div/divdiv classchartdiv classbox top-leftdiv classtitle江阴市/div/divdiv classbox bottom-leftdiv classtitle宜兴市/div/divdiv classbox middle-map-leftdiv classtitle今日地图/div/divdiv classbox middle-map-rightdiv classtitle当前地图/div/divdiv classbox middle-bottom-leftdiv classtitle滨湖区/div/divdiv classbox middle-bottom-bottomdiv classtitle新吴区/div/divdiv classbox middle-bottom-rightdiv classtitle梁溪区/div/divdiv classbox right-topdiv classtitle锡山区/div/divdiv classbox right-bottomdiv classtitle惠山区/div/div/div/div/div
/body
/html
先看中间的三个数据展示面板的网格布局样式代码如下 .numeric {padding: 10px;display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 30px;// background-color: #034c6a;height: 15%;width: 100%;}.numeric-box {background-color: #034c6a;border-radius: 8px;height: 100%;display: flex;justify-content: space-around;align-items: center;}主要看上面的numeric这是一个很基础的网格布局核心就是设置grid-template-columns因为有3列所以写三个1fr就行了然后就是样式的美化gap是样式之间的间隔
下面来看比较复杂的grid布局
下面那部分内容我要展示7个小的方块2个大一点的方块大的方块要放在中间为了布局好看点我进行了如下的设计 每个方块都有一个box属性就是设置背景颜色和阴影的。其他的属性直接在图上标注了。
那现在的重点就是如何用栅格布局来设计这种响应式的大屏页面了根据代码
首先看容器的样式 .chart {height: 85%;width: 100%;// border: 1px solid #fff;display: grid;grid-template-columns: repeat(10, 1fr);gap: 10px;padding: 10px;}关键的代码就是设置了grid-template-columns: repeat(10, 1fr);意思是横向上重复10列也就是有10个网格这个10如何而来自然是根据上面的设计从B到K正好10格。
接下来看每个方块是怎么设置的 .top-left {grid-row: 1/4;grid-column: 1/3;}.bottom-left {grid-row: 4/7;grid-column: 1/3;}.middle-map-left {grid-row: 1/5;grid-column: 3/6;}.middle-map-right {grid-row: 1/5;grid-column: 6/9;}.middle-bottom-left {grid-row: 5/7;grid-column: 3/5;}.middle-bottom-bottom {grid-row: 5/7;grid-column: 5/7;}.middle-bottom-right {grid-row: 5/7;grid-column: 7/9;}.right-top {grid-row: 1/4;grid-column: 9/11;}.right-bottom {grid-row: 4/7;grid-column: 9/11;}其实都是设置了2个属性
grid-row这个属性表示的意思是元素的行占位比如1/4其中1表达的意思是从第1行开始4表达的意思是占3行134再比如5/75表示从第5行开始占2行527grid-column和grid-row一样
所以关键就是设计好上面那个页面然后根据这两个参数就能完成一个响应式的grid部局了比自己手写flex布局效果要好得多
还有一些细节就是网格之间还会有间距可以用gap来设置
