S6-L37-使用 ul li 設計產品列表

[設計產品列表]


為何不能用div來排？
主要因為這邊是主題式的選單，所以要用ul>li方式


<li>是block元素，但可用float去讓其往左或右做並排效果

block元素可設定width/height

注意可設定box-sizing:border-box



<li>裡面會有

• 圖片
• 標題
• 價格

如何不讓img超出父元素？

設定img width:100%

範例圖