如何移动网页上的元素？

Question

我创建了一个网页，它有一个菜单导航元素，我正在努力正确放置元素。所以我有 4 个不同颜色的方块，它们需要放在底部以类似于艺术品。我创建了页面和元素，但由于某种原因，方块卡在顶部，如果我尝试使用边距来移动它们，它们并没有真正移动。

网页现在的样子-

参考图-

这是我的 html:

<!doctype html>
<html lang="en">
  <head>
    <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Homepage</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
  <link rel="stylesheet" href="/style.css">
</head>

  <body>

    <div class="block block-1">
        <h1>Joseph Albers</h1>
 </div>
<div class="boxes">
    <a href=bio.html class="block block-2">
      <h2>Biography</h2>
    </a>

    <a href="artworks.html" class="block block-3">
      <h2>Artworks</h2>
  </a>

    <div  class="block block-4">
      <h4>German-born artist and educator. The first living artist to be given a solo show at MoMA and at the Metropolitan Museum of Art in New York</h4>
  </div>

</div>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
        
        
  </body>
</html>

我的CSS：

.block{
    padding: 2vw;
    position: absolute;
    display:flex;
    bottom: 5vw;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%, 0%);
    
  }
  .block-1{
    background: red;
    position: relative;
    transform: none;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vw;
    transition: background-color 0.3s ease-in-out;
    
  }
  .block-2{
    background: orange;
    width: 80vw;
    height: 80vw;
    transition: background-color 0.3s ease-in-out;
  
  }
  .block-3{
    background: yellow;
    width: 50vw;
    height: 50vw;
    transition: background-color 0.3s ease-in-out;
  }
  .block-4{
    background: green;
    width: 30vw;
    height: 30vw;
    padding-bottom: 20px;
    margin-bottom: 20px;
    transition: background-color 0.3s ease-in-out;

  }

  .boxes {

    margin-top: 350px;
    margin-left: 70vw;
  }
  .block:hover{
    background-color: rgba(255,255,255,0.5);
  }

一开始积木都是亲戚，放的还行。但是，它在悬停时产生了交互问题，因为它不会变回颜色。所以，我把它们做成独立的组件，但在我这样做之后，它们都卡在了顶部。

Answer 1

您是否尝试过使用顶部或底部的 css 属性？

在这种情况下，如果你想移动橙色方块，你可以这样做：

    .block-2{
     background: orange;
     top: 80px; // You add this
     width: 80vw;
     height: 80vw;
     transition: background-color 0.3s ease-in-out;
    }

如何移动网页上的元素？

问题描述投票：0回答：1

1个回答

最新问题

如何移动网页上的元素？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1