当前位置：首页 > wzjs >正文

自助建站软件下载企业网站ppt怎么做

wzjs 2025/9/11 17:44:47

自助建站软件下载,企业网站ppt怎么做,产品营销方案策划,盛泽做网站1.grid布局的含义 CSS Grid 布局是一种强大的二维布局系统，可以同时处理行和列，非常适合用于复杂的多行多列布局。它将网页划分为一个个网格单元，可以任意组合不同的网格，实现各种各样的布局。 2.grid布局中的基础概念总结结论&a…

1.grid布局的含义

CSS Grid 布局是一种强大的二维布局系统，可以同时处理行和列，非常适合用于复杂的多行多列布局。它将网页划分为一个个网格单元，可以任意组合不同的网格，实现各种各样的布局。

2.grid布局中的基础概念

总结结论：一个m行n列的网格，需要使用m+1条横向，n+1条纵向网格线组成

3.grid布局中的容器属性

通过设置 display: grid 或 display: inline-grid 使一个元素成为网格容器。

划分行列属性：

repeat函数，第一个参数是重复的次数，第二个参数为需要重复的数值

自动填充：auto-fill 应用在重复函数中，代表的是根据需要重复的数值，进行自动填充数量

auto自动：代表的是占剩余宽度和剩余高度的所有

调整间距：

现在行间距属性和列间距属性通过 row-gap 和 column-gap 设置

调整顺序：

调整网格对于单元格的对齐方式：

复合属性 place-items：center center；

第一个值为垂直方向，第二个值为水平方向

调整网格位于容器中的对齐方式：

复合属性：place-content：center center；

第一个值为垂直方向，第二个值为水平方向

space-around：行与行之间的间距是贴边行距容器间距的 2 倍

space-between：贴边

4.grid布局中的项目属性

代码实战

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 1700px;height: 500px;border: 10px solid #999999;margin: 100px auto;/* 触发网格 */display: grid;grid-template-rows: repeat(4,100px);grid-template-columns: repeat(13,100px);grid-gap: 10px;place-content: center center;}.box div {background-color: aquamarine;}.box1 { grid-row: 1/3;grid-column: 12/14;}.box2 { grid-row: 1/2;grid-column: 10/12;}.box3 { grid-row: 2/4;grid-column: 6/9;}.box4 { grid-row: 2/3;grid-column: 1/3;}.box5 { grid-row: 3/5;grid-column: 1/3;}.box6 { grid-row: 4/5;grid-column: 12/14;}</style>
</head>
<body><!-- 容器 --><div class="box"><!-- div{$}*52 --><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div><div class="box4">4</div><div class="box5">5</div><div class="box6">6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div><div>32</div><div>33</div><div>34</div><div>35</div><div>36</div><div>37</div><div>38</div><!-- <div>39</div><div>40</div><div>41</div><div>42</div><div>43</div><div>44</div><div>45</div><div>46</div><div>47</div><div>48</div><div>49</div><div>50</div><div>51</div><div>52</div> --></div>
</body>
</html>