Learn_CSS_CLS3_thinkTest1

for Learning book demo use

by Loki Jiang

HTML

<div class="container">
  <div class="item">
    <div class="tab">hot</div>
    <img src="https://fakeimg.pl/300x200" />
    <h2>title</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim impedit
      inventore minima. Maxime possimus enim adipisci dolorem velit, aperiam
      nobis officia tempora odio eveniet. Accusamus, odio eaque. Aliquam, earum
      a.
    </p>
  </div>
  <div class="item">
    <div class="tab">hot</div>
    <img src="https://fakeimg.pl/300x200" />
    <h2>title</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim
      impedit inventore minima. Maxime possimus enim adipisci dolorem velit,
      aperiam nobis officia tempora odio eveniet. Accusamus, odio eaque.
      Aliquam, earum a.
    </p>
  </div>
  <div class="item">
    <div class="tab">hot</div>
    <img src="https://fakeimg.pl/300x200" />
    <h2>title</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim impedit
      inventore minima. Maxime possimus enim adipisci dolorem velit, aperiam
      nobis officia tempora odio eveniet. Accusamus, odio eaque. Aliquam, earum
      a.
    </p>
  </div>
</div>

CSS

.container {
  width: 960px;
  margin: auto;
}
.item {
  width: 300px;
  margin: 10px;
  padding: 10px;
  border: 1px solid #000;
  float: left;
  position: relative;
  box-sizing: border-box;
}

.item img {
  width: 100%;
}

.item .tab {
  background-color: red;
  padding: 5px 5px;
  color: white;
  position: absolute;
  top: 0;
  right: 0;
}