공부/메가박스 사이트 따라만들기
메가박스 사이트 따라 만들기 - 메가박스 할인카드
KDONG
2022. 2. 13. 22:16
메가박스 할인카드
min-height
영역이 없을 경우 min-height값을 줘서 영역을 잡아줍니다.
결과
HTML
<article class="help_box2">
<h3>메가박스 할인카드</h3>
<div class="card">
<ul>
<li>
<a href="#">
<span><img src="assets/img/card01.jpg" srcset="assets/img/card01@2.jpg 2x" alt="card01"></span>
<strong>T멤버십 일반</strong>
<em>영화 2,000원 현장 즉시 할인(1일 5매)</em>
</a>
</li>
<li>
<a href="#">
<span><img src="assets/img/card02.jpg" srcset="assets/img/card02@2.jpg 2x" alt="card01"></span>
<strong>T멤버십 일반</strong>
<em>영화 2,000원 현장 즉시 할인(1일 5매)</em>
</a>
</li>
<li>
<a href="#">
<span><img src="assets/img/card03.jpg" srcset="assets/img/card03@2.jpg 2x" alt="card01"></span>
<strong>T멤버십 일반</strong>
<em>영화 2,000원 현장 즉시 할인(1일 5매)</em>
</a>
</li>
</ul>
</div>
</article>
style.css
/* 할인카드 */
.card {
padding: 17px;
}
.card ul {}
.card ul li {
position: relative;
border: 1px solid #d7d7d7;
padding: 17px;
margin-bottom: 17px;
min-height: 102px;
box-sizing: border-box;
}
.card ul li span {
position: absolute;
left: 17px;
top: 17px;
}
.card ul li span img {
width: 105px;
}
.card ul li strong {
display: block;
font-size: 18px;
color: #777;
padding-left: 120px;
}
.card ul li em {
display: block;
font-size: 14px;
color: #777;
font-weight: 300;
padding-left: 120px;
}
출력