企业官网建设流程全解析

哈尔滨网站建设公司oeminc,沈阳做平板网站,做视频网站要什么,做网站等保收费生活中的例子 01创建一个像 Pinterest 那样的复杂图片墙展示。生活中的例子 02设计一个标准的博客布局#xff08;包含页眉、侧边栏、文章区和页脚#xff09;。生活中的例子 03制作一个数据仪表盘#xff0c;将不同的图表和统计数据整齐排列。生活中的例子 04排版一个像杂志…生活中的例子 01创建一个像 Pinterest 那样的复杂图片墙展示。生活中的例子 02设计一个标准的博客布局包含页眉、侧边栏、文章区和页脚。生活中的例子 03制作一个数据仪表盘将不同的图表和统计数据整齐排列。生活中的例子 04排版一个像杂志一样的网页文字和图片错落有致。新手入门指南CSS Grid 布局网页排版的“上帝模式”嘿未来的前端大师今天我们要解锁一项让你在网页布局界“横着走”的技能 ——CSS Grid (网格布局)。如果你曾经因为想把一个盒子放在网页的右下角或者想让三个图片并排显示而抓耳挠腮甚至因为float(浮动) 搞得页面乱七八糟而想砸键盘……深呼吸。那些黑暗的日子结束了。Grid 就像是给你的网页开启了“上帝模式”。它不再是让你求着浏览器“请帮我把这个放在那儿”而是让你直接命令浏览器“给我在这里画个格子把那个东西扔进去”准备好了吗我们将用最通俗的大白话配合大量的代码带你彻底征服 Grid。---1. 钩子装修房子的艺术想象一下你买了一套大房子这就是你的网页。在 Grid 出现之前我们装修房子的方式很笨。比如你想把沙发放在客厅左边你得小心翼翼地推着沙发使用float或margin如果推过头了沙发可能会从窗户掉出去布局崩坏。而CSS Grid就像是你手里拿了一张蓝图和一支魔法笔。你站在空房子里用笔在地板上画线“这里画一条线那里画一条线。”“这一块区域叫‘客厅’那一块叫‘厨房’。”“这一块我要留给‘卫生间’。”画好格子之后你只需要打个响指沙发自动飞进‘客厅’格马桶自动飞进‘卫生间’格。而且如果你后来想把客厅变大点只需要改一下地上的线家具会自动调整位置。这就是 Grid 的核心思想先画格子定义容器再放东西放置子元素。---2. 什么是 CSS Grid用技术一点的话说CSS Grid 是一个二维布局系统。这里的关键词是“二维”。Flexbox (弹性盒子)是一维的。它像是一条贪吃蛇东西只能横着排成一行或者竖着排成一列。Grid (网格)是二维的。它像一个棋盘既有行又有列。你可以同时控制水平和垂直方向。---3. 为什么我需要它如果你想做一个简单的导航栏用 Flexbox 挺好。但如果你想做一个复杂的杂志风格排版或者一个仪表盘 (Dashboard)Grid 是唯一的王者。它解决了什么痛点对齐强迫症的福音再也不用为了让三个不同高度的盒子底部对齐而写一堆恶心的 hack 代码。顺序无关性在 HTML 里你的“广告”代码可能写在最下面但在屏幕上你可以用 Grid 把它瞬间变到右上角而不需要改动 HTML 结构。响应式神器手机端一列平板端两列电脑端三列用 Grid 只需要改一行代码。---4. 核心概念房东与租客学习 Grid你必须分清两个角色Grid Container (容器/房东)这是父元素。所有的“画格子”命令都是下达给它的。Grid Item (项目/租客)这是子元素。它们乖乖地待在房东画好的格子里。这是一个简单的图解----------------------- -- 房东 (Container) | Item 1 Item 2 | | Item 3 Item 4 | -- 租客 (Items) -----------------------要开启 Grid 模式你只需要对房东说一句咒语.container { display: grid; }这就行了还没。这只是告诉浏览器“我要开始画格子了”。如果不继续定义行列看起来跟普通div没啥区别。---5. 代码游乐场手把手教你写好了把你的咖啡放下我们要开始写代码了。我们会从最简单的开始一点点变复杂。第一关Hello Grid (定义列和行)假设我们有一个容器里面有 6 个盒子。HTML:div classcontainer div classbox1/div div classbox2/div div classbox3/div div classbox4/div div classbox5/div div classbox6/div /divCSS (基础美化):/* 给盒子加点颜色方便看清楚 */ .box { background-color: #3498db; color: white; padding: 20px; border: 1px solid #2980b9; font-size: 2rem; }CSS (Grid 魔法):现在我要让这 6 个盒子变成3列 2行的布局。.container { /* 1. 开启 Grid 模式 */ display: grid; /* 2. 定义列 (Columns) */ /* 我想要3列每列宽度都是 100px */ grid-template-columns: 100px 100px 100px; /* 3. 定义行 (Rows) */ /* 我想要2行每行高度是 50px */ grid-template-rows: 50px 50px; /* 4. 定义间距 (Gap) */ /* 就像瓷砖之间的缝隙这里是10px */ gap: 10px; }发生了什么浏览器看到了grid-template-columns: 100px 100px 100px它就在心里画了三条竖线。然后把盒子 1、2、3 放进第一行盒子 4、5、6 自动挤到第二行。---第二关认识 fr 单位 (最强单位)用px(像素) 写死宽度太土了。现在的屏幕有的宽有的窄。我们要介绍 Grid 专属的单位fr (Fraction分数/份)。fr的意思就是“把剩余空间分成几份我要占其中几份”。场景我想要 3 列。第一列和第三列窄一点中间那列宽一点占大头。.container { display: grid; /* 解释 1fr : 第一列占 1 份 2fr : 第二列占 2 份 1fr : 第三列占 1 份 总共是 121 4 份。 如果容器宽 1000px那么 第一列 250px 第二列 500px 第三列 250px */ grid-template-columns: 1fr 2fr 1fr; gap: 10px; } 导师提示尽量多用fr少用px或%因为fr会自动帮你计算减去gap之后的空间永远不会撑破布局---第三关让元素“跨越”格子 (像合并单元格)现在我们要玩点高级的。假设盒子1是个大标题我想让它横跨 3 列。盒子2是个侧边栏我想让它竖跨 2 行。这里有个概念叫网格线 (Grid Lines)。如果你有 3 列你有几条竖线答案是4条| 列1 | 列2 | 列3 |- 看到了吗从左到右分别是线1、线2、线3、线4。代码演示.container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3列 */ grid-template-rows: 100px 100px; /* 2行 */ gap: 10px; } /* 选中第一个盒子 */ .box1 { background-color: #e74c3c; /* 红色显眼点 */ /* 告诉它从第1条竖线开始到第4条竖线结束 */ grid-column-start: 1; grid-column-end: 4; /* 简写方式 (最常用)grid-column: 1 / 4; */ } /* 选中第二个盒子 */ .box2 { background-color: #f1c40f; /* 黄色 */ /* 告诉它跨越两行 */ /* 这次我们用 span 关键字意思就是“跨越” */ grid-row: span 2; /* 这行代码等同于 grid-row: 1 / 3; (假设它在第一行开始) */ }解释grid-column: 1 / 4并不是说它占了4列而是说它横跨了从线1到线4的空间也就是全部3列。span 2这种写法更直观意思就是“给我占两个坑位”。---