# 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>