时间戳

首页 > 解决方案 > 如何居中并更改这些项目的大小？

html - 如何居中并更改这些项目的大小？

问题描述

我是 HTML 和 CSS 的新手，我正在尝试从前端导师那里轻松挑战。我目前一直在尝试将卡片放置在中心，以及更改图像的大小和div（尽管主要是图像）。由于某种原因，我无法更改它。

这是桌面布局需要的样子： 图片

这就是我所拥有的： 图片

到目前为止，这是我设法完成的所有 CSS：

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
    /* Primary */
    --veryDarkBlue: hsl(233, 47%, 7%); /* background */
    --darkDesaturatedBlue: hsl(244, 38%, 16%); /* card */
    --softViolet: hsl(277, 64%, 61%); /* accent */

    /* Neutral */
    --White: hsl(0, 0%, 100%); /* main heading, stats */
    --SlightlyWhite: hsla(0, 0%, 100%, 0.75); /* main paragraph */
    --SlightyWhite2: hsla(0, 0%, 100%, 0.6); /* stat headings */
}

* {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--veryDarkBlue);
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.info {
    background-color: var(--darkDesaturatedBlue);
    text-align: center;
}

.image {

}

h1, h2 {
    color: var(--White);
}

.stat-head, p {
    color: var(--SlightyWhite2);
}

.stat-head {
    letter-spacing: .1em;
}

span {
    color: var(--softViolet);
}

@media (min-width: 1440px) {
    .card {
        flex-direction: row-reverse;
    }

    .info {
        border-top-left-radius: .5em;
        border-bottom-left-radius: .5em;
        text-align: left;
    }

    .image {
        border-top-right-radius: .5em;
        border-bottom-right-radius: .5em;        
    }

    .stats {
        display: inline-flex;
    }
}

编辑：不确定是否应该包括在内，但这是 HTML：

<div class="card">
  <div class="image2">
    <img src="/FrontendMentorChallenges/StatsPreviewCard/images/image-header-mobile.jpg" alt="">
  </div>

  <div class="info">
    <h1>Get <span>insights</span> that help your business grow</h1>

    <p>Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency</p>

    <div class="stats">
      <div>
        <h2>10K+</h2>
        <p class="stat-head">COMPANIES</p>
      </div>

      <div>
        <h2>314</h2>
        <p class="stat-head">TEMPLATES</p>
      </div>
  
      <div>
        <h2>12M+</h2>
        <p class="stat-head">QUERIES</p>
      </div>
    </div>
  </div>
</div>

标签： htmlcss

解决方案

到目前为止，我已经查看了您的代码并对其进行了处理，但是我没有太多时间，但这似乎可以帮助您改进代码。

 <div class="card">
      <div class="img">
        <img
          src="https://image.shutterstock.com/image-photo/closed-cardboard-box-taped-isolated-260nw-273611708.jpg"
          alt=""
        />
      </div>

      <div class="info">
        <h1>Get <span>insights</span> that help your business grow</h1>

        <p>
          Discover the benefits of data analytics and make better decisions
          regarding revenue, customer experience, and overall efficiency
        </p>

        <div class="stats">
          <div>
            <h2>10K+</h2>
            <p class="stat-head">COMPANIES</p>
          </div>

          <div>
            <h2>314</h2>
            <p class="stat-head">TEMPLATES</p>
          </div>

          <div>
            <h2>12M+</h2>
            <p class="stat-head">QUERIES</p>
          </div>
        </div>
      </div>
    </div>

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

:root {
  /* Primary */
  --veryDarkBlue: hsl(233, 47%, 7%); /* background */
  --darkDesaturatedBlue: hsl(244, 38%, 16%); /* card */
  --softViolet: hsl(277, 64%, 61%); /* accent */

  /* Neutral */
  --White: hsl(0, 0%, 100%); /* main heading, stats */
  --SlightlyWhite: hsla(0, 0%, 100%, 0.75); /* main paragraph */
  --SlightyWhite2: hsla(0, 0%, 100%, 0.6); /* stat headings */
}

* {
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--veryDarkBlue);
}

.card {
  position: absolute;
  top: 50%;
  right: 60%;
  transform: translate(50%, -50%);
}

.info {
  background-color: var(--darkDesaturatedBlue);
  text-align: center;
}

.img {
  position: absolute;
  top: 50%;
  right: -34%;
  transform: translate(50%, -50%);
}

h1 {
  color: var(--White);
  padding: 20px;
}
h2 {
  color: var(--White);
}

.info {
  color: var(--SlightyWhite2);
}

.info p {
  padding: 30px;
}

.stat-head p {
  letter-spacing: 0.1em;
}
.stats p {
  padding: 10px;
  letter-spacing: 0.1em;
}

span {
  color: var(--softViolet);
}

.stats {
  display: flex;
  justify-content: center;
}

@media (max-width: 800px) {
  .card {
    width: 100%;
    flex-direction: row-reverse;
  }

  .info {
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    text-align: left;
  }

  .image {
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
  }

  .stats {
    display: inline-flex;
  }
}

推荐阅读