如何实现这样的设计风格？

Question

我知道标题很模糊。不知道设计风格的名称，不知道如何更好地制定标题。

这个设计的名称是什么"style"，如何用css和html实现效果？

我尝试用 HTML 和 css 重新创建设计。这是代码

* {
  margin: 0;
  padding: 0;
  box-sizing: 0;
}

/*BG*/

main,
.container {
  height: 100vh;
  width: 100vw;
}

body {
  overflow: hidden;
}

#left-top,
#left-bottom,
#right {
  position: absolute;
  z-index: -10;
}

#left-top {
  left: 0;
  top: 0;
}

#left-bottom {
  left: 0;
  bottom: 0;
  transform: translate(-0.5vw);
}

#right {
  right: 0;
  top: 0;
  bottom: 0;
  transform: translate(10vw);
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  max-height: 100vh;
  max-width: 100vw;

  border: 1vh solid lime;
}

.logo {
  max-width: 50%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.logo img {
  width: 80vw;
  height: inherit;
}

.links {
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <main>
      <div class="container">
        <img id="left-top" src="https://picoolio.net/images/2020/06/10/Path-52825c75a57b036c8.png" alt="" />
        <img id="left-bottom" src="https://picoolio.net/images/2020/06/10/Path-486011727790f3e3d.png" alt="" />
        <img id="right" src="https://i.ibb.co/WPqF1dV/Component-4-1.png" alt="" />
        <div class="logo">
          <img src="https://picoolio.net/images/2020/06/10/Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" alt="Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" border="0" />
        </div>
        <div class="links">
          <ul>
            <li>
              <a href="">Kontakt</a>
            </li>
            <li>
              <a href="">Produkter</a>
            </li>
            <li>
              <a href="">om oss</a>
            </li>
          </ul>
        </div>
      </div>
    </main>
    <script src="main.js"></script>
  </body>
</html>

每当我缩放绝对位置背景片段时，都会像这样移动。

实现此设计的最佳方法是什么？样式的名称是什么？

Answer 1

* {
  margin: 0;
  padding: 0;
  box-sizing: 0;
}

/*BG*/

main,
.container {
  height: 100vh;
  width: 100vw;
}

body {
  overflow: hidden;
}

#left-top,
#left-bottom,
#right {
  position: absolute;
  z-index: -10;
}

#left-top {
  left: 0;
  top: 0;
  width: 20vw;
}

#left-bottom {
  left: 0;
  bottom: 0;
  height: 50vh;
}

#right {
  right: 0;
  top: 0;
  bottom: 0;
  height: 100vh;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  max-height: 100vh;
  max-width: 100vw;
}

.logo {
  max-width: 70vw;

  display: flex;
  justify-content: center;
  align-items: center;
}

.logo img {
  top: 45vh;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 100%;
  height: inherit;
  z-index: -10;
}

.links {
  margin: 51vh auto auto 7vw;
  width: 110vw;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 1vw;
  grid-row-gap: 1vw;
}

.link-text {
  width: 100%;
  text-align: center;
}

.link-text a {
  text-decoration: none;
  color: #777;
  font-size: 1.25vw;
  font-family: helvetica;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <main>
      <div class="container">
        <img id="left-top" src="https://picoolio.net/images/2020/06/10/Path-52825c75a57b036c8.png" alt="" />
        <img id="left-bottom" src="https://picoolio.net/images/2020/06/10/Path-486011727790f3e3d.png" alt="" />
        <img id="right" src="https://i.ibb.co/WPqF1dV/Component-4-1.png" alt="" />
        <div class="logo">
          <img src="https://picoolio.net/images/2020/06/10/Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" alt="Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" border="0" />
        </div>
        <div class="links">
          <div class="link-text"><a href="">Kontakt</a></div>
          <div class="link-text"><a href="">Produkter</a></div>
          <div class="link-text"><a href="">om oss</a></div>
        </div>
      </div>
    </main>
    <script src="main.js"></script>
  </body>
</html>

在上面的代码中，我更改了 <div> 标签中的图像尺寸和 links 以实现该设计...您可以按照我的想法直接复制并粘贴您的工作代码这就是您想在屏幕上看到的内容。

说明

1- 我首先为您的图像添加了 vw 和 vh 尺寸，使它们根据视口做出响应...

2- 其次，我为您的徽标图像指定了一个 z-index，并在指定绝对位置后借助 left 和 top 根据您的需要定位它。

3- 第三，我在 link 中使用了 css 网格布局，但这不是必需的，因为您也可以使用其他方法。 link for info on cs grids

4- 我用 css 设置了一些样式（主要是 link 部分），您可以在代码中完成...

以上只是简要概述。

如何实现这样的设计风格？

How to achieve a design style like this?

html

css

user-interface

user-experience

说明