江苏龙网

  1. 主页 > 生活百科 > >

使用网络构建复杂布局超实用的技巧，赶紧收藏吧

网络技巧

我们直接进入代码，如下所示，先写些标签，源码在这个链接里面：https://codepen.io/Shadid/pen/zYqNvgv
<div class="container">  <header>Header</header>  <aside>Aside 1</aside>  <section>Section</section>  <aside>Aside 2</aside>  <footer>Footer</footer></div>在上面，我们创建了一个header、两个aside和一个footer元素，并将它们包装在一个container 元素中 。我们为容器元素中的所有元素添加背景色和字体大小 。
.container > * {  background: aquamarine;  font-size: 30px;}运行的网页如下：

使用网络构建复杂布局超实用的技巧，赶紧收藏吧

文章插图
 
现在我们添加一些网格属性：
.container {  display: grid;  grid-gap: 5px;  grid-template-areas:     "header"    "aside-1"    "aside-2"    "section"    "footer"}/* Assign grid areas to elements */header {  grid-area: header;}aside:nth-of-type(1) {  grid-area: aside-1;}aside:nth-of-type(2) {  grid-area: aside-2;}section {  grid-area: section;}footer {  grid-area: footer;}首先，我们定义了display:grid，它将启用网格布局，然后我们使用grid-gap在网格元素中增加间隙 。
接下来，我们为每个html元素分配了一个网格区域名称 。在container 类中，我们可以使用grid-template-areas`属性定 义html 模板的外观，注意网格模板区域是如何排列的 。
grid-template-areas:     "header"    "aside-1"    "aside-2"    "section"    "footer" 元素的顺序与 dom 结构不同 。但是，最终按我们网络区域的顺序来展示 。
使用网络构建复杂布局超实用的技巧，赶紧收藏吧

文章插图
 
下一步是使我们的页面具有响应性 。我们希望在更大的屏幕上使用不同的布局 。css网格使得处理媒体查询和创建响应式布局变得非常容易 。看下面代码：
@media (min-width: 670px) {  .container {    grid-template-areas:       "header  header  header"      "aside-1 section  aside-2"      "footer    footer    footer"  }}我们所要做的就是在媒体查询中重新排序网格模板区域 。
使用网络构建复杂布局超实用的技巧，赶紧收藏吧

文章插图
 
网格列和行如何使用 CSS 网格来组织列和？先从下面的代码开始：
<div class="container">  <div class="item">One</div>  <div class="item">Two</div>  <div class="item">Three</div>  <div class="item">Four</div>  <div class="item">Five</div>  <div class="item">Six</div></div>添加一些基本的 css
.container {  display: grid;  height: 100vh;  grid-gap: 10px;}.item {  background: lightcoral;}我们为上面的 dom 结构使用了网格布局，并使用grid-gap增加了风格之间的间距 。现在，我们使用grid-template-columns属性来添加一些列 。
.container {    display: grid;    height: 100vh;    grid-gap: 10px;    grid-template-columns: 100px 200px auto auto;}就像这样，我们使用了列 。我们指定第一列为100px，第二列为200px 。由于我们在第3列和第4列中应用了auto，因此剩余的屏幕长度将在其中分成两半 。
使用网络构建复杂布局超实用的技巧，赶紧收藏吧

文章插图
 
可以看到现在页面中有一个空白 。如果我想将第六列移至第三列和第四列怎么办？为此，我们可以使用grid-column-start和grid-column-end属性 。
.item:nth-of-type(6) {  grid-column-start: 3;  grid-column-end: 5;}


推荐阅读


上一篇：Elasticsearch全攻略

下一篇：Win10这隐藏功能太良心！远程解决电脑问题神器