如何使用CSS构建复杂的布局

IT资讯 2018-08-03 57 次浏览 0 条评论

利用CSS Grid Layout的强大功能创建引人注目的杂志式页面设计。

构建复杂的CSS布局
网络的布局一直受到限制,从来没有真正致力于使内容易于以有意义的格式显示。

回到90年代,当网络首次出现时,习惯于在网格上布局内容的设计师发现,在浏览器中获得相同结果的唯一方法就是使用该表。合并细胞导致复杂的网站布局,但这对可访问性和SEO造成了严重破坏。快进,今天有各种各样的方式来放置内容与浮动,灵活的盒子等。

CSS3确实推动了Web的功能,自2014年以来一直有CSS Grid Layout。目前有75%的浏览器支持,因此它已经到了需要认真考虑的时候了。 Zurb的Foundation 6框架已经开始使用它来为其网格供电。

本教程将重点介绍如何创建一个杂志式功能,向您展示如何为中小屏幕尺寸完善响应式网页设计。

01.开始吧

从项目文件的开始文件夹中打开文件'grid1.html'。这个HTML布局有五个div标签,简称为item1-5作为CSS类。这些将是放入网格的内容。包装它的容器将定义网格,该网格将有四列。

<div class =“container”>
<div class =“item1”>第1项</ div>
<div class =“item2”>第2项</ div>
<div class =“item3”>第3项</ div>
<div class =“item4”>第4项</ div>
<div class =“item5”>第5项</ div>
</ DIV>
02.检查网格的CSS

查看head部分,您可以看到'容器'已被告知要布局为网格,行的自动高度,而列将设置为4,每个设置为浏览器的25% 。在浏览器中进行检查,您将看到每个项目都自动分配给下一个可用的网格位置。

。容器 {
显示:网格;
grid-template-rows:auto;
grid-template-columns:repeat(4,25%); }
03.定义网格位置

现在来看看'grid2.html'文件。它与第一个文件相同,除了'item1'和'item2'给出了特定的位置。第一个位于第1行,在第2行结束。列从1开始,到3结束,因此它跨越两列。第二个从第3列开始,接下来的两列。其余项目填充下一个可用的网格插槽。

.item1 {
grid-row-start:1;
grid-row-end:2;
grid-column-start:1;
grid-column-end:3;
}
.item2 {
grid-row-start:1;
grid-row-end:2;
grid-column-start:3;
grid-column-end:5;
}
04.使用网格模板

打开'grid3.html'并查看HTML的正文。你会看到有一个带有标题,侧边栏,主要内容部分和页脚的布局。您可以在内容中添加更多文本,以查看放入内容时会发生什么。网格将使用模板功能将这些部分转换为布局。

<div class =“container”>
<div class =“header”>标题</ div>
<div class =“sidebar”>补充工具栏</ div>
<div class =“content”>内容</ div>
<div class =“footer”>页脚</ div>
</ DIV>
05.定义模板

查看容器的CSS。它再次被定义为网格。顶行将为200px高,中间将自动调整大小,最后一行将为100px高。柱子设置为33%宽,并自动填充其余部分。模板表明标题将填充两列。下一行将是第一列中的侧栏和下一行中的内容。页脚遍历两者。

。容器 {
显示:网格;
grid-template-rows:200px auto 100px;
grid-template-columns:33%auto;
网格模板方面:
“标题标题”
“侧边栏内容”
“页脚”; }
构建复杂的CSS布局

使用网格模板区域创建一个简单的网页布局,以定义页眉和页脚跨越两列,而侧边栏和网页内容各占一列06.将模板链接到班级

要将类链接到模板,此处显示的代码定义了这一点。命名每个网格区域并创建链接。此处未显示内容,但它位于“grid3.html”文档中。在浏览器中查看此内容以查看网格的布局。由于定义了两列,因此模板在每个引号中都需要两个区域。

.header {
网格区域:标题;
}
.sidebar {
网格区域:侧边栏;
}
.footer {
网格区域:页脚; }
07.使其具有响应性

为了使'grid3.html'响应,插入媒体查询并将顶行保持在200%,而其余行将自动调整大小。只有一列,即全宽,因此模板在每个反转的逗号中都有一个单词来定义布局。这些可以轻松地重新排序,而无需移动任何HTML。

@media screen和(max-width:699px){
。容器 {
显示:网格;
grid-template-rows:200px auto;
grid-template-columns:100%;
grid-template-areas:“header”“sidebar”“content”“footer”;
}
}
构建复杂的CSS布局

通过简单地在媒体查询中重新定义网格布局,所有元素都可以通过一些调整进行重排

08.在真正的布局上工作

现在打开'index.html' - 已经创建了内容的所有HTML,以及设计元素的一些CSS。将此网格添加到head部分中的样式标记。这样做会创建一个三列网格,其中包含每个部分的模板。请注意空网格部分的完整停止。

.container1 {
宽度:80%;
保证金:0自动;
显示:网格;
grid-template-rows:auto;
grid-template-columns:33.3%33.3%auto;
grid-template-areas:“header header header”“。standfirst standfirst”“。article1”“focus pullquote pullquote”“article2 article2。”;
}
09.链接模板

与上一步一样,这会将标题与模板链接起来。标题被告知跨越网格的所有三列,然后standfirst设置为两列并且左侧有一个空列。如果您检查浏览器,该列将被填充,因为剩余的内容会自动填充下一个可用空间 - 但是当它全部设置时,它将不会执行此操作。

