扬州哪里做网站,店铺位置怎么免费注册定位,wordpress 评论模板,做cad模板下载网站引言
最近接到一个网页布局比较复杂的页面#xff0c;看了半天还是决定用grid布局来写#xff0c;记录一下 布局是构建用户界面的关键部分。CSS Grid布局提供了一种简单而强大的方式来创建复杂的网格布局#xff0c;它让设计师和开发者能够更直观、更灵活地控制网页的结构。…引言
最近接到一个网页布局比较复杂的页面看了半天还是决定用grid布局来写记录一下 布局是构建用户界面的关键部分。CSS Grid布局提供了一种简单而强大的方式来创建复杂的网格布局它让设计师和开发者能够更直观、更灵活地控制网页的结构。本文将深入探讨CSS Grid布局的核心概念、优势以及如何在实际项目中应用它。
CSS Grid布局基础
什么是CSS Grid布局
CSS Grid布局是一种基于网格的布局系统允许你将页面分割成多个行和列。它提供了一种在二维空间内布局元素的方法可以轻松地创建复杂的布局结构。
Grid容器和Grid项
Grid容器通过设置 display: grid 或 display: inline-grid 属性一个元素就变成了Grid容器。Grid项Grid容器的直接子元素自动成为Grid项。
Grid轨道
Grid列和行通过 grid-template-columns 和 grid-template-rows 属性定义网格的列和行。Grid间隙使用 grid-column-gap 和 grid-row-gap或简写为 grid-gap来设置网格项之间的间隙。
Grid线
命名网格线可以给网格线命名以便更精确地定位Grid项。网格线编号网格线从1开始编号可以使用这些编号来指定Grid项的位置。
CSS Grid布局的优势
灵活性
CSS Grid布局提供了前所未有的灵活性可以轻松地创建响应式设计适应不同屏幕尺寸和设备。
简洁性
与传统的浮动布局相比Grid布局的语法更加简洁明了减少了需要的CSS代码量。
对齐控制
CSS Grid布局提供了强大的对齐控制功能包括对齐网格项和对齐整个网格。
CSS Grid布局的实用技巧
创建复杂布局
介绍如何使用Grid布局创建复杂的页面布局包括多列布局、不规则网格等。
响应式设计
探讨如何利用CSS Grid布局实现响应式设计包括使用媒体查询和网格模板区域。
与Flexbox的对比
简要比较CSS Grid布局与Flexbox布局帮助读者理解何时使用Grid布局何时使用Flexbox布局。
实际案例分析
通过分析几个实际的网页设计案例展示CSS Grid布局在实际项目中的应用。
结语
CSS Grid布局是现代网页设计不可或缺的一部分。掌握它将为你的网页设计带来无限可能让你能够创建出既美观又功能强大的用户界面。 文章最后推荐一下:CSS Grid Generator 它可以帮你快速实现grid布局 文章开头布局完整代码
!-- 懒得简化了先实现页面再说时间紧任务重哈哈哈 --
templatediv classInvCurrTonsdiv classInvCurrTons-leftdiv classInvCurrTons-left-box1div classtoTitleh3碎浆站/h3div classfTitlediv短纤: 23323/divdiv长纤: 42332/divdiv机械浆: 432/divdiv总计: 66087/div/div/divdiv classInvCurrTons-left-box1-contentdiv classparent stylewidth: 12%;div v-for(item, index) in PulpData.items :keyindex!-- kd: item.type 0, --divclasskd:class{bd: item.type 1,md: item.type 2}{{ item.name }}/div/div/divdiv classvertical-dashed-line/divdiv classvertical-dashed-line2/divdiv classparent-right stylewidth: 85%;div classparent-right-item1div classparent5divclassbox1 kd:class{bd: PulpData.items1[0].type 1,md: PulpData.items1[0].type 2,bd2: PulpData.items1[0].type 3}{{ PulpData.items1[0].name }}/div/div/divdiv classparent-right-item2div classparent2 stylewidth: 45%;divv-for(item, index) in PulpData.items2:keyindex:classLBDiv (index 1)!-- kd: item.type 0, --divclasskd:class{bd: item.type 1,md: item.type 2,bd2: item.type 3}{{ item.name }}/div/div/divdivclassvertical-dashed-line2stylemargin-left: 4px;/divdiv classvertical-dashed-line2/divdiv classvertical-dashed-line3/divdivclassvertical-dashed-line3stylewidth: 22%;left: 48%;/divdiv classparent3 stylewidth: 20%;divv-for(item, index) in PulpData.items3:keyindex:classCBDiv (index 1)!-- kd: item.type 0, --divclasskd:class{bd: item.type 1,md: item.type 2,bd2: item.type 3}{{ item.name }}/div/div/divdiv classvertical-dashed-line4/divdiv classvertical-dashed-line2/divdiv classvertical-dashed-line2/divdiv classparent4 stylewidth: 25%;divv-for(item, index) in PulpData.items4:keyindex:classRBDiv (index 1)!-- kd: item.type 0, --divclasskd:class{bd: item.type 1,md: item.type 2,bd2: item.type 3}{{ item.name }}/div/div/div/div/div/div/divdiv classInvCurrTons-left-box2div classtoTitle styleheight: 20%;h3旧堆场/h3div classfTitlediv短纤: 23323/divdiv长纤: 42332/divdiv机械浆: 432/divdiv总计: 66087/div/div/divdiv classInvCurrTons-left-box2-contentdivv-for(item, index) in OldDump.items:keyindexclassjdcBox!-- kd: item.type 0, --divclasskd:class{bd: item.type 1,md: item.type 2,bd2: item.type 3}{{ item.name }}/div/div/div/div/divdiv classInvCurrTons-rightdiv classtoTitleh3一万方堆场/h3div classfTitlediv短纤: 23323/divdiv长纤: 42332/divdiv机械浆: 432/divdiv总计: 66087/div/div/divdiv classInvCurrTons-right-contentdiv classbox/divdiv classgrid1div classgrid1-ldivv-for(item, index) in tenKHeapData.items:keyindexclassgrid1-l-piece:classgrid1L (index 1)divclasskd:class{bd: item.type 1,md: item.type 2,bd2: item.type 3}{{ item.name }}/div/div/divdiv styledisplay: flex;align-items: flex-end;divclassvertical-dashed-line2styleheight: 42%;background-size: 2rem 1.4rem;/divdivclassvertical-dashed-line2styleheight: 42%;background-size: 2rem 1.4rem;/div/divdiv classgrid1-cdivv-for(item, index) in tenKHeapData.items2:keyindex:classgrid1C (index 1)divclasskd:class{bd: item.type 1,md: item.type 2,bd2: item.type 3}{{ item.name }}/div/div/divdiv classvertical-dashed-line/divdiv classvertical-dashed-line2/divdiv classgrid1-rdivv-for(item, index) in tenKHeapData.items3:keyindexclassgrid1-r-piecedivclasskd:class{bd: item.type 1,md: item.type 2,bd2: item.type 3}{{ item.name }}/div/div/div/divdiv classbox styleposition: relative;divclassvertical-dashed-line3stylewidth: 20%;top: 0;left: 1rem;/divdivclassvertical-dashed-line3stylewidth: 44%;top: 0;left: 8.8rem;/divdivclassvertical-dashed-line3stylewidth: 22%;top: 0;left: 24.4rem;/divdivclassvertical-dashed-line3stylewidth: 20%;top: 100%;left: 1rem;/divdivclassvertical-dashed-line3stylewidth: 44%;top: 100%;left: 8.8rem;/divdivclassvertical-dashed-line3stylewidth: 22%;top: 100%;left: 24.4rem;/div/divdiv classgrid2div classgrid2-ldivv-for(item, index) in tenKHeapData.items4:keyindexclassgrid1-r-piecedivclasskd:class{bd: item.type 1,md: item.type 2,bd2: item.type 3}{{ item.name }}/div/div/divdiv classvertical-dashed-line/divdiv classvertical-dashed-line2/divdiv classgrid2-cdivv-for(item, index) in tenKHeapData.items5:keyindexclassgrid1-r-piecedivclasskd:class{bd: item.type 1,md: item.type 2,bd2: item.type 3}{{ item.name }}/div/div/divdiv classvertical-dashed-line/divdiv classvertical-dashed-line2/divdiv classgrid2-ldivv-for(item, index) in tenKHeapData.items6:keyindexclassgrid1-r-piecedivclasskd:class{bd: item.type 1,md: item.type 2,bd2: item.type 3}{{ item.name }}/div/div/div/div/div/div/div
/templatescript
export default {components: {},data() {return {PulpData: {items: [{ name: 111, type: 2 },{ name: 110 },{ name: 109 },{ name: 108, type: 2 },{ name: 107, type: 1 },{ name: 106, type: 1 },{ name: 105, type: 0 },{ name: 104, type: 1 },{ name: 103, type: 2 },{ name: 102 },{ name: 101, type: 2 }],items1: [{ name: 2-3, type: 2 }],items2: [{ name: 201, type: 2 },{ name: 112, type: 2 },{ name: 113, type: 1 },{ name: 202, type: 1 },{ name: 114 },{ name: 203 },{ name: 1-1, type: 2 },{ name: 1-2 },{ name: 204, type: 1 },{ name: 1-3, type: 3 }],items3: [{ name: 205, type: 1 },{ name: 206, type: 2 },{ name: 2-1, type: 3 },{ name: 2-2, type: 3 }],items4: [{ name: 301, type: 0 },{ name: 302, type: 1 },{ name: 3-1, type: 2 },{ name: 3-2, type: 3 },{ name: 3-3, type: 2 }]},OldDump: {items: [{ name: 601, type: 2 },{ name: 602, type: 3 },{ name: 603, type: 0 },{ name: 604, type: 2 },{ name: 605, type: 0 }]},tenKHeapData: {items: [{ name: 718, type: 2 },{ name: 719, type: 1 },{ name: 720, type: 0 }],items2: [{ name: 715, type: 2 },{ name: 716, type: 2 },{ name: 717, type: 1 },{ name: 708, type: 2 },{ name: 709, type: 0 },{ name: 710, type: 1 },{ name: 711, type: 1 },{ name: 712, type: 1 },{ name: 713, type: 2 },{ name: 714, type: 2 }],items3: [{ name: 707, type: 0 },{ name: 706, type: 2 },{ name: 705, type: 1 },{ name: 704, type: 2 },{ name: 703, type: 1 },{ name: 702, type: 2 },{ name: 701, type: 1 }],items4: [{ name: 816, type: 2 },{ name: 817, type: 2 },{ name: 818, type: 1 },{ name: 819, type: 1 },{ name: 820, type: 1 }],items5: [{ name: 811, type: 2 },{ name: 806, type: 2 },{ name: 812, type: 5 },{ name: 807, type: 1 },{ name: 813, type: 1 },{ name: 808, type: 0 },{ name: 814, type: 2 },{ name: 809, type: 2 },{ name: 815, type: 1 },{ name: 810, type: 0 }],items6: [{ name: 801, type: 2 },{ name: 802, type: 1 },{ name: 803, type: 2 },{ name: 804, type: 0 },{ name: 805, type: 0 }]}//type说明 空堆0 横半堆1 满堆2 竖半堆3};},//监听属性 类似于data概念computed: {},//监控data中的数据变化watch: {},//方法集合methods: {},//生命周期 - 创建完成可以访问当前this实例created() {},//生命周期 - 挂载完成可以访问DOM元素mounted() {},beforeCreate() {}, //生命周期 - 创建之前beforeMount() {}, //生命周期 - 挂载之前beforeUpdate() {}, //生命周期 - 更新之前updated() {}, //生命周期 - 更新之后beforeDestroy() {}, //生命周期 - 销毁之前destroyed() {}, //生命周期 - 销毁完成activated() {} //如果页面有keep-alive缓存功能这个函数会触发
};
/scriptstyle langless scoped
//import url(); 引入公共css类
.kd {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;border: 1px solid #065178;
}
.bd {border: 1px solid #065178;background: linear-gradient(to right, #0073a7 70%, #e9e9e900 0);
}
.md {border: 0px solid;background: #0073a7;
}
.bd2 {border: 1px solid #065178;background: linear-gradient(to bottom, #0073a7 70%, #e9e9e900 0);
}.toTitle {height: 10%;text-align: center;color: #0184cf;.fTitle {color: #71c5e5;display: flex;justify-content: center;div {margin-right: 0.6rem;}}
}
.InvCurrTons {display: flex;height: 100%;-left {width: 60%;margin: 1rem 0rem 2rem;-box1 {height: 70%;background: url(../../img/New/cardB.svg) no-repeat;background-size: 100% 100%;background-position: center top;margin: 0 0.5rem;padding: 0.5rem;-content {display: flex;flex-direction: row;position: relative;height: 90%;padding: 0.4rem 0;.parent {text-align: center;display: flex;flex-direction: column;justify-content: space-between;}.parent-right {.parent-right-item1 {height: 50%;}.parent-right-item2 {position: relative;height: 50%;display: flex;}}}}-box2 {height: 30%;background: url(../../img/New/cardB.svg) no-repeat;background-size: 100% 100%;background-position: center top;margin: 0.5rem 0.5rem 0;-content {display: flex;flex-direction: row;position: relative;height: 80%;padding: 0.4rem 0;justify-content: center;.jdcBox {padding: 1rem;width: 7rem;}}}}-right {width: 45%;background: url(../../img/New/cardB.svg) no-repeat;background-size: 100% 100%;background-position: center top;margin: 1rem 0rem 1.5rem;-content {height: 90%;position: relative;.box {height: 10%;}.grid1 {height: 45%;display: flex;flex-direction: row;justify-content: space-between;padding: 0 1rem;-l {width: 23%;padding-right: 0.3rem;display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(7, 1fr);grid-column-gap: 0;grid-row-gap: 0.4rem;padding-bottom: 0.3rem;}-c {height: 100%;width: 46%;display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(7, 1fr);grid-column-gap: 0.4rem;grid-row-gap: 4px;padding-bottom: 0.3rem;}-r {height: 100%;width: 23%;display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(7, 1fr);grid-column-gap: 0px;grid-row-gap: 4px;padding-bottom: 0.3rem;}}.grid2 {height: 35%;display: flex;flex-direction: row;justify-content: space-between;padding: 0 1rem;-l {height: 100%;width: 23%;display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(5, 1fr);grid-column-gap: 0px;grid-row-gap: 4px;padding: 0.3rem 0 0.5rem;}-c {width: 46%;display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(5, 1fr);grid-column-gap: 0.4rem;grid-row-gap: 4px;padding: 0.3rem 0 0.5rem;}}}}
}.vertical-dashed-line {width: 2px;height: 97%;background-image: linear-gradient(to bottom,rgba(78, 83, 88, 1) 0%,rgba(78, 83, 88, 1) 50%,transparent 80%);background-size: 2rem 2rem; //第一个值20px越大线条越长间隙越大margin: 0 0.5rem 0.5rem;
}
.vertical-dashed-line2 {width: 2px;height: 97%;background-image: linear-gradient(to bottom,rgba(40, 51, 63, 1) 0%,rgba(40, 51, 63, 1) 50%,transparent 80%);background-size: 2rem 2rem; //第一个值20px越大线条越长间隙越大margin-right: 0.5rem;
}
.vertical-dashed-line3 {width: 35%;height: 2px;background-image: linear-gradient(to right,rgba(78, 83, 88, 1) 0%,rgba(78, 83, 88, 1) 50%,transparent 80%);background-size: 2rem 2rem; //第一个值20px越大线条越长间隙越大margin-right: 0.5rem;position: absolute;top: -8px;left: 11%;
}
.vertical-dashed-line4 {width: 3px;height: 97%;background-image: linear-gradient(to bottom, rgba(78, 83, 88, 1));background-size: 2rem 2rem; //第一个值20px越大线条越长间隙越大margin-right: 0.2rem;
}
/stylestyle
.parent2 {width: 100%;text-align: center;display: grid;grid-template-columns: repeat(2, 1.3fr) 0.8fr repeat(2, 1fr);grid-template-rows: repeat(16, 1fr);grid-column-gap: 2px;grid-row-gap: 2px;
}
.LBDiv1 {grid-area: 13/4/17/6;
}
.LBDiv2 {grid-area: 14 / 2 / 17 / 4;
}
.LBDiv3 {grid-area: 11 / 2 / 14 / 4;
}
.LBDiv4 {grid-area: 9 / 4 / 13 / 6;
}
.LBDiv5 {grid-area: 8 / 2 / 11 / 4;
}
.LBDiv6 {grid-area: 5 / 4 / 9 / 6;
}
.LBDiv7 {grid-area: 1 / 2 / 8 / 3;
}
.LBDiv8 {grid-area: 1 / 3 / 8 / 4;
}
.LBDiv9 {grid-area: 1 / 4 / 5 / 6;
}
.LBDiv10 {grid-area: 1 / 1 / 14 / 2;margin-right: 0.5rem;
}.parent3 {display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(5, 1fr);grid-column-gap: 10px;grid-row-gap: 5px;
}.CBDiv1 {grid-area: 5 / 1 / 6 / 5;
}
.CBDiv2 {grid-area: 4 / 1 / 5 / 5;
}
.CBDiv3 {grid-area: 1 / 1 / 4 / 3;
}
.CBDiv4 {grid-area: 1 / 3 / 4 / 5;
}.parent4 {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(5, 1fr);grid-column-gap: 10px;grid-row-gap: 5px;
}.RBDiv1 {grid-area: 5 / 1 / 6 / 4;
}
.RBDiv2 {grid-area: 4 / 1 / 5 / 4;
}
.RBDiv3 {grid-area: 1 / 1 / 4 / 2;
}
.RBDiv4 {grid-area: 1 / 2 / 4 / 3;
}
.RBDiv5 {grid-area: 1 / 3 / 4 / 4;
}.parent5 {height: 91%;display: grid;grid-template-columns: repeat(6, 1fr) 0.9fr repeat(3, 1fr);grid-template-rows: repeat(5, 1fr);grid-column-gap: 0px;grid-row-gap: 0px;
}.box1 {grid-area: 3 / 7 / 6 / 8;
}.grid1L1 {grid-area: 7 / 1 / 8 / 2;
}
.grid1L2 {grid-area: 6 / 1 / 7 / 2;
}
.grid1L3 {grid-area: 5 / 1 / 6 / 2;
}.grid1C1 {grid-area: 7 / 1 / 8 / 2;
}
.grid1C2 {grid-area: 6 / 1 / 7 / 2;
}
.grid1C3 {grid-area: 5 / 1 / 6 / 2;
}
.grid1C4 {grid-area: 7 / 2 / 8 / 3;
}
.grid1C5 {grid-area: 6 / 2 / 7 / 3;
}
.grid1C6 {grid-area: 5 / 2 / 6 / 3;
}
.grid1C7 {grid-area: 4 / 2 / 5 / 3;
}
.grid1C8 {grid-area: 3 / 2 / 4 / 3;
}
.grid1C9 {grid-area: 2 / 2 / 3 / 3;
}
.grid1C10 {grid-area: 1 / 2 / 2 / 3;
}
/style
