天气代码，，，，，，，，，，，，，，，，

最新推荐文章于 2024-11-05 20:00:00 发布

Forever伟

最新推荐文章于 2024-11-05 20:00:00 发布

阅读量136

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/2402_83286556/article/details/137753977

版权

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex盒子示例</title>
<style>
  body {
    margin: 0;
    background-color: #f2f2f2;
  }
  .flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .square-box {
    width: 90%;
    padding-top: 90%;
    background-color: white;
    border-radius: 15px;
    box-sizing: border-box;
    position: relative;
  }
  .title {
    position: absolute;
    top: 10px;
    left: 10px;
    margin: 0;
  }
  .info-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    position: absolute;
    top: 60px;
    width: 100%;
    padding: 0 1%;
  }
  .info-box {
    width: 48%;
    height: 100px;
    background-color: #e0e0e0;
    border-radius: 10px;
    margin-bottom: 4px;
    position: relative;
  }
  .temperature {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 12px;
    color: gray;
  }
  .celsius {
    position: absolute;
    top: calc(5px + 12px + 3px);
    left: 5px;
    font-size: 16px;
    font-weight: bold;
    color: black;
  }
  .info-box:nth-child(2)::after {
    content: '';
    display: block;
    width: 70%;
    height: 3px;
    background: linear-gradient(to right, lightgreen, orange, purple);
    position: absolute;
    top: 50%;
    left: 15%;
    transform: translateY(-50%);
    z-index: 1; /* 确保彩色条在圆点下方 */
  }
  .indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    top: 50%; /* 与彩色条对齐 */
    left: 50%; /* 默认位置在彩色条的中间 */
    transform: translate(-50%, -50%); /* 确保圆点居中 */
    z-index: 2; /* 确保圆点在彩色条上方 */
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="square-box">
    <h1 class="title">专业指数天气</h1>
    <div class="info-container">
      <div class="info-box">
        <div class="temperature">体感温度</div>
        <div class="celsius">20°C</div>
      </div>
      <div class="info-box">
        <div class="temperature">体感温度</div>
        <div class="indicator"></div> <!-- 新增的圆点 -->
      </div>
      <div class="info-box">
        <div class="temperature">体感温度</div>
      </div>
      <div class="info-box">
        <div class="temperature">体感温度</div>
      </div>
    </div>
  </div>
</div>
<script>
  // 假设指数的范围是0到100
  var indicatorPosition = 50; // 指数值，可以根据实际情况调整

  // 根据指数值调整圆点的位置
  function updateIndicatorPosition() {
    var indicator = document.querySelector('.indicator');
    var infoBoxWidth = document.querySelector('.info-box').offsetWidth;
    var colorBarWidth = infoBoxWidth * 0.7;
    var leftPosition = (colorBarWidth * indicatorPosition / 100) + (infoBoxWidth * 0.15) - 5; // 减去5是为了圆点居中
    indicator.style.left = leftPosition + 'px';
  }

  // 页面加载完成后更新圆点位置
  window.onload = updateIndicatorPosition;
</script>
</body>
</html>