在本教程中,我们将使用 flexbox 的所有功能并学习构建一个简单但有吸引力的静态 html 作品集页面。我们还将在不使用任何外部 javascript 库、svg 或 canvas 元素的情况下创建响应式柱形图。只需使用纯 css!
这是我们要创建的项目(单击右上角的技能链接):
See the Pen Practicing Flexbox: How to Build a Portfolio Page With CSS & JavaScript by Envato Tuts+ (@tutsplus) on CodePen.
1. 从页面标记开始
页面标记非常简单;标题、标题、mailto链接和部分:
<body class="position-fixed d-flex flex-column text-white bg-red">
<header class="page-header">
<nav class="d-flex justify-content-between">
<a href="" class="logo">...</a>
<ul class="d-flex">
<li>
<a href="">...</a>
</li>
<!-- possibly more list items here -->
</ul>
</nav>
</header>
<h1 class="position-absolute w-100 text-center heading">...</h1>
<a class="position-absolute contact" href="">...</a>
<section class="position-absolute d-flex align-items-center justify-content-center text-black bg-white skills-section" data-slideIn="to-top">
<!-- content here -->
</section>
</body>
在该部分中,我们放置了一个关闭按钮和一个带有两个列表的包装元素。这些列表负责构建柱形图:
<section class="position-absolute d-flex align-items-center justify-content-center text-black bg-white skills-section" data-slideIn="to-top">
<button class="position-absolute skills-close" aria-label="Close Skills Section">✕</button>
<div class="d-flex chart-wrapper">
<ul class="chart-levels">
<li>Expert</li>
<li>Advanced</li>
<li>Intermediate</li>
<li>Beginner</li>
<li>Novice</li>
</ul>
<ul class="d-flex justify-content-around align-items-end flex-grow-1 text-center bg-black chart-skills">
<li class="position-relative bg-red" data-height="80%">
<span class="position-absolute w-100">CSS</span>
</li>
<li class="position-relative bg-red" data-height="60%">
<span class="position-absolute w-100">HTML</span>
</li>
<li class="position-relative bg-red" data-height="68%">
<span class="position-absolute w-100">JavaScript</span>
</li>
<li class="position-relative bg-red" data-height="52%">
<span class="position-absolute w-100">python</span>
</li>
<li class="position-relative bg-red" data-height="42%">
<span class="position-absolute w-100">Ruby</span>
</li>
</ul>
</div>
</section>
注意:除了元素的特定类之外,我们的标记还包含许多实用程序(帮助程序)类。我们将使用这种方法来保持我们的 CSS 尽可能 DRY 。然而,出于可读性的原因,在 CSS 中我们不会对常见的 CSS 规则进行分组。
2. 定义一些基本样式
根据我们上面刚刚讨论的内容,我们现在指定一些重置规则以及一些帮助类:
:root {
--black: #1a1a1a;
--white: #fff;
--red: #e21838;
--transition-delay: 0.85s;
--transition-delay-step: 0.3s;
}
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
button {
background: none;
border: none;
cursor: pointer;
outline: none;
}
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.justify-content-center {
justify-content: center;
}
.justify-content-between {
justify-content: space-between;
}
.justify-content-around {
justify-content: space-around;
}
.align-items-center {
align-items: center;
}
.align-items-end {
align-items: flex-end;
}
.flex-grow-1 {
flex-grow: 1;
}
.w-100 {
width: 100%;
}
.position-relative {
position: relative;
}
.position-fixed {
position: fixed;
}
.position-absolute {
position: absolute;
}
.text-center {
text-align: center;
}
.text-black {
color: var(--black);
}
.text-white {
color: var(--white);
}
.bg-black {
background: var(--black);
}
.bg-white {
background: var(--white);
}
.bg-red {
background: var(--red);
}
我们的帮助类的命名约定受到 Bootstrap 4 的类名的启发。
3. 设计页面布局
页面布局将像这样简单:
以下是设计要求:
页面应该是全屏的。
徽标位于页面的左上角,菜单位于右上角,mailto链接位于右下角。
标题水平和垂直居中。
包含图表的部分最初是隐藏的(屏幕外)。
以下是完成所有操作的相应样式:
body {
top: 0;
right: 0;
bottom: 0;
left: 0;
font: 1rem/1.5 "Montserrat", sans-serif;
overflow: hidden;
}
.page-header {
padding: 20px;
border-bottom: 1px solid #e93451;
}
.page-header li:not(:last-child) {
margin-right: 20px;
}
.page-header .logo {
font-size: 1.2rem;
z-index: 1;
transition: color 0.3s;
}
.window-opened .page-header .logo {
color: var(--black);
transition-delay: 0.8s;
}
.heading {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5rem;
}
.contact {
bottom: 20px;
right: 20px;
}
.skills-section {
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(100%);
}
迄今为止的进展
这是我们到目前为止所构建的!
See the Pen Practicing Flexbox: How to Build a Portfolio Page With CSS & JavaScript (step 1) by Envato Tuts+ (@tutsplus) on CodePen.
4. 切换部分
最初,如上所述,该部分是隐藏的。每次我们单击菜单链接时,它都会以漂亮的滑入效果变得可见。我们将通过将window-opened类添加到body元素并根据需要更改 CSS 来做到这一点。同样,当我们单击关闭按钮时,该部分将消失。
作为奖励,我们将赋予自己设置滑入动画方向的能力。我们可以将 data-slideIn自定义属性传递给将确定其动画起始位置的部分。可能的属性值为to-top、to-bottom和 to-right。默认情况下,该部分从右到左显示。
以下是相关的样式:
.skills-section {
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(100%);
transition: transform 1s;
}
.window-opened .skills-section {
transform: none;
}
[data-slideIn="to-top"] {
transform: translateY(100%);
}
[data-slideIn="to-bottom"] {
transform: translateY(-100%);
}
[data-slideIn="to-right"] {
transform: translateX(-100%);
}
以及切换其状态所需的 javaScript 代码:
const skillsLink = document.queryselector(".page-header li:nth-child(1) a");
const skillsClose = document.querySelector(".skills-close");
const windowOpened = "window-opened";
skillsLink.addeventListener("click", (e) => {
e.preventDefault();
document.body.classList.toggle(windowOpened);
});
skillsClose.addEventListener("click", () => {
document.body.classList.toggle(windowOpened);
});
5. 设置图表样式
在这一点上,我们将仔细查看我们部分的内容。首先,关闭按钮位于该部分的右上角。
这是它的标记:
<button class="position-absolute skills-close" aria-label="Close Skills Section">✕</button>
及其风格:
.skills-close {
top: 20px;
right: 20px;
font-size: 2rem;
}
接下来我们有图表本身。让我们再回顾一下它的结构:
<div class="d-flex chart-wrapper">
<ul class="chart-levels">
<li>Expert</li>
...
</ul>
<ul class="d-flex justify-content-around align-items-end flex-grow-1 text-center bg-black chart-skills">
<li class="position-relative bg-red" data-height="80%">
<span class="position-absolute w-100">CSS</span>
</li>
...
</ul>
</div>
以下是有关此标记的要点:
我们将.chart-wrapper元素设置为具有两个列表作为弹性项目的弹性容器。
第二个列表,衡量某项技能的知识,它本身就是一个弹性容器。我们让它flex-grow: 1成长并占用所有可用空间。
我们图表的初始 CSS 规则:
.chart-wrapper {
width: calc(100% - 40px);
max-width: 500px;
}
.chart-levels li {
padding: 15px;
}
在这一点上,我们将仔细查看第二个列表的项目。
要记住的事情:
它们的宽度均为 12%。justify-content: space-around我们通过提供给父列表将它们均匀地分布在主轴上。
它们应该位于容器的底部,因此我们设置align-items: flex-end为父列表。
它们的初始高度为 0。一旦该部分变得可见,它们的高度就会被动画化并接收一个等于其data-height属性值的值。请记住,我们必须在 CSS 中重写所需的高度值,因为设置height: attr(data-height)不起作用:(
以下是相关样式:
:root {
...
--transition-delay: 0.85s;
--transition-delay-step: 0.3s;
}
.chart-skills li {
width: 12%;
height: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
transition: height 0.65s cubic-bezier(0.51, 0.91, 0.24, 1.16);
}
.window-opened .chart-skills li:nth-child(1) {
height: 80%;
transition-delay: var(--transition-delay);
}
.window-opened .chart-skills li:nth-child(2) {
height: 60%;
transition-delay: calc(
var(--transition-delay) + var(--transition-delay-step)
);
}
.window-opened .chart-skills li:nth-child(3) {
height: 68%;
transition-delay: calc(
var(--transition-delay) + var(--transition-delay-step) * 2
);
}
.window-opened .chart-skills li:nth-child(4) {
height: 52%;
transition-delay: calc(
var(--transition-delay) + var(--transition-delay-step) * 3
);
}
.window-opened .chart-skills li:nth-child(5) {
height: 42%;
transition-delay: calc(
var(--transition-delay) + var(--transition-delay-step) * 4
);
}
从上面的代码可以看出,我们使用transition-delay和transition-delay-stepCSS 变量以及calc() CSS 函数来控制过渡效果的速度。Microsoft Edge 不支持这些数学运算,因此如果您需要支持它,只需传递一些静态值,如下所示:
.window-opened .chart-skills li:nth-child(2) {
transition-delay: 1.15s;
}
.window-opened .chart-skills li:nth-child(3) {
transition-delay: 1.45s;
}
为了输出特定技术的知识量,我们将使用::before 伪元素。
该值是从data-height分配给第二个列表的项目的属性中提取的。
以下是完成这项工作的样式:
.c
hart-skills li::before {content: attr(data-height);
position: absolute;
top: 10px;
left: 0;
width: 100%;
font-size: 0.85rem;
color: var(--white);
}
span最后,我们为位于每个列表项内的元素添加一些样式。此元素充当标签并存储技术名称。
对应的样式:
.chart-skills span {
bottom: 0;
left: 0;
transform: translateY(40px) rotate(45deg);
}
6.响应迅速
我们快完成了!最后,让我们确保页面在所有屏幕上都具有稳定的外观。我们将专门针对窄屏幕应用两条规则:
@media screen and (max-width: 600px) {
html {
font-size: 12px;
}
.chart-levels li {
padding: 15px 10px 15px 0;
}
}
这里的一个重要注意事项是,在我们的样式中,我们用于rem设置字体大小。这种方法非常有用,因为字体大小不是绝对的,它们的值取决于根元素的值。因此,如果我们像上面的代码那样减小根元素的字体大小,与 rem 相关的字体大小将动态减小。干得好伙计们!
我们项目的最终状态:
See the Pen Practicing Flexbox: How to Build a Portfolio Page With CSS & JavaScript by Envato Tuts+ (@tutsplus) on CodePen.
7.浏览器支持
该演示适用于所有最新的浏览器和设备。
如前所述,Microsoft Edge 仍然不支持在calc()函数内使用自定义属性的数学运算。要解决此问题,您需要改用硬编码值。
结论
在本教程中,我们通过构建一个有吸引力的静态投资组合页面来提高我们的 flexbox 技能。canvas我们甚至通过学习在不使用任何外部 JavaScript 库、SVG 或元素的情况下创建响应式柱形图来挑战自己 。只需使用纯 CSS!
希望您喜欢本教程,就像我喜欢编写它一样,并且您将使用此演示作为开发您自己的投资组合网站的灵感。我很想看看你的作品——一定要和我们分享!
- 迄今为止的进展