-
선생님 질문이 있습니다.
테이블 태그 밑에 디브 태그(edit your shopping cart, payment method)추가해서 레이아웃을 만들었는데 왜 cart-background에 적용한 백그라운드 컬러가 적용이 안되는지 모르겠어요 그래서 디브 태그에 클래스 주고 백그라운드 컬러 적용 해도 안먹어요 처부 파일로 html, css 파일 올려요 도와주세요<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/cart.css" rel="stylesheet">
</head>
<body>
<div class="cart-background">
<h2>Your shopping cart</h2>
<table class="cart-table">
<thead>
<tr>
<td></td>
<th>ITEM</th>
<th>Amount</th>
<th>PRICE</th>
<th>TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td>
<h3>SONY</h3>
<p>FE 70-200mm F2.8 GM OSS</p>
</td>
<td>1</td>
<td>$1979.00</td>
<td>$1979.00</td>
</tr>
<tr>
<td>
</td>
<td>
<h3>SONY</h3>
<p>Sonnar T* E 24mm F1.8 ZA OSS</p>
</td>
<td>1</td>
<td>$989.00</td>
<td>$989.00</td>
</tr>
<tr>
<td class="td-total" colspan="4"></td>
<td class="td-total"><h3>$2968.00</h3></td>
</tr>
</tbody>
</table>
<div class="edit-cart">
<p>Edit your shopping cart</p>
<button>choose payment method</button>
</div>
</div>
</body>
</html>.cart-background {
background-color: rgb(186, 221, 245);
width: 100%;
max-width: 700px;
padding: 30px;
}
.cart-background h2 {
font-size: 30px;
font-weight: bold;
text-align: left;
margin: 30px auto;
}
.cart-table {
margin: auto;
border-collapse: collapse;
background-color: white;
border-radius: 5px;
}
img {
width: 60px;
}h3, p{
margin: 5px;
}
.cart-table th,.cart-table td {
text-align: center;
padding: 10px;
border-bottom: 1px solid black;
}
.td-total{
border: none;
}
.edit-cart {
position: relative;
background-color: rgb(186, 221, 245);
width: 100%;
max-width: 700px;
}
.edit-cart p {
position: absolute;
left: 50px;
top: 50px;
border-bottom: 1px solid lightslategray;
}
.edit-cart button {
float:right;
margin-top: 30px;
margin-right: 200px;
}
.edit-cart button {
padding: 20px;
background-color: rgb(83, 83, 236);
font-size: 18px;
color: white;
border: none;
border-radius: 5px;
position: absolute;
top: 10px;
right: -150px;
}
- 답변은 로그인 후 가능합니다.