静态页面css_如何使用CSS和JavaScript构建静态投资组合页面

最新推荐文章于 2023-02-20 14:53:33 发布

翻译最新推荐文章于 2023-02-20 14:53:33 发布 · 281 阅读

文章标签：

#css #html #java #js #javascript #ViewUI

本教程介绍如何仅使用CSS构建一个响应式HTML产品页面，包括一个无需外部JavaScript库、SVG或canvas元素的柱状图。通过学习，你将掌握使用Flexbox创建吸引人的静态页面技巧。

静态页面css

在本教程中，我们将使用flexbox的所有功能，并学习构建一个简单而吸引人的静态HTML产品页面。我们还将创建一个无需使用任何外部JavaScript库，SVG或canvas元素的响应式柱形图。仅使用普通CSS！

这是我们要创建的项目（单击右上角的“ 技能”链接）：

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%);
}

到目前为止的进展

这是到目前为止我们已经建立的！

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容器，其中两个列表作为flex项目。
第二个列表衡量特定技能的知识，它本身就是一个伸缩容器。我们给它flex-grow: 1增长并占用所有可用空间。

我们图表的初始CSS规则：

.chart-wrapper {
  width: calc(100% - 40px);
  max-width: 500px;
}

.chart-levels li {
  padding: 15px;
}

此时，我们将仔细查看第二个列表中的项目。

要记住的事情：

它们的宽度均为12％。我们通过提供justify-content: space-around父列表的justify-content: space-around将它们均匀地分布在主轴上。
它们应该位于容器的底部，因此我们将align-items: flex-end设置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-step CSS变量以及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属性中提取的，该属性被分配给第二个列表的项目。

以下是完成此工作的样式：

.chart-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.响应Swift

我们快完成了！最后，让我们确保页面在所有屏幕上都具有稳定的外观。我们将专门针对窄屏应用两个规则：

@media screen and (max-width: 600px) {
  html {
    font-size: 12px;
  }
  
  .chart-levels li {
    padding: 15px 10px 15px 0;
  }
}

这里的一个重要说明是，在我们的样式中，我们使用rem来设置字体大小。这种方法非常有用，因为字体大小不是绝对的，并且它们的值取决于根元素的值。因此，如果像上面的代码一样减小根元素的字体大小，则与rem相关的字体大小将动态减小。干得好！

我们项目的最终状态：

7.浏览器支持

该演示可以在所有最新的浏览器和设备上正常运行。

如前所述，Microsoft Edge仍不支持calc()函数中具有自定义属性的数学运算。要解决此问题，您将需要使用硬编码值。

结论

在本教程中，我们通过构建一个有吸引力的静态投资组合页面提高了Flexbox技能。我们甚至通过学习创建响应式柱形图而不使用任何外部JavaScript库，SVG或canvas元素来挑战自己。仅使用普通CSS！

希望您喜欢本教程，就像我喜欢编写本教程一样，并且您将以该演示为灵感来开发自己的投资组合网站。我希望看到您的工作，请务必与我们分享！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-a-portfolio-page-with-css-javascript--cms-32933

静态页面css