CSS 쇼핑몰 간단 예제
<html>
<head>
<title>zzarungna 공부중</title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
<meta name="keywords" content="수련중" />
<meta name="description" content="xhtml, css, javascript" />
<style type="text/css">
div, span {
font-style:돋움;
font-size:12px;
color:#8e8e8e;
}
#start {
border:1px solid black;
width:910px;
}
#img_ctl_a {
position:absolute;
left:30px;
}
#img_ctl_b {
}
table .listtbl {
border-right:1px dotted #969696;
padding-right:15px;
padding-left:15px;
}
#product {
font-size:14px;
color:#7b7b7b;
font-weight:bold;
}
#product_cmt {
font-size:11px;
color:#8c8c8c;
padding-left:220px;
font-weight:normal;
margin-top:-20px;
}
#search img {
float:right;
}
#listtbl_last {
padding-left:15px;
border:0px;
}
li .titlebold {
font-weight:bold;
color:#6e6e6e;
}
#line {
margin:15px;
}
.minfont {
font-weight:bold;
color:#6e6e6e;
font-size:11px;
}
.minmoney {
font-weight:normal;
color:#ff8c8c;
text-decoration:underline;
}
.number {
font-size:11px;
text-decoration:blink;
}
.bar {
font-weight:normal;
}
.count {
font-size:11px;
text-decoration:underline;
}
</style>
</head>
<body>
<div id="start">
<div id="img_ctl_a">
<img src="./images/ts_search_dsearch.gif" />
</div>
<div id="img_ctl_b">
<img src="./images/bg_search_titbar01_new.gif" />
</div>
<ul>
<div>
<li><img src="./images/img_serviceInfo.gif" /> <span class="titlebold">무료반품/교환쿠폰 서비스</span>
<span>- 상품은 맘에 안들고~ 교환/반품은 귀찮고.. 그럴땐 인터파크 무료반품/교환 쿠폰을 이용하세요</span>
</li>
</div>
<div>
<li><img src="./images/img_serviceInfo.gif" /> <span class="titlebold">하루 한상품 즐거운 가격, 모닝커피</span>
<span>- 하루에 한번, 하루에 한가지 기분좋은 상품과 함께 하세요~</span>
</li>
</div>
<div>
<li><img src="./images/img_serviceInfo.gif" /> <span class="titlebold">쇼핑의 새로운 즐거움 I-포인트몰</span>
<span>- 상품 할인도 되고, 배송비 결제도 되고~! 이런 포인트 있으면 나와바~!!!</span>
</li>
</div>
<div>
<li><img src="./images/img_serviceInfo.gif" /> <span class="titlebold">아이 포인트가 쿠폰을 만났을때</span>
<span>- 쿠폰 할인이냐~ 포인트 할인이냐~ 이제 그런 고민은 인터파크에서 NO~ 동시에 사용하세요</span>
</li>
</div>
</ul>
<div id="search">
<div id="product">▶ 5월 27일 최신 인기상품순위<div id="product_cmt">(시중에서 최근 가장 많은 인기를 끌고 있는 상품입니다.)
<img src="./images/bt_more_searchResult.gif" />
</div>
<hr id="line" />
</div>
</div>
<table>
<tr>
<td class="listtbl">
<img src="./images/001.png" />
<div class="dftfont">S2 Portable USB 3.0</div>
<div class="dftfont">MetalGrey(HXMTA-</div>
<div class="minfont">최저가<span class="bar"> | </span><span class="minmoney">149,000</span>원</div>
<div class="minfont">상품수<span class="bar"> | </span><span class="count">16</span><span>개</span></div>
</td>
<td class="listtbl">
<img src="./images/002.png" />
<div class="dftfont">Cruzer CZ50 Blade</div>
<div class="dftfont">MLC[16GB]</div>
<div class="minfont">최저가<span class="bar"> | </span><span class="minmoney">22,310</span>원</div>
<div class="minfont">상품수<span class="bar"> | </span><span class="count">40</span><span>개</span></div>
</td>
<td class="listtbl">
<img src="./images/003.png" />
<div class="dftfont">ipTIME N604R</div>
<div class="dftfont"> </div>
<div class="minfont">최저가<span class="bar"> | </span><span class="minmoney">29,340</span>원</div>
<div class="minfont">상품수<span class="bar"> | </span><span class="count">363</span><span>개</span></div>
</td>
<td class="listtbl">
<img src="./images/004.png" />
<div class="dftfont">ipTIME N604S</div>
<div class="dftfont"> </div>
<div class="minfont">최저가<span class="bar"> | </span><span class="minmoney">34,840</span>원</div>
<div class="minfont">상품수<span class="bar"> | </span><span class="count">225</span><span>개</span></div>
</td>
<td class="listtbl">
<img src="./images/005.png" />
<div class="dftfont">Canvio USB 3.0</div>
<div class="dftfont">[1TB]</div>
<div class="minfont">최저가<span class="bar"> | </span><span class="minmoney">132,610</span>원</div>
<div class="minfont">상품수<span class="bar"> | </span><span class="count">14</span><span>개</span></div>
</td>
<td id="listtbl_last">
<img src="./images/006.png" />
<div class="dftfont">Cruzer CZ50 Blade</div>
<div class="dftfont">MLC [4GB]</div>
<div class="minfont">최저가<span class="bar"> | </span><span class="minmoney">7,000</span>원</div>
<div class="minfont">상품수<span class="bar"> | </span><span class="count">30</span><span>개</span></div>
</td>
</tr>
</table>
<hr />
</div>
</body>
</html>
결과
이미지는 원하는 이미지를 경로에 맞게 수정하면 깨지지 않습니다.