.header {
网格区域:标题;
}
.standfirst {
网格区域:第一;
}
10.添加下一个区域

现在,第一篇文章,拉引号和焦点图像被放入设计中。拉引号和图像并排放在同一行上。在这个阶段,第2条尚未放置,因此它占据了第一个可靠的网格。

。第1条 {
grid-area:article1;
}
.pullquote {
网格区域:pullquote;
}
.focus {
网格区域:焦点;
text-align:center; }
构建复杂的CSS布局

当第一个网格完成时,设计恰好适合桌面显示器,甚至可以很好地适应背景图像元素

11.完成第一个网格

添加第二篇文章的CSS可以正确放置所有第一个网格。在浏览器中查看此内容将显示布局与背景图像一起使用并创建在杂志中看到的布局类型,其中设计师围绕大背景图像进行工作。

.article2 {
网格区域:第2条;
柱间隙:65px;
列数:2;
}
12.添加白色背景

在开始第二个网格之前,您可能想知道为什么需要两个网格。原因是这个网格将具有白色全宽背景,因此这个CSS将包裹第二个网格。这是为了让本节感受到设计中的第二页。

.whitebg {
填充:100px 0;
background-color:#ddd;
}
13.制作第二个网格

第二个网格比第一个网格简单。有三列,行上有自动高度。内容将分别填充一列,因此无需定义模板区域。但是,添加平板电脑设计时,需要切换到两列,因此需要重排并且名称很重要。

.container2 {
宽度:80%;
保证金:0自动;
显示:网格;
grid-template-rows:auto;
grid-template-columns:33.3%33.3%auto;
grid-template-areas:“img1 img2 article3”;
}
构建复杂的CSS布局

将两个网格放置在屏幕上,可以滚动设计,因为一切都在正确的顺序

14.添加列

第二个网格中的每个CSS类都被告知与网格模板中定义的相关列链接。更改文章文本颜色只是为了使其在本节较浅的背景下脱颖而出。只有页脚完成,杂志式布局的设计几乎到位。

.img1 {
网格区域:img1;
}
.img2 {
网格区域:img2;
}
.article3 {
网格区域:第3条;
颜色:#333;
}15.完善页面的底部

完成页面将在屏幕上放置一个全宽度的div,它将填充黑色,文本只是居中。这样就完成了设计的桌面版本,但将屏幕向下移动到1200px宽以下并且网站开始中断。

.footer {
背景色:#000;
颜色:#999;
text-align:center;
填充:50px 20px 100px;
}
16.调整中等屏幕设计

 

此处插入媒体查询以在浏览器宽度小于1200像素时设计设计。步骤17和18的代码将放在注释所在的括号内。这将是更改两个网格布局结构的情况。

@media screen和(max-width:1200px){
/ *代码在这里* /
}
17.回流第一个网格

第一个网格设置为现在只用两列而不是三列填充浏览器的整个宽度。这些部分的顺序被放置在模板中,文章切换侧面,因为这与该屏幕尺寸的背景图像更好地匹配。

.container1 {
宽度:100%;
grid-template-rows:auto;
grid-template-columns:50%50%;
grid-template-areas:“header header”“standfirst standfirst”“article1。” “pullquote pullquote”“article2焦点”;
}
.article2 {
列数:1;
}
构建复杂的CSS布局

只需对页面上的两个网格进行回流,就可以实现平板电脑尺寸的设计。调整这些网格是重新设计较小屏幕的最简单方法之一

18.测试你的布局

第二个网格也调整大小以占用浏览器的整个宽度并添加两列。图像并排放置在文本上方的行上,以便它可以整齐地放在显示屏上。您可以通过将浏览器的大小调整为1200px宽度来在浏览器中测试此布局。

.container2 {
宽度:100%;
保证金:0自动;
grid-template-rows:auto;
grid-template-columns:50%50%;
grid-template-areas:“img1 img2”“article3 article3”;
}
19.手机调整设计

任何宽度小于769px的浏览器都将获得在最后步骤中添加的代码。我们需要做的就是确保每个网格都有一个列布局,以便在较小的空间内正确查看内容。

@media screen和(max-width:768px){
/ *最终步骤代码在这里* /
}
20.检查单列网格

现在,第一个网格设置为浏览器宽度的100%的单个列,并且部分的顺序将添加到模板区域中。检查页面的第一部分如何在移动屏幕上工作。

.container1 {
宽度:100%;
grid-template-rows:auto;
grid-template-columns:100%;
grid-template-areas:“header”“standfirst”“article1”“pullquote”“focus”“article2”;
}
构建复杂的CSS布局

只是告诉网格有一列几乎所有需要更改的移动屏幕

21.完成布局

这里,第二个网格也用于填充单个列,并定义了部分的布局。现在保存完成的设计并在不同大小的屏幕上查看它以查看CSS网格的完整布局功能以及为不同宽度重新排序内容是多么容易。

.container2 {
宽度:100%;
保证金:0自动;
grid-template-rows:auto;
grid-template-columns:100%;
grid-template-areas:“img1”“img2”“article3”;
}

0
小包子

【 飞龙网.com:小包子】为你推荐!我的文章如同我的名字,香甜可口,咸淡适宜,油而不腻,阅后令你回味无穷尽哦~

发表评论