css网页布局_儿童网页设计：CSS布局

css网页布局

欢迎来到我们的儿童网页设计系列CSS布局的第六课！

在这里，我们将所有元素准确地放置在屏幕上所需的位置。 为此，我们将同时添加HTML和CSS文件。

为了提醒自己， 请看一下我们正在建立的网站 。 您可以在这里下载本课程的文件，并且不要忘记在本页底部的“评论”部分中提出任何问题。

开始之前

在进入布局之前，我们需要了解一些事项。 在第一部分中，我们将研究如何保持井井有条。 我们将介绍一些定位基础知识，并讨论用于布局CSS 属性类型。

CSS订购

保持CSS文档井井有条非常重要。 适当的组织将使我们更容易找到文件中的所有片段，从而使以后更容易更改和添加内容。 一般来说，最好按照在页面上出现的顺序来排序我们CSS 声明 。

例如，我们将在本课程中将样式添加到main 。 在main内嵌套的任何其他元素之前，应在CSS文档中包括对此类main元素添加的样式。

盒子模型

HTML元素有点像矩形框。 CSS盒子模型描述了这些盒子的间距。

每个盒子有四个侧面。 我们可以通过padding ， border和/或margin将值一次应用于CSS的所有四个方面。 但是，如果我们要样式元素的一侧，我们也可以这样做。 例如：

padding-left: 20px;
border: 4px solid #205D76;

假设这个粉红色的方块代表文字。 我们可以看到仅在左侧添加了填充，并且粗蓝框覆盖了内容的所有四个侧面。

弹性盒

CSS为我们提供了一组属性，这些属性专门用于帮助我们调整网站的布局。 因此，虽然box模型有助于解释HTML元素之间的间距 ， flexbox允许我们将这些元素移动到位。

当我们在容器元素上使用flexbox时，此元素将成为flex容器，并且其中的所有元素都将成为flex项目 。

当我们将flexbox应用于容器时，它将自动沿直线（水平）排列项目，然后我们可以使用其他flexbox属性获得更多细节。

我们不需要在网站上使用过多的flexbox，但是考虑一下flexbox是很重要的，因为它被认为是在网站上放置少量内容的最现代，最适当的方法。

标头

header中的h1和城镇图像位于页面中心。 有几种不同的方法可以使CSS居中，但是现在我们将使用text-align: center; 在header 。

我们将使用之前添加的类名称来指向标题：

.primary-header {
    text-align: center;
}

别忘了！ 保存文档并刷新浏览器，以查看所做的更改！

栏目

我们要对各节进行的第一件事是使每个节中的内容，图像和列表彼此相邻而不是堆叠在一起。

为此，我们将使用flexbox 。 通过使用display: flex;将flexbox应用于容器元素内的项目display: flex; 在容器上：

.store-section {
    display: flex;
    display: -webkit-flex; /* This is a vendor prefix! */
}

为了使之回到我们之前讨论的内容，包含商店清单的图像和div现在是弹性商品 ，因为它们位于该弹性容器中 。

尽管有很多选项可以指定元素的确切位置，但是flexbox的默认行为对我们来说非常合适-并且我们商店的列表现在位于商店图像的右侧。

关于“供应商前缀”的注释

由于Flexbox相当新，因此并非所有浏览器都有机会正确包含它。 要解决此问题，我们可以在flexbox属性中包含供应商前缀 ，暂时添加这种缺少的支持。 即使我们只专注于该项目的最新版本的现代浏览器，我们仍然需要为flexbox包括-webkit-供应商前缀，以确保其在“ Safari”中正常工作。

图片和清单

我们可以在图像和包含所有文本的元素之间使用一些间距，因此在我们HTML中，我们向包含文本的div添加一类store-details 。

保存后，我们可以跳到CSS并添加此间距，但只能在div的左侧 ：

.store-details { 
    margin-left: 30px;
}

默认列表间距

我们的商店无序列表的左侧有一些间距。 这是因为使用HTML列表会附带一些默认样式 。 有时，这种默认样式还可以，而有时它可能不会产生我们想要的效果。

我们可以通过使用padding: 0;来摆脱默认列表间距padding: 0; 在无序列表上，但是与列表的标题相比，这会使我们的项目符号向左移动太远。

我们在这里需要一些padding ，但是不如列表的默认样式所提供的那么多。 在列表上设置15px padding-left将使我们的项目符号点与标题很好地对齐，因此，除了在上一课中添加到列表中的内容之外，我们还将添加其他内容：

.store-list {
    padding-left: 15px; /* newly added styling */
    color: #FFC122;
}

列表项之间的间隔

我们仍然遇到上一课中提到的问题，因为列表项太靠近了。 为了解决这个问题，让我们在HTML的所有列表项<li>中添加一个store-name类。 然后，我们将在这些项目的底部添加少量边距。

.store-name {
    margin-bottom: 10px; 
}

边距和居中

需要将间距添加到各节中，并使它们在页面上居中。 我们将通过margin和width属性来做到这一点。

同样，我们将添加已经编写的样式：

.store-section {
    display: flex; 
    display: -webkit-flex; 
    margin: 50px auto; 
    width: 450px; 
}

margin内的50px值将在每个商店区域的顶部应用该空间量。 在此之后使用auto告诉浏览器考虑元素的宽度（我们将其设置为450px ）并将其自动居中在浏览器窗口中。

页脚

对于我们的footer我们将文本居中并添加少量padding以确保该文本不太靠近页脚的边缘。

.primary-footer {
    padding: 2px;
    text-align: center;
    background-color: #FFC122;
}

身体保证金

在将列表放到位时，我们讨论了一些默认样式 。 body元素具有其自己的默认样式，其中一种是围绕整个页面的margin 。 尽管有时候这不是问题，但我们可以看到它阻止了footer的background-color完全伸展到浏览器窗口的两侧。

此处的解决方案是跳回到CSS文档的正文并添加以下内容：

body {
    margin: 0;
}

结论

在本课程中，我们使用CSS布局技术将所有元素都放置到位。 尽管通常有几种不同的方法可以实现特定的布局，但是对CSS box模型和flexbox的使用更加熟悉，可以对这些不同的方法有一个非常扎实的理解。

由于我们的网站已经完成（祝贺您！），因此在接下来的课程中，我们将讨论设计 ， 版式和颜色 。 这将帮助您成为一个全面的，知识渊博的网页设计师。

镇上见！

翻译自: https://webdesign.tutsplus.com/tutorials/web-design-for-kids-css-layout--cms-24126

css网页布局