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网页布局