---
# System prepended metadata

title: cakeCss_Lab 練習

---

# cakeCss_Lab 練習
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>商品呈列範例</title>
<style>

/* step 1 
設定蛋糕圖片寛度: 100px ;
*/

img { width: 100px;}	


/* step 2
設定麵包屑目前功能項目( 將元素命名為 funcName)的顏色為deepPink
*/
#funcName { color:deepPink}

/* step 3
設定陳列商品資訊的div (將其歸類為 商品類別 product ) : 
寛度(200px),高度(200px),背景色(#F0E0FE),邊框(樣式: dotted , 寛度: 1px, 顏色deepPink)
*/
div.product {
	 width :200px;
     height:200px;
	 background-color:#F0E0FE;
	 border-style:dotted;
	 border-width:1px;
	 border-color:deepPink;
	 }


/* step 4
設(div.product)定浮動靠左
*/
div.product{
    float:left;

}

/* step 5
設定(div.product)右margin
*/
div.product{
    margin-right: 2px;
    margin-bottom: 2px;
}

/* step 6
設定清單(div.product ol )的編碼不顯示
*/	 
div.product ol{
	list-style: none;
}
	   
/* step 7
設定清單(div.product ol )的左邊padding
*/	
div.product ol{
	padding-left: 8px;
}

/* step 8
設定 (div.product ol li )中
的span前景色為blue
*/
div.product ol li span{
	color:blue;
}


</style>

</head>

<body>
<div>首頁 >> 商品專區 >> <span id="funcName">優惠商品</span></div>
<ol>
  <li>選購商品</li>
  <li>填寫收件資料</li>
  <li>選擇付款方式</li>
  <li>確認訂單</li>
</ol>
  
<div class="product">
<ol>
<li><img src="images/M1_001.gif" />
<li>商品名稱 : <span>孔雀香草蛋糕</span></li> 
<li>商品單價 : <span>500 </span></li> 
<li>商品尺寸 : <span>8寸 </span></li> 
</ol>
</div>

<div class="product">
<ol>
<li><img src="images/M1_002.gif" />
<li>商品名稱 : <span>水果蛋糕 </span></li> 
<li>商品單價 : <span>550</span></li> 
<li>商品尺寸 : <span>8寸 </span></li> 
</ol>
</div>

<div class="product">
<ol>
<li><img src="images/M1_003.gif" />
<li>商品名稱 : <span>水果花蛋糕 </span></li> 
<li>商品單價 : <span>550</span></li> 
<li>商品尺寸 : <span>8寸 </span></li> 
</ol>
</div>

<div class="product">
<ol>
<li><img src="images/M2_001.gif" />
<li>商品名稱 : <span>黑森林蛋糕 </span></li> 
<li>商品單價 : <span>600 </span></li> 
<li>商品尺寸 : <span>8寸 </span></li> 
</ol>
</div>

<div class="product">
<ol>
<li><img src="images/M1_005.gif" />
<li>商品名稱 : <span>水果派對蛋糕 </span></li> 
<li>商品單價 : <span>600 </span></li> 
<li>商品尺寸 : <span>8寸 </span></li> 
</ol>
</div>

<div class="product">
<ol>
<li><img src="images/M2_002.gif" />
<li>商品名稱 : <span>小太陽蛋糕 </span></li> 
<li>商品單價 : <span>600 </span></li> 
<li>商品尺寸 : <span>8寸 </span></li> 
</ol>
</div>
</body>
</html>