主页 / user-513972

IvanNaStackOF's questions

Martin Hope
IvanNaStackOF
Asked: 2023-09-07 23:10:06 +0000 UTC
  • 5

参考了别人的代码（我已经找不到源代码了）。我想将元素排列在一个圆圈上，以便“圆圈”在圆圈上均匀分布，并且在添加带有每个描述的文本块时不会移动（现在“圆圈”根据文本量而移动）在相邻的块中，这很糟糕）。我正在尝试仅使用 CSS 来实现它。

我请求实施方面的帮助！ https://codepen.io/IvanVGitHub/pen/OJrXvOM

.cards_wrapper {
  position: relative;
  height: 485px; width: 485px;
  font: bold 11px/1em "Arial", sans-serif;
  background-image: radial-gradient( circle at center, #fff0 53px, #fff 54px, #fff 57px, #abd2ee 58px, #abd2ee 60px, #fff 61px, #fff 106px, #d5e1ec 107px, #d5e1ec 143px, #fff0 144px, #fff0 169px, #d5e1ec 170px, #d5e1ec 172px, #fff0 173px), url(https://thispersondoesnotexist.com/image);
  background-position: 0 0, center;
  background-size: auto, 110px;
  background-repeat: no-repeat;
}

.cards_wrapper::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 66px);
  height: calc(100% - 66px);
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px dashed #d5e1ec;
}

.cards_wrapper::after {
  content: "центр Вселенной";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -85px);
  padding: 6px 12px;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: #4facf1;
  color: #fff;
}

.angle_wrapper {
  position: absolute;
  left: calc(50% - 50px);
  height: 50%;
  transform-origin: 50% 100%;
}
.angle_wrapper:nth-child(1) { transform: rotate(30deg); }
.angle_wrapper:nth-child(2) { transform: rotate(90deg); }
.angle_wrapper:nth-child(3) { transform: rotate(150deg); }
.angle_wrapper:nth-child(4) { transform: rotate(210deg); }
.angle_wrapper:nth-child(5) { transform: rotate(270deg); }
.angle_wrapper:nth-child(6) { transform: rotate(330deg); }

.card {
  position: relative;
  display: flex;
  flex-flow: row;
  justify-content: start;
  align-items: center;
  text-align: center;
  height: 100px; width: 100px;
  transform-origin: 50% 33px;
}
.card img p {
  display:flex, align-items:center,gap:20px
}

.angle_wrapper:nth-child(1) .card { transform: rotate(-30deg); }
.angle_wrapper:nth-child(2) .card { transform: rotate(-90deg); }
.angle_wrapper:nth-child(3) .card { transform: rotate(-150deg); }
.angle_wrapper:nth-child(4) .card { transform: rotate(-210deg); }
.angle_wrapper:nth-child(5) .card { transform: rotate(-270deg); }
.angle_wrapper:nth-child(6) .card { transform: rotate(-330deg); }

.card_img {
  width: 66px; height: 66px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px solid #d5e1ec;
}

.card_title, .card_rating {
  margin: 0;
  color: #696d78;
}

.card_rating {
  position: absolute;
  top: 0; right: 0;
  padding: 4px;
  border-radius: 4px;
  background-color: #abd2ee;
}
<section class="cards">
  <div class="container">
    <div class="cards_wrapper">
    
      <div class="angle_wrapper">
        <div class="card">
          <img class="card_img" src="https://onlinetools.com/images/examples-onlineimagetools/color-grid.png" alt="">
          <h4 class="card_title">Иванов Иван</h4>
          <!--           <p class="card_rating">★ 4.9</p> -->
        </div>
      </div>

      <div class="angle_wrapper">
        <div class="card">
          <img class="card_img" src="https://onlinetools.com/images/examples-onlineimagetools/color-grid.png" alt="">
          <h4 class="card_title">Константинов Константин</h4>
          <!--           <p class="card_rating">★ 4.9</p> -->
        </div>
      </div>

      <div class="angle_wrapper">
        <div class="card">
          <img class="card_img" src="https://onlinetools.com/images/examples-onlineimagetools/color-grid.png" alt="">
          <h4 class="card_title">Машина Маша</h4>
          <!--           <p class="card_rating">★ 4.9</p> -->
        </div>
      </div>

      <div class="angle_wrapper">
        <div class="card">
          <h4 class="card_title">Надина Надежда</h4>
          <img class="card_img" src="https://onlinetools.com/images/examples-onlineimagetools/color-grid.png" alt="">
          <!--           <p class="card_rating">★ 4.9</p> -->
        </div>
      </div>

      <div class="angle_wrapper">
        <div class="card">
          <h4 class="card_title">Петров Пётр</h4>
          <img class="card_img" src="https://onlinetools.com/images/examples-onlineimagetools/color-grid.png" alt="">
          <!--           <p class="card_rating">★ 4.9</p> -->
        </div>
      </div>

      <div class="angle_wrapper">
        <div class="card">
          <h4 class="card_title">blablablablablablabla</h4>
          <img class="card_img" src="https://onlinetools.com/images/examples-onlineimagetools/color-grid.png" alt="">
          <!--           <p class="card_rating">★ 4.9</p> -->
        </div>
      </div>

    </div>
  </div>
</section>

现在是什么样子

现在是什么样子

html
Martin Hope
IvanNaStackOF
Asked: 2022-12-23 20:30:33 +0000 UTC
  • 9

在调用 y 方法.size()时，ArrayList我们是给出重新计算列表大小的命令，还是简单地从内存中读取一个存储列表大小的“服务”变量？

假设我们有一个包含 1_000_000 个非常大的字符串的列表。两种实现之间会有性能差异吗？

第一个选项：

for (int i = 0; i < list.size(); i++) {...}

第二个选项：

int k = list.size();
for (int i = 0; i < k; i++) {...}
java